Wednesday, January 31st, 2007

Sound with JavaScript but not Flash

Category: Articles, Examples, Sound

<p>Reinier Zwitserloot wanted to see if he could add sound support without embedding a Flash bridge, and shared his research in his article on Sound in Web Browsers without Flash.

Check out his test page for a Sound Check

An example API

javascript
< view plain text >
  1. function sound2Play() {
  2.                 if ( !sound2Embed ) {
  3.                     sound2Embed = document.createElement("embed");
  4.                     sound2Embed.setAttribute("src", "machinegun.wav");
  5.                     sound2Embed.setAttribute("hidden", true);
  6.                     sound2Embed.setAttribute("autostart", true);
  7.                 } else sound2Stop();
  8.                 sound2Embed.removed = false;
  9.                 document.body.appendChild(sound2Embed);
  10.             }
  11.            
  12.             function sound2Stop() {
  13.                 if ( sound2Embed && !sound2Embed.removed ) {
  14.                     document.body.removeChild(sound2Embed);
  15.                     sound2Embed.removed = true;
  16.                 }
  17.             }

Posted by Dion Almaer at 2:55 pm
17 Comments

+++--
3.9 rating from 59 votes

17 Comments »

Comments feed TrackBack URI

Very interesting, thanks!

Comment by Camiel — January 31, 2007

Well sure, have fun loading huge .wav files!

Comment by Geoff — January 31, 2007

Nice idea, but unfortunately it doesn’t work without QuickTime plugin – tested with Firefox 2.0 Win.

Comment by Boris Kuzmic — January 31, 2007

Good work! How relevant is the QT plugin, shame if that’s a requirement, but then a pretty decent chunk of users have it.

Comment by Michael Mahemoff — January 31, 2007

As well, using an embed tag in IE7 can cause a security dialog to popup. The bgsound element, as old and junky as it is, circumvents this problem (only works in IE though).

Comment by Michael Mantel — January 31, 2007

Sweet, web2.0 meets geocities!

Comment by Thomas Aylott — January 31, 2007

firefox 1.0.6 (earlier firefox versions were not working well, hanging sometimes, so I’ve downgraded mine) tells me that I need a missing plugin but it can’t find any to install. running on suse 9

should newer browsers come with some basic multimedia support?

Comment by kenji — February 1, 2007

Websites with sound are so annoying. I hate it.

I’m always trying to listen to music but end up with there rubbish on.

Comment by Dougal Matthews — February 1, 2007

This is good stuff and useful for when people just simply want a soundtrack – “I just want sound, man! :)” (I wrote SoundManager V1/V2, but can appreciate simplicity as well as non-reliance on Flash.) It can be kind of tricky trying to detect support for installed plugins, getting a particular player to handle mp3/wav etc. and so on, but this looks like a good approach. I think IE makes it really simple with the “bgsound” attribute, others need some more wrangling. The first three buttons prompted me to install a plugin in Firefox 2.0.0.1, as did the “mp3″ one. The Midi worked, however! You can script Windows Media Player and QuickTime to some degree via Javascript, but support across browsers can be a bit sketchy.

I’m interested in the Web App interface as supported by Opera, this sounds potentially awesome. Now if could just be adopted elsewhere.. :)

Comment by Scott Schiller — February 1, 2007

Anybody else wishing for a seek(index) method on the Audio interface?

This could be pretty useful for multimedia applications in the browser making programmatic mixing and editing of sound accesible to a wide audience.

Comment by Alper — February 5, 2007

Wow, am I glad none of the methods worked on Opera! You can keep your noise-infested pages to yourselves.

Comment by Grnch — February 7, 2007

How do I add a sound on the index page of my website using body onload? I’ve tried a few times but I keep on getting the wav sound to play showing the Quicktime program instead of my front page!

Comment by Alex — April 17, 2007

Very interesting proof of concepts.

Comment by Justin — May 8, 2007

I did some testing and it dose not work on firefox 2 and opera mobile 8.65. May be some other people got the same results as mine.

Comment by bashar — June 27, 2007

very interresting

Comment by music — September 10, 2007

i was wondering does this work on all platforms? i really like the concept

Comment by johnny — October 29, 2007

@Darek: Opera supports the Audio interface, but unfortunately, the Wii version of Opera does not. Anybody who tells me how to invoke sound from JavaScript on the Wii is my hero!

Comment by Joo — June 8, 2008

Leave a comment

You must be logged in to post a comment.