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 :)

[...] browsers issue a single beep like a good 1970s PC, without requiring flash or unreliable hacks!!! Speaking of sound [...]

[...] years, I'll update it again. The main enhancement would be to combine it with audio notifications (with or without Flash, depending on the browser). So you could make a single call that (a) changes favicon; (b) scrolls [...]

This works fantastic! You are a genius. I just can't believe you posted this only 3 days ago, and I went looking for this type of thing today.

Again thank you for this. Do you have a donation bucket?

-Dan

Very interesting. Two things come to mind here. First is the noticeable delay when starting large files for sound. I know that's because the browser has to retrieve the file, so what about using an XHR call for the site for each file so it retrieves and caches it.

Second, this was done using wav files, which are rather large in size. Did you have any luck with mp3s?

That is to say, it does play the sound. But it also changes to a new "mediaplayer" page. Something about the embed is not working as it should. Like you, I'd like to avoid flash based solutions except as a very last resort. I wish the browsers would hurry up with the Audio tag.

FF 3.06, Ubuntu 8.04. Easy to test yourself with a live image. :) It's free, after all...

Ok scratch that - user error (PEBKAC). Had an extension in Firefox active (Media Connectivity) that interfered. Sorry about the noise.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.