4

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!

trainoasis
  • 6,419
  • 12
  • 51
  • 82

2 Answers2

2

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.

OJay
  • 1,249
  • 7
  • 14
  • Thank you for your answer; I ll look into what you said and will get back at you when I do some more research. – trainoasis Apr 12 '14 at 17:06
  • I checked the github example once again: it does work on mobile: my problem is packing my custom code chunk into this so it will work - unfortunately I am not used to this type of coding (function closure and self-creation of scopes). Any tips? :) Probably I will have to restructure or rewrite most of it? – trainoasis Apr 14 '14 at 07:55
  • If closure and scopes are new for you, get ready for a coding adventure. :) The best tip I can give you is to read up on both a bit, especially javascript scope as that tends to cause the most issues for people. CreateJS has a handy [createjs.proxy](http://www.createjs.com/Docs/SoundJS/classes/Utility%20Methods.html#method_proxy) method that we use to scope all of our event callbacks, so that might be useful. – OJay Apr 14 '14 at 15:33
  • Actually I know a little bit about scopes; mostly from angularJS though. Closures on the other hand are something I never played with. Will read on both and check how createjs.proxy works (this is something I didn't understand when checking your mobile-safe example). thank you for your time – trainoasis Apr 14 '14 at 18:24
1

Firefox supports MP3 now.

<audio src="sound.mp3" type="audio/mpeg" controls></audio>

I'm not sure about mobile device compatibility, but generally speaking if you're using sounds then you should have an app rather than a site.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Thank you for your answer, good to know FF supports mp3! will correct my question. I am intending to use web app. How do you suggest I go with an app that would work cross-browser/device? – trainoasis Apr 11 '14 at 11:06