我正在尝试让 Jplayer 使用 XML 文档工作，以便我的客户可以轻松更新播放列表。当我将歌曲编码到 JS 中时，我能够让它毫无问题地工作。我目前的代码是：
<div class="body-content">
<div class="row">
<div class="col-lg-8" id="overlay-box">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<p>Update Required
<br />
To play the media you will need to update your browser to a newer version.
</p>
</div>
</div>
</div>
</div>
然后我的JS代码是：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Get the Playlist from the xml file
$.ajax({
type: "GET",
url: "./mp3/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(),
playlist = JSON.stringify({ title: mytitle, artist : myartist, mp3 : mymp3 }),// 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);
});
}
});
// Jplayer Playlist instance
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "jp_container_1"
}, [
// 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
},
supplied: "mp3", // add the file format extension you will be streaming
wmode: "window"
});
});
</script>
<script type="text/javascript" src="js/prettify-jPlayer.js"></script>
我的 XML 文件是：
<playlist>
<track>
<title>Waving Not Drowning</title>
<artist>Orbital</artist>
<mp3>http://www.beyondhyper.com/mp3/Orbital-The Altogether-WavingNotDrowning.mp3</mp3>
</track>
<track>
<title>Crazy People</title>
<artist>3 Monkeys</artist>
<mp3>http://www.beyondhyper.com/mp3/3Monkeys-CrazyPeople.mp3</mp3>
</track>
<track>
<title>Voices</title>
<artist>Bedrock</artist>
<mp3>http://www.beyondhyper.com/mp3/Bedrock- Voices.mp3</mp3>
</track>
<track>
<title>Timeless</title>
<artist>Transa</artist>
<mp3>http://www.beyondhyper.com/mp3/Transa-Timeless.mp3</mp3>
</track>
</playlist>
无论我做什么，我只看到“无解决方案”标签。如果有人对我缺少什么有任何想法，请告诉我。
提前致谢。