[英]My audio player not connecting with player
我正在尝试实现从服务器文件夹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"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </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"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </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> </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
我声明了一个名为$myPlaylist
的变量,并以可在JavaScript中使用的格式将mp3文件列表存储在其中。 <?php echo getFiles();?>
,它将创建一个JavaScript变量 ,其中包含mp3列表的内容。 jPlayerPlaylist
对象中,我将此变量myPlaylist
用户用作播放列表 <ul>
将为空
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.