Universal User-Initiated Audio Implementation

The Big Burrito's Avatar

The Big Burrito

18 Jan, 2013 12:13 AM

Hey guys,

Can you give me a suggestion for universal audio implementation? In other words, what technique should I use to ensure that user initiated audio is heard across all platforms- desktop and mobile (iOS, android, Windows)?

I'm running into compatibility issues with audio on a Samsung tablet. The JustPlay.html example never loads on this tablet (neither does the Game.html example). The Game.html example never loads on iOS6, but the JustPlay.html runs fine on iOS6 (though not sure how it runs on iOS5).

Is SoundJS capable of playing user-initiated audio on all mobile devices, or is it limited to WebAudio-enabled iOS6 devices?

  1. Support Staff 2 Posted by OJay on 18 Jan, 2013 09:32 PM

    OJay's Avatar

    Hi, first off there are known browsers and OS limitations in the documentation of Sound and in each specific plugin they apply to. I highly recommend starting there if you run into support issues.
    I've found the most widely supported approach does the following:

    1. Set up flash fallback, for those cases where the browser doesn't support any other type of audio. Failing that, initialize the default plugins using createjs.Sound.initializeDefaultPlugins().

    2. Preload sounds internally or using PreloadJS.

    3. Make sure you have multiple formats for a sound, as no one format is supported everywhere. MP3 and ogg cover most of your bases, but I would also suggest m4a. So that would look something like:
      "assetsPath/sound.mp3|assets/sound.ogg|assets/sound.m4a"

    4. Launch all of your sounds inside of user events (touch/click). Mobile devices tend to require this in varying degrees.

    With all that, you may still run into trouble. A couple of tips:

    1. Make sure your audio is published with default encoding. Some browsers will support a format like mp3 but only default encoding. So the browser will say it supports your sound, it will load your sound, and then it will try to play and fail.

    2. Watch out for CORS issues. Server setup has been responsible for a lot of issues we've seen.

    3. Debug. Check what plugin is running using createjs.Sound.activePlugin.toString(). Check if the browser you are using supports audio. See Web Audio support and HTML Audio support. Check what formats it says it supports through createjs.Sound.getCapabilities().

    If all else fails, post something here with the problem your having, OS and browser, and if possible the code and sound assets. We have a smart and helpful community, after all. =)

    Support has been confirmed in iOS 6, Android through the chrome browser, and Windows 8 tablets. Note iOS 5 and ealier is not supported by default as it only allows you to have a single audio tag. In general, if a browser says that it supports HTML Audio or Web Audio then it should work in theory. In practice, it tends to take some fine tuning to figure out the exact limitations and needs of any given device, especially for mobile devices. The TestSuite.html example has proven to be an excellent testing tool for us as it can let you test all the plugins and most of the functionality. As always, if you find something that isn't working, please let us know about it.

    On our Samsung windows 8 tablet, sound is working in the TestSuite example.
    Hope that helps.

  2. 3 Posted by The Big Burrito on 18 Jan, 2013 10:57 PM

    The Big Burrito's Avatar

    Thanks for the very thorough response, OJay! Us developers who use these libraries really appreciate you giving us the tools to build cool projects.

    At my agency, we build immersive (Flash-like) experiences, and our clients want these experiences to run on all devices. Audio seems to be the one sticking point for us, as EaselJS takes care of the canvas interface quite nicely for us.

  3. Lanny McNie closed this discussion on 24 Jan, 2013 04:51 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac