Playing local sound in phonegap

Question

I have a .wav file in my www folder. I am using jQuery with the following code. The alerts go off but the sound does not play. Am I doing something wrong?

<script type="text/javascript" charset="utf-8" src="phonegap-0.9.2.js"></script> 
<script type="text/javascript" charset="utf-8" src="jquery.js"></script> 


<script type="text/javascript" charset="utf-8">

$(document).ready(function () {
    window.alert("READY!");
    document.addEventListener("deviceready", onDeviceReady, true);

    function onDeviceReady(){
        window.alert("OK@!");
        var snd = new Media("test.wav");
        snd.play();
    }
});

</script> 

The sound just does not play.

Solution 1

Try giving an absolute local path. E.g.

new Media("/android_asset/www/test.wav");

That should work on Android. Hopefully they'll fix this in PhoneGap, as it's something of a bug in the cross-device support.

Solution 2

You can use window.location.pathname to get the path of your application in any PhoneGap app. That way you don't have to hardcode it for Android. It will look something like this on iPhone:

/var/mobile/Applications/{GUID}/{appname}.app/www/index.html

And this on Android:

/android_asset/www/index.html

Strip off the /index.html, prepend file://, and append your file test.wav.

Demo: http://jsfiddle.net/ThinkingStiff/r7eay/

Code:

function getPhoneGapPath() {

    var path = window.location.pathname;
    path = path.substr( path, path.length - 10 );
    return 'file://' + path;

};

var snd = new Media( getPhoneGapPath() + 'test.wav' );

Solution 3

I have another version of getPhonegapPath, it detect's when you'r using Android:

function getPhoneGapPath() {
   var path = window.location.pathname;
   path = path.substr( path, path.length - 10 );
   var devicePlatform = device.platform;
   if(devicePlatform=="Android"){
    path = 'file://'+path;
   }
   return path;
};