Sembiance's blog

Cross Browser Sound - Flash Only as a Last Resort

Tagged:  

After creating World of Solitaire and seeing how much of a success it was, I soon looked at what my next JavaScript game would be.

Although I hadn't made a decision yet, I knew that I wanted this game to have sound.
I also knew that I didn't want to use Flash.

So thus began that adventure of looking into how the different browsers played sound, without Flash or other plugins.

Turns out many browsers have support for sound built in.
Opera for example supports the WHATWG proposed Audio object, while IE has the proprietary bgsound attribute.

I decided that I would write up some JavaScript that would use the built in browser support for sound playing whenever possible, falling back to plugins and flash only as a last resort.

For a demo and the code check out: http://www.telparia.com/browsersoundtest/

Just use View->Source to see the code.
The guts of it are located here: http://www.telparia.com/browsersoundtest/js/Sound.js

You'll see some other JS files such as P.js
The sound engine itself only needs P.js as a way to detect browser platform.

The other files including the YahooUI are not needed for the Sound.js file to work.

I haven't actually used this code in a production environment yet, but I have tested it and it works in the following browsers:
* - Opera 9.23 on Windows XP [Audio object]
* - Opera 9.51 beta 3 on Linux (can't force stop) [Audio object]
* - IE 6 on Windows 2000 [bgsound]
* - IE 7 on Windows XP [bgsound]
* - Opera 8.53 on Windows XP [iframe embed]
* - Safari 3.0.2 on Windows XP [embed]
* - Firefox with plugin for audio/x-wav [embed]
* - Anything with a plugin for application/x-shockwave-flash [flash]

I don't have access to a Mac, so I'm not sure how it behaves on that platform.

Also, it's a little slow to start the sound as it is loaded into the browser. However after it is cached, it performs quite well indeed.

I welcome any bug reports or suggestions or changes. I some day intend to use this code in my next web game :)

Syndicate content