javascript - Cross-browser and cross-device audio

Question

Question

Is there any way to use audio in a web app so that it will work on most browsers (Chrome,FF,Safari and IE9+) and devices (Android/IOS for mobile would do) ?

My requirements

I would need basic preloading, playing multiple sounds at once, muting them on click and perhaps looping (probably not seamlessly right? ;) ).

What I learned so far:

• Web Audio API wont work on IE and any Android. (link)
• with audio tag I get different durations for the same audio on Safari and Chrome ...
• I checked SoundManager2 but it won't work somewhere (throws HTML5 error code 4 for me)
• SoundJS seems to work cross-browser and device so far as I checked but there are limits ofcourse:
  • cannot loop or use delay on Android
  • Safari requires Quicktime to be installed for audio playback
  • IE9 has limits with playing multiple sounds at once
  • tried this and it wont play on my Android (v4.1.2 Samsung 3 mini)
• Howler.js seems to work on Android for instance as well, didn't make extensive testing yet
  • when playing multiple sounds at once and turning volume for one of them up/down or muting it wont respond until you stop() and start playing all of them again
• Most tools use Flash as a fallback which might be useful in some cases
• It seems like it's not possible to seamlessly loop sounds with any of these approaches
• You have to provide different formats/codecs to be able to play sound in various browsers (mp3 and ogg would be sufficient I reckon?)
  • Chrome (ogg,mp3,wav)
  • FF (ogg, wav)
  • IE9+ (mp3,aac)
  • Safari (mp3,aac,wav)

A follow up question

What are your experiences with these and perhaps any other tools and do any of these provide what I need (cross-browser,cross-device)?

For each tool I mentioned there are comments or site-notes that say something didn't work in this case or that … Are we still 'not there yet' with audio in web browsers?

Any help appreciated, thank you!

Answer 1

I'm impressed with your thorough research. I work on SoundJS and build solutions with it that work everywhere using the mobile safe approach you mention. It has been successfully tested on Android Native and Chrome Browsers, maybe check out this example on github and see if it works for you. This approach should also let you loop and use delay on Android.

Unfortunately as you are learning there are various device and browser issues to work around. We've documented everything we've found in the known issues you likely have seen in the documentation.

One small correction, IE9 has a limit on how many audio tags can exist on a page, which was always higher than 30 for us. If you need more than 30 sounds and want to be sure it will work, you can always use the newly implemented audio sprites. You could also browser sniff and force flash fallback.

We've done a lot of work to ensure the smoothest possible looping of sound. Web Audio should loop perfectly, as we use a look ahead approach (discussed here) that inserts the next play ahead of time. One challenge that people have run into is that mp3 inserts silence into clips (discussed here). Html audio loops as smoothly as the browser will allow using the tag loop property.

Hope that helps, and feel welcome to reach out with any questions or issues on the soundjs forums.