1
Хорошо, поэтому я работал над мобильным музыкальным проигрывателем jquery, который с помощью телефонного разговора я хотел бы превратить в приложение. Проблема заключается в том, что звук не работает локально, он работает, если он потоковом, но он не работает локально (как на устройстве). Я использую J-Player Circle Player с пользовательским списком воспроизведения в формате XML, так или иначе, я все время получаю эту ошибку (попытка вызвать getDuration без действительного медиаплеера), что при исследовании связано с неправильным разрешением или файловыми каталогами, так что кто-то может помочь мнеPhonegap - HTML5 - Музыкальный проигрыватель с плейлистом XML
это мой 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>
к сожалению это длинный вопрос, но я хотел бы перейти с моим проектом
Cheers