我的音频播放器没有与播放器连接

时间：2016-11-03 23:22:09

标签： javascript php jquery html

我正在尝试从服务器文件夹mp3到播放器实现代码。我从服务器获得了mp3文件列表但是没有使用mp3的播放器。我正在使用jplayer（http://jplayer.org/_）。帮助我勇敢。我是新人，不熟悉stackoverflow的规则，它阻止了我四次。

这是我的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>

1 个答案:

答案 0 :(得分：0)

好的，正如我在评论中提到的那样，您必须在 html 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>

请注意：

    你在getFiles function中的
  1. 我声明了一个名为的变量 $myPlaylist并将 mp3 文件列表以格式存储在其中 可以在 JavaScript
    2. 中使用
  2. 在 JavaScript 的第一行中我添加了这一行：<?php echo getFiles();?>，它将使用 mp3的内容创建 JavaScript变量 列表
  3. 在您的jPlayerPlaylist对象中，我使用此变量myPlaylist作为播放列表
  4. 在 html 中，<ul>将为空，因为它是
相关问题
最新问题