Play mp3 files via HTML5 on Firefox Mac, alternatives

Question

I need to play an mp3 file; something like

var sound = new Audio('http://.......'); snd.play();

does work in Chrome and Firefox on Windows but not in Firefox on Mac, can you confirm it is the normal behaviour?

From here: https://bugzilla.mozilla.org/show_bug.cgi?id=799318 it seems that on Mac the feature has been just added (so probably the current release of Firefox doesn't provide it) but there are a lot of messages about and I'm a bit confused...

Is it normal that if I just put the mp3 URL in the URL bar it works?

So if you confirm that it is the normal behaviour can you tell me which are the alternatives? 1) flash fallback ? 2) convert mp3 to oog (supported by firefox) on the fly?

Can you explain how to implement both?

Thanks.

Answer 1

Yes that is the normal behavior. See here: https://bugzilla.mozilla.org/show_bug.cgi?id=851290

A Flash fallback would probably be easier. I'd recommend using SoundManager2 as it will provide you with a uniform API without having to worry about which codecs the browser supports.

Answer 2

Look into this. https://github.com/nddrylliog/jsmad#readme

It coverts it on the fly.

Answer 3

You can use a wrapper around the URLs you use to play audio, since different browsers support different codecs. The audio object has a canPlayType method which you can use (with understandably more verbose codec names unfortunately) to determine what type is supported by a browser. With this, you can make a function that takes a URL path and modifies the extension.

// If you wanted to provide only ogg and mp3:
function getSoundURL (url) {
  var audio = document.createElement('audio');
  if (!audio.canPlayType) return null;
  if (audio.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''))
    return url + '.ogg';
  if (audio.canPlayType('audio/mpeg;').replace(/no/, ''))
    return url + '.ogg';
  return null;
}

More info on canPlayType and codecs.

There are also some tools to easily detect what types are supported, one being allen which I use frequently for audio projects. disclaimer: I made it :p

Flash alternatives would work (SoundManager2 mentioned above is good), and transcoding on the server is possible, with something like FFMPEG, depending on your server.