Soundjs on safari and mobile browsers

Question

Currently my audio won't play on safari and on mobile devices. It works fine on a normal pc on FireFox, Chrome and IE

var manifest = [
    { id: "correct", src: 'assets/correct.mp3|assets/correct.ogg' },
    { id: "wrong", src: 'assets/wrong.mp3|assets/wrong.ogg' }
];

var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.loadManifest(manifest, true);

And I'm calling the play function like this;

createjs.Sound.play("correct");

This function is written inside a function that's called when a user presses a div.

Answer 1

That code looks like it should work. Web Audio is initially muted on iOS devices, but when play is called inside of a user event it unmutes.

There are a couple of possibilities (without seeing the rest of the code):

1. You are working on iPad 1, which does not support web audio and has html audio disabled by default due to severe limitations.

2. You are not waiting for the audio to finish loading before calling play:

   queue.addEventListener("complete", loadComplete);

3. The audio file path is incorrect and therefore the load is failing, which you can detect by listening for an error event.

4. You are using a non-default encoding for the mp3 files that is not supported by Safari. Generally that would break in other browsers as well though.

5. Safari requires quicktime for html audio to play, so that could be a problem.

6. Using createjs.Sound.registerPlugins, SoundJS is being set to use an unsupported on mobile plugin, such as FlashPlugin. You can check your current plugin with:

   createjs.Sound.activePlugin.toString();

You may find the Mobile Safe Tutorial useful. Hope that helps.

Answer 2

There is a way to hack it, play an empty mp3 then play the audio.

It must load the empty mp3 within mainfest array firstly:

var manifest = [
    ...
    { id: "empty", src: 'assets/empty.mp3|assets/empty.ogg' }
];

...

Before playing the sound, play the empty mp3:

createjs.Sound.play("empty");

createjs.Sound.play("correct");