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 m

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.

Answer 2

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.