javascript - phonegap - Playing html5 audio from local ressource -
i have build simple demo app should play locally stored mp3-file (delivered part of app). want use html5-audio instead of phonegap's media-object. using howler.js framework better performance.
the local file stored under www/res/audio/2.mp3.
everything works fine when running on desktop browser. however, cannot work when deployed android device. weired thing is: playback of remotely hosted mp3-file works peachy, assume wrong url(s) use local file. have tried different url-"versions", none of below works:
www/res/audio/2.mp3 /android_asset/www/res/audio/2.mp3 file:///android_asset/www/res/audio/2.mp3 file://android_asset/www/res/audio/2.mp3 http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockguitar.mp3 //works great it drives me crazy. ideas how work , mistake is? please see code below or download entire code here.
index.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" /> <title>audio-test</title> </head> <body> <!-- ------------- --> <!-- script import --> <script src="js/libs/jquery-2.1.1.min.js"></script> <script src="js/libs/jquery.mobile-1.4.3.min.js"></script> <script src="js/libs/howler/howler.min.js"></script> <script src="js/index.js"></script> <!-- ---------- --> <!-- start page --> <div id="index" data-role="page" data-theme="a"> <!-- header, footer --> <div data-role="header" data-position="fixed"> <h1>audio-tester</h1> </div> <!-- content --> <div class="ui-content"> <h1 id='ready' style='text-align: center;'></h1> <select id='urls'></select> <button id='playselected'>play audio selected source!</button> <div id='log'></div> </div> </div> <!-- ------------- --> <!-- init phonegap --> <script> $(document).ready(function() { if (navigator.useragent.match(/(iphone|ipod|ipad|android|blackberry|iemobile)/)) { isphonegap = true; $.getscript( 'cordova.js', function() { document.addeventlistener("deviceready", ondeviceready, false); app.initialize(); }); } else { //fallback desktop browsers! isphonegap = false; ondeviceready(); } }); </script> </body> </html> index.js
function ondeviceready() { $('#ready').html("i'm ready!"); //populate selection var basepath = getbasepath(); var audiourl = 'res/audio/2.mp3'; var myoptions = { val1 : 'http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockguitar.mp3', val2 : audiourl, val3 : basepath + audiourl, val4 : 'file://' + basepath + audiourl, val5 : 'file:/' + basepath + audiourl }; var urls = $('#urls'); $.each(myoptions, function(val, text) { urls.append( $('<option></option>').val(val).html(text) ); }); //append listener button $('#playselected').click(function() { var myhowl = new howl({ urls: [$('#urls option:selected').text()] }); myhowl.play(); $('#log').html($('#log').html() + '<br /> playing ' + myhowl.urls()); }); } function getbasepath() { var htmlfilename = 'index.html'; var path = window.location.pathname; path = path.substr(0, path.length - htmlfilename.length); return path; }
this code working in phonegap.
<body> <audio controls> <source src="horse.mp3" type="audio/mpeg"> browser not support audio element. </audio> </body>
Comments
Post a Comment