我的音频播放器未连接到播放器
My audio player not connecting with player
我正在尝试实现一个从服务器文件夹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"> </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
,并将mp3文件列表以可以在JavaScript中使用 - 在JavaScript的第一行中,我添加了这一行:
<?php echo getFiles();?>
,它将创建一个JavaScript变量,其中包含mp3列表的内容 - 在您的
jPlayerPlaylist
对象中,我使用此变量myPlaylist
作为播放列表 - 在html中,
<ul>
将是空的
相关文章:
- 如何检查用户在html5视频播放器中观看了完整的视频
- 音乐播放器使用相同的id播放所有内容
- 在FF和IE中使用vimeo播放器的问题-加载flash播放器而不是使用HTML5播放器
- 使用HTML5播放器时使用Javascript更改Youtube视频
- 可以't根据设备自动调整youtube播放器的大小
- html5视频播放器和视频js之间的关系
- 有没有办法在dailymotion播放器的新测试版中播放youtube视频
- 我可以共享一个HTML播放器吗
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- 我们如何在dailymotion播放器的新测试版中播放youtube视频
- 角度媒体播放器和动态内容
- Javascript::通过HTML5音频播放器播放列表播放多个音频文件
- HTML5、CSS3和/或JS中旋转CD上的音频播放器
- 用于播放背景音乐的嵌入式flash播放器在IE浏览器中不起作用
- 在选择更改时更改从外部javascript生成的flash播放器
- 视频播放器错误promise DOMException中未捕获
- JW播放器-当其他媒体(RTMP)断开连接时,循环MP4待机视频
- 构建一个2d html5画布游戏,并尝试用javascript连接到服务器以创建播放器"高芯&”;
- 我的音频播放器未连接到播放器
- 连接音量滑块到播放器