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 using the Media object of Phonegap in order to play it.

I cannot figure out the path to access this sound file within a javascript file that uses the Media object? I've tried paths like, file:///www/Sounds/sound.mp3, relative paths, etc and I cannot access it. I keep getting the following error in xcode 4

Will attempt to use file resource 'file:///www/Sounds/sound.mp3'
Unknown resource 'file:///www/Sounds/sound.mp3'

What path do I need to use to access the file? Or do I need to copy the sound file out of my www directory and into my Resources folder and access it there?

My WWW folder is referenced, not sure if that makes a difference.

try `Sounds/sound.mp3` it should work – dhaval Jun 24 '12 at 06:59 — dhaval, Jun 24 '12 at 06:59

Ben X Tan · Answer 1 · 2012-11-14T23:37:43.520

15

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/

edited Nov 14 '12 at 23:37

answered Nov 14 '12 at 23:04

Ben X Tan

287
3
10

It works on Android. Later I will test it on the iOS system. Btw:This page http://simonmacdonald.blogspot.tw/2012/01/on-eleventh-day-of-phonegapping.html also illustrates the almost the same thing as yours. But on the iOS system, he declares the path would be:"". Thanks for your answer, Ben. – Alston Jun 19 '13 at 08:16
2

This is the only solution that has worked for me on both Android and IOS. Thank you. – Kevin Choppin Jan 10 '14 at 10:53
This will not work if you are using the HTML5 History API in your program to add in history entries with directories (which use "/"). – Agamemnus Aug 08 '14 at 12:35
Best Solution... Thanks Ben – user2899728 May 08 '16 at 21:38

score 10 · Answer 2 · edited Aug 08 '17 at 13:59

10

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';

edited Aug 08 '17 at 13:59

AshHimself

4,024
1
21
26

answered Jun 24 '12 at 07:24

ThinkingStiff

64,767
30
146
239

Been looking for this answer for a few hours now. This seems to be the best way that I have seen. Thanks man! – Gowiem Nov 11 '12 at 17:53
On iOS, I get "Unknown resource 'file://var/mobile/Applications/{GUID}/{appname}/www/audio/bounce.mp3'"On android, it works, but it returns the path "file:///android_asset/www/ – Ben X Tan Nov 14 '12 at 23:01
@BenXTan Does it actually have `{GUID}/{appname}` in the path instead of an actual GUID and an actual app name? The android path is correct. – ThinkingStiff Nov 15 '12 at 06:02
window.location.pathname just gives "/index.html" for me, which does not help – Curtis Jun 24 '16 at 00:57
when I try this approach I get : ``` {message: "Cannot use audio file from resource 'file:///var/c…-4B61-91A4-93325E5E75AB/myApp.app/www/song.wav'", code: 1}Object ``` – daslicht May 29 '17 at 17:12

score 5 · Answer 3 · edited May 23 '17 at 12:33

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.

score 2 · Accepted Answer · answered Jul 15 '14 at 15:02

2

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', ...);

answered Jul 15 '14 at 15:02

Alon Gubkin

56,458
54
195
288

So what are the actual changes? we can not play .mp3's on iOS anymore? and where would it look for 'recording.wav' in your first example? at the www folder? so var media = new Media('sounds/recording.wav', ...); would also work if the wav is in a sounds folder? – epeleg Nov 25 '14 at 11:41
actually looking at the docs for 3.3 I can only find a note saying you can not record anything other then .wav on iOS and not that you can not Play such files. – epeleg Nov 25 '14 at 11:52
This answer is outdated, see [here](http://stackoverflow.com/questions/11175489/ios-phonegap-media-object-how-do-i-access-a-resource-in-the-www-folder/28401652#28401652). – slypete Feb 09 '15 at 01:49
What if wavs don't work for me either? "Cannot use audio file from resource" – Curtis Jun 24 '16 at 00:59
on iOS nothing is playing here, either mp3 or wav, if I run it in the browser it works – daslicht May 29 '17 at 17:13

score 1 · Answer 5 · edited Jun 20 '20 at 09:12

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

score 0 · Answer 6 · answered Aug 08 '14 at 12:37

0

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)
}

answered Aug 08 '14 at 12:37

Agamemnus

1,395
4
17
41

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

6 Answers6

Linked