Playing a sound does not work in Meteor-Cordova app

I am building an app for IOS and Android using Meteor. It is designed for children so sound effects are a necessity.

So far I have tried the following, none of which have resulted in a simple .wav file playing while running the app on an actual iPhone:

  1. adej:Meteor-Sound atmosphere package - Did not work, „MeteorSound not defined" error. The trusted source for JavaScript packages, Meteor.js resources and tools | Atmosphere

  2. Buzz.js - Worked perfectly in browser, did not work on the iPhone. (No error in xCode console)

  3. cordova-plugin-media - Take a look at the following code, and the error that follows:

2.1. On a click event, the following is fired in a Template.home.events js file:

if (Meteor.isCordova) {
 var test = playSound('/assets/audio/blop2.wav');
 test.play();
}

2.2. The playSound() function is the following, defined in a globalFunctions.js doc client side:

playSound = function(sound) {

 if (Meteor.isCordova) {
    return new Media(
       getMediaUrl(sound),
       function (success) {
         // success
       },
       function (err) {
         // error
       }
   );
 }

}

2.3. This calls the following getMediaUrl() function which takes the sound file and modifies it for a Cordova file structure:

getMediaUrl = function(sound) {
  if (Meteor.isCordova) {
      return cordova.file.applicationDirectory.replace('file://', '') + 'www/application/' + sound.substr(1);
    }
  } else {
    return sound;
  }
}

Okay, so far so good. But when launch this on my iPhone with the Meteor run ios-device, and click the button which should play the sound stored in my Public folder, I get the following error:

Unkown f*in Resource

For reference, this Stack Overflow question was my guiding light:

Has anyone managed to get a sound to play in a Meteor-Cordova app? And if so, how did you do it? Am I doing something fundamentally stupid?

2 Likes

I have been dealing with the same issue for quite some time now! I am starting to doubt if Meteor can even play sounds in a mobile env.

Has anyone figured out how to make this work?

2 Likes
  • Did you correctly put your /assets folder in the /public folder?
  • Try renaming your file so that there is no uri encoding.

As far as I can see, you’re trying to load a resource with a file:// URL. AFAIK, this is not supported by Meteor. Meteor uses its own protocol to load files on the local device, using a meteor:local scheme. I think this has something to do with their hot code reload process.

Thank you for this reply.

  1. The /assets folder is located inside the /public folder.
  2. Are you talking about the %20 in "Study%20Cake"?.
    There must be many projects that has space in there name?

I am calling replace('file://', '') to replace file:// to ’ ’

You can see how the url is after this method call:
https://forums.meteor.com/uploads/short-url/iWUDdAuow0cye5qja2OsqlLAm7Q.png

Is there anyone who works at Meteor who knows an answer to this question?

This is the last piece to my puzzle.

I haven’t used the cordova-plugin-media, but looking at the file path in the error message it seems ...Study%20Cake.app/www/application/assets/audio/blop2.wav should be ...Study%20Cake.app/www/application/app/assets/audio/blop2.wav (note the extra app directory). So I’m assuming changing your code to playSound('/app/assets/audio/blop2.wav') might work.

We found a solution to this by using howler.js

Thanks for all the help

2 Likes

For anyone that runs into the same issue. See my answer in this thread.

Low latency plugin working on Meteor 1.2?.

Its very easy to play audio on mobile devices once you know where and how to look for the files. Unfortunately Cordova doesn’t give you a very good answer on how to do this. This keeps coming up on the forums. I feel like there needs to a be a blurb in the cordova - meteor integration wiki.

1 Like

We’ve recently started a project to work on better documentation in the form of Meteor guides. Accessing files in Cordova seems like a great topic to add. Could you contribute your findings to https://github.com/meteor/guide/issues/40?

Sure, I’d be more than happy to do that.

Thank you krizzii for sharing this. I was going mad trying to find solution and this worked like a dream!