Phonegap - HTML5 - Music Player with XML playlist -
okay, i've been working on jquery mobile music player phonegap turn app. problem audio doesn't work locally, works if streamed doesn't work locally (as in on device). using j-player circle player custom xml playlist, anyway keep getting error ( attempt call getduration without valid mediaplayer ) research permission or file directories being wrong, can please me
this 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(){ // playlist 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 xml nodes json formatted strings playlistobject = $.parsejson(playlist); // convert json formatted strings json objects , add 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 created when page loads via ajax ], { playlistoptions: { autoplay: false, // self explanatory looponprevious: false, // if loop active, playlist loop end when executing previous() shuffleonloop: true, // if loop , shuffle active, playlist shuffle when executing next() on last item enableremovecontrols: false, // adds x allows user remove songs playlist displaytime: 0, // how fast playlist transitions on page load addtime: 'fast', // transition time when adding song removetime: 'fast', // transition time when removing song shuffletime: 'slow' // transition time when shuffling playlist }, swfpath: "../scripts", supplied: "mp3", // add file format extension streaming wmode: "window" }); }); </script> </body> </html> and xml playlist
<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> sorry it's long question i'd love move on project
cheers
you can first count data xml / json. use loop adding play list, this:
for (var < total; i++) myplaylist.add({"mp3":"path_your_music"})
Comments
Post a Comment