好的,所以我一直在研究一个 jquery 移动音乐播放器,我想用 phonegap 把它变成一个应用程序。问题是音频不能在本地工作,如果流式传输它可以工作,但不能在本地工作(如在设备上)。我正在将 J-player Circle Player 与自定义 XML 播放列表一起使用,无论如何我一直收到此错误(尝试在没有有效媒体播放器的情况下调用 getDuration),这与研究与权限或文件目录错误有关,所以有人可以帮忙我
这是我的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link href="css/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<!-- Music Script-->
<link rel="stylesheet" type="text/css" href="css/circleplayer.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/music.player.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Page Two</a></li>
<li><a href="#page3">Page Three</a></li>
<li><a href="#page4">Page Four</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<a data-role="button" data-direction="reverse" href="#page" class="ui-btn-left">
Button
</a>
<h1>Page Two</h1>
</div>
<div id="cp_container">
<div class="jp-playlist">
<ul style="display: block;"><li class="jp-playlist-current"><div><a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">��</a>
</div></div></div>
<div data-role="footer" data-position="fixed">
<div id="white-noise-player" class="cp-jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"></div>
<div id="cp_container" align="center">
<div class="cp-container">
<div class="cp-buffer-holder" style="display: block;">
<div class="cp-buffer-1" style="-webkit-transform: rotate(118.65839406080333deg);"></div>
<div class="cp-buffer-2" style="display: none;"></div>
</div>
<div class="cp-progress-holder" style="display: block;">
<div class="cp-progress-1" style="-webkit-transform: rotate(0deg);"></div>
<div class="cp-progress-2" style="-webkit-transform: rotate(0deg); display: none;"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li><a class="cp-play" tabindex="1" style="">play</a></li>
<li><a class="cp-pause" style="display: none;" tabindex="1">pause</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Page Four</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<script>
$(document).ready(function(){
// Get the Playlist from the xml file
$.ajax({
type: "GET",
url: "**playlist.xml**",
dataType: "xml",
success: function(xml) {
$(xml).find('track').each(function(){
var self = $(this),
mytitle = self.find('title').text(),
myartist = self.find('artist').text(),
mymp3 = self.find('mp3').text(),
myduration = self.find('duration').text(),
playlist = JSON.stringify({ title: mytitle, artist : myartist, mp3 : mymp3, duration : myduration }),// Convert the XML nodes into JSON formatted strings
playlistObject = $.parseJSON(playlist); // Convert the JSON formatted strings into JSON objects and add to playlist
myPlaylist.add(playlistObject);
});
}
});
// WhiteNoise Player instance
var whiteNoise = new CirclePlayer("#white-noise-player", {}, {
cssSelectorAncestor: "#cp_container"
});
// WhiteNoise Playlist instance
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#white-noise-player",
cssSelectorAncestor: "#cp_container",
}, [
// Playlist is created when the page loads via ajax
],
{
playlistOptions: {
autoPlay: false, // self explanatory
loopOnPrevious: false, // If loop is active, the playlist will loop back to the end when executing previous()
shuffleOnLoop: true, // If loop and shuffle are active, the playlist will shuffle when executing next() on the last item
enableRemoveControls: false, // Adds an x that allows user to remove songs from playlist
displayTime: 0, // how fast the playlist transitions on page load
addTime: 'fast', // transition time when adding a song
removeTime: 'fast', // transition time when removing a song
shuffleTime: 'slow' // transition time when shuffling playlist
},
swfPath: "../scripts",
supplied: "mp3", // add the file format extension you will be streaming
wmode: "window"
});
});
</script>
</body>
</html>
这是我的 XML 播放列表
<playlist>
<track>
<title>Test 1</title>
<artist>Test Artist</title>
<mp3>/android_asset/www/03.mp3</mp3>
<free>false</free>
<duration>4:20</duration>
</track>
<track>
<title>Voices</title>
<artist>Bedrock</artist>
<mp3>http://www.beyondhyper.com/mp3/Bedrock- Voices.mp3</mp3>
<free>false</free>
<duration>4:37</duration>
</track>
<track>
<title>Timeless</title>
<artist>Transa</artist>
<mp3>http://www.beyondhyper.com/mp3/Transa-Timeless.mp3</mp3>
<free>false</free>
<duration>6:02</duration>
</track>
<track>
<title>Timeless</title>
<artist>Transa</artist>
<mp3>http://www.beyondhyper.com/mp3/Transa-Timeless.mp3</mp3>
<free>false</free>
<duration>6:02</duration>
</track>
</playlist>
抱歉,这是一个很长的问题,但我很想继续我的项目
干杯