我的音频播放器未连接到播放器

My audio player not connecting with player

本文关键字:播放器 连接 我的 音频      更新时间:2023-09-26

我正在尝试实现一个从服务器文件夹mp3到播放器的代码。我从服务器上得到了mp3文件列表,但播放器无法使用mp3。我正在使用jplayer(http://jplayer.org/_)。帮帮我,太棒了。我是新人,不太了解斯塔克夫流的规则,它四次挡住我。

这是我的player.php代码。

  <?php
function getFiles($path = 'usb') {
    // Open the path set
    if ($handle = opendir($path)){
        // Loop through each file in the directory
        while ( false !== ($file = readdir($handle)) ) {
            // Remove the . and .. directories
            if ( $file != "." && $file != ".." ) {
                // Check to see if the file is a directory
                if( is_dir($path . '/' . $file) ) {
                    // The file is a directory, therefore run a dir check again
                    getFiles($path . '/' . $file);
                }
                // Get the information about the file
                $fileInfo = pathinfo($file);
                // Set multiple extension types that are allowed
                $allowedExtensions = array('mp3', 'wav', 'ogg', 'flac');
                // Check to ensure the file is allowed before returning the results
                if( in_array($fileInfo['extension'], $allowedExtensions) ) {
                    echo '<li class="active"><a href="' . $path . '/' . $file . '">' . $file . '</a></li>';
                }
            }
        }
        // Close the handle
        closedir($handle);
    }
}
 ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo : jPlayer as an audio playlist player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../dist/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    var myPlayer = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, [
        {
            title:"",
            mp3:"",
            oga:""
        }
    ], {
        swfPath: "http://jplayer.org/latest/dist/jplayer",
        supplied: "oga, mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true
    });

var played = false;    
var playnow = parseInt($.cookie("timeplay"));
function update() {
    if(!played){
         if(playnow){
             $('.showtime').text(playnow);
             //playnow not working.....
            $('#jquery_jplayer_1').jPlayer("play", playnow); 
             played = true;
            }
       else {
            $('#jquery_jplayer_1').jPlayer("play"); 
            played = true;
            }
        }
        else {
            $('#jquery_jplayer_1').bind($.jPlayer.event.timeupdate,function(event){
                $('.showtimeupdate').text(event.jPlayer.status.currentTime);
           $.cookie('timeplay', event.jPlayer.status.currentTime);
                    });
        }
      }
  setInterval(update,1000);
});
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp-type-playlist">
        <div class="jp-gui jp-interface">
            <div class="jp-volume-controls">
                <button class="jp-mute" role="button" tabindex="0">mute</button>
                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
            </div>
            <div class="jp-controls-holder">
                <div class="jp-controls">
                    <button class="jp-previous" role="button" tabindex="0">previous</button>
                    <button class="jp-play" role="button" tabindex="0">play</button>
                    <button class="jp-stop" role="button" tabindex="0">stop</button>
                    <button class="jp-next" role="button" tabindex="0">next</button>
                </div>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                <div class="jp-toggles">
                    <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                    <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                </div>
            </div>
        </div>
        <div class="jp-playlist">
            <ul>
                <li><?php echo getFiles(); ?></li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
    </div>
</body>
</html>

好吧,正如我在评论中提到的,你必须在JavaScript中加载播放列表,而不是在html

因此,您需要对代码进行一些更改。

首先,在php中,您必须创建一个JavaScript变量然后您必须将其加载到JavaScript

所以你的代码应该是这样的:

PHP

<?php
function getFiles($path = 'usb') {
    $myPlaylist = '';
    // Open the path set
    if ($handle = opendir($path)){
        // Loop through each file in the directory
        while ( false !== ($file = readdir($handle)) ) {
            // Remove the . and .. directories
            if ( $file != "." && $file != ".." ) {
                // Check to see if the file is a directory
                if( is_dir($path . '/' . $file) ) {
                    // The file is a directory, therefore run a dir check again
                    $tmpList = getFiles($path . '/' . $file);
                    if(strlen($tmpList) > 0){
                        if(strlen($myPlaylist) > 0)
                            $myPlaylist .=  ',';
                        $myPlaylist .= $tmpList;
                    }
                }
                else{
                    // Get the information about the file
                    $fileInfo = pathinfo($file);
                    // Set multiple extension types that are allowed
                    $allowedExtensions = array('mp3', 'wav', 'ogg', 'flac');
                    // Check to ensure the file is allowed before returning the results
                    if( in_array($fileInfo['extension'], $allowedExtensions) ) {
                        if(strlen($myPlaylist) > 0)
                            $myPlaylist .=  ',';
                        $myPlaylist .= '{';
                        $myPlaylist .= 'title:"'.$file.'",'; // If you can fetch artist name ot song title from ID3 tag, then you can use it here, else you can just put the file name like now
                        $myPlaylist .= 'mp3:"http://www.yourdomain.com/'.$path.'/'.$file.'"';
                        $myPlaylist .= '}';
                    }
                }
            }
        }
        // Close the handle
        closedir($handle);
    }
    return $myPlaylist;
}
?>

JavaScript+html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo : jPlayer as an audio playlist player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../dist/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript">
var myPlaylist = [<?php echo getFiles();?>];
//<![CDATA[
$(document).ready(function(){
    var myPlayer = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, 
        myPlaylist,
    {
        swfPath: "http://jplayer.org/latest/dist/jplayer",
        supplied: "oga, mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true
    });
    var played = false;    
    var playnow = parseInt($.cookie("timeplay"));
    function update() {
        if(!played){
            if(playnow){
                $('.showtime').text(playnow);
                //playnow not working.....
                $('#jquery_jplayer_1').jPlayer("play", playnow); 
                played = true;
            }
            else {
                $('#jquery_jplayer_1').jPlayer("play"); 
                played = true;
            }
        }
        else {
            $('#jquery_jplayer_1').bind($.jPlayer.event.timeupdate,function(event){
                $('.showtimeupdate').text(event.jPlayer.status.currentTime);
                $.cookie('timeplay', event.jPlayer.status.currentTime);
            });
        }
    }
    setInterval(update,1000);
});
</script>
</head>
<body>
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
        <div class="jp-type-playlist">
            <div class="jp-gui jp-interface">
                <div class="jp-volume-controls">
                    <button class="jp-mute" role="button" tabindex="0">mute</button>
                    <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                </div>
                <div class="jp-controls-holder">
                    <div class="jp-controls">
                        <button class="jp-previous" role="button" tabindex="0">previous</button>
                        <button class="jp-play" role="button" tabindex="0">play</button>
                        <button class="jp-stop" role="button" tabindex="0">stop</button>
                        <button class="jp-next" role="button" tabindex="0">next</button>
                    </div>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                    <div class="jp-toggles">
                        <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                        <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                    </div>
                </div>
            </div>
            <div class="jp-playlist">
                <ul>
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                    <li>&nbsp;</li>
                </ul>
            </div>
            <div class="jp-no-solution">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>
</body>
</html>

请注意:

  1. 在您的getFiles function中,我声明了一个名为$myPlaylist,并将mp3文件列表以可以在JavaScript中使用
  2. JavaScript的第一行中,我添加了这一行:<?php echo getFiles();?>,它将创建一个JavaScript变量,其中包含mp3列表的内容
  3. 在您的jPlayerPlaylist对象中,我使用此变量myPlaylist作为播放列表
  4. html中,<ul>将是空的