iOS Phonegap Media Object - How do I access a resource in the WWW folder?

Question

I\'m developing an application with phonegap, and I have a sound file I want to play that\'s in a path like so www/Sounds/sound.mp3, and I\'m trying to access this file usin

Answer 1

Use window.location.pathname to get the path of your application. 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 relative path Sounds/sound.mp3.

Here's something to get you started:

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

Code:

function getPhoneGapPath() {

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

};

var resource = getPhoneGapPath() + 'Sounds/sound.mps';

Answer 2

I had the same problem and all the answers about file paths alone didn't work for me using the Phone Gap Developer app. The problem was with the Developer app not pushing the files physically onto the device, preventing me from accessing them in any way.

The Media plugin worked as intended using

$ phonegap run android

$ phonegap run ios

with this js code:

function getPhoneGapPath() {
  var path = window.location.pathname;
  var phoneGapPath = path.substring(0, path.lastIndexOf('/') + 1);
   return phoneGapPath;
}
var sound = new Media(getPhoneGapPath()+"assets/sounds/sound.mp3"
//...
sound.play();

This returns an error on Developer app:

'Cannot use audio file from source var/mobile/Containers/data/Application/{GUID}/Library/NoCloud/phonegapdevapp/www/assets/sounds/sound.mp3'

but works if built from the console.

Details can be found here: https://forums.adobe.com/thread/2135718

Answer 3

Better try this to take into account any HTML5 History API code that might add in history entries with directories ("/"):

function get_phonegap_path () {
 var path = window.location.pathname
 return path.slice(0, path.indexOf("/www/") + 5)
}

Answer 4

As of Cordova 3.3+, the 2 other answers aren't correct. It should work even if you just pass it a file name.

But, it will only work in iOS if the file extension is .wav.

This will work:

var media = new Media('recording.wav', ...);

This won't:

var media = new Media('recording.mp3', ...);

Answer 5

The best answer is outdated. You are now able to play wav, mp3, and caf formats on iOS using this "relative path" method:

var media = new Media('beep.wav', ...);

Note that the above code requires the sound file to be in the root of your www/ directory -- in this example at www/beep.wav. If you want to put them in a subdiretory like www/sounds/, you'll need to specify it using a path relative to your www/ directory. For example, this also works now:

var media = new Media('sounds/beep.wav', ...);

for the sound file at www/sounds/beep.wav.

Answer 6

Heres a modified version of getPhoneGapPath that works for me on both iOS and Android. It is also not restricted to only working on files that have a filename that is 10 characters long :)

getPhoneGapPath: function () {
    'use strict';
    var path = window.location.pathname;
    var phoneGapPath = path.substring(0, path.lastIndexOf('/') + 1);
    return phoneGapPath;
}

var resource = getPhoneGapPath() + 'audio/audio.mp3';

getPhoneGapPath() will return:

iOS: /var/mobile/Applications/{GUID}/{appName}/www/

Android: /android_asset/www/