sound in webbrowsers withOUT flash
rzwitserloot posted in programming on January 31st, 2007
A while ago I developed a canvas-based version of bomberman. It’s a fairly dynamic game, in a browser, no flash.
Unfortunately it uses canvas which doesn’t work on IE6 (or IE7) though it works on the other 3 target browsers (Opera, firefox, and safari). Fortunately, again, google created a toolkit that fakes canvas support using an IE only thing. I haven’t looked at it yet, but it should definitely work.
Aside from that little roadblock, the other big thing that flash can do and vanilla JS+HTML (or so people think) can’t, is sound. Specifically, both sound effects, and background music.
A toolkit called SoundManager 2 is doing the rounds on delicious and company; it allows you to run and control sounds from javascript, but it works by interfacing with flash, which plays the music.
Well, I checked, and you can run sound using just JS+HTML - dynamically!
I’d like your help though: Please check what happends on your own browser. The issues to look at is, obviously: does it work at all, but also: Does sound begin playing immediatly after hitting the button for it? Obviously, to serve as a sound effect in response to hitting a button or some game event, it needs to play immediately.
All the stuff in action (view source to see how to do it, there aren’t many tricks) right here!
January 31st, 2007 at 21:41
[...] 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. [...]
January 31st, 2007 at 22:02
Says it needs to install Quicktime plugin in FF2
January 31st, 2007 at 22:06
Well, unfortunately none of the tests are working with Linux and firefox 2.0
January 31st, 2007 at 22:31
In FF2/Win the mp3 does not play, instead it’s caught by the download manager (Star Downloader).
It would be great if someone could find a way to have a draggable seek bar while playing, just like a regular sound player.
January 31st, 2007 at 22:33
I think you’ll have tu use the object tag for it to work with Opera.
January 31st, 2007 at 23:19
In FF2 it seems to play things fine. MP3 takes a long time to load. I doubt mp3 is good format for this task. MIDI was nice and reasonably quick.
In the other hand IE just tries to activate ActiveX components and like Tim said also, wants to install the Quicktime plug-in.
Sound 1 and 2 stopped playing in IE. Couldn’t tell why though because sound 3 played fine.
This is nice work though. Thanks for doing it.
January 31st, 2007 at 23:21
just to help u out, results from my testing:
FF2.0.1/win xp - quicktime not installed
none of the three wav tests worked, it needs qt plugin. if i have to choose b/w qt and flash i’ll always take flash.
after each button press, there was a noticeable delay.
the mp3 test worked, after a delay. the midi test did not work (again, requires qt).
February 1st, 2007 at 5:39
In FF 1.59 / win — It says it needs Quicktime for Midi/MP3/Wav
February 1st, 2007 at 8:02
The problem with using MP3s is that not all browsers will handle the file the same way. Nice and interesting study. It probably has something to do with my configuration but I hear no sound for FF on Linux.
February 1st, 2007 at 9:09
FF 2.0 / Ubuntu Linux 6.10 - No sound.
February 1st, 2007 at 13:17
Progress report: The large number of ‘no quicktime’ problems lead me to believe that I’ll have to specify a mime type to make it work. Of course, so far, no one mime type makes it work.
I have coaxed full sound support out of Mac Opera using an object tag instead of an embed tag. No such luck on windows opera just yet. I’ll update this post when I make more progress.
February 1st, 2007 at 17:09
Firstly, much respect to fellow Javascript/DHTML developers, especially those who recreate games for fun!
I wrote SoundManager after much frustration from trying to embed and control sounds through Windows Media Player, QuickTime and other controls on old versions of my personal site back in 2000 or so. What I had worked then in IE, but seemed to break as newer versions of the WMP control (and tighter security/scripting restrictions) came into play.
By 2002 I had ditched the multi-plugin idea, and was aiming for something using Flash as it’s fairly well-distributed, etc. I found I could talk to Flash in some ways using JS, so by using a hidden Flash movie which was exported with linked sounds, I could “add” some sound control to JS.
Pardon the rant - anyway, much respect for what you’re experimenting with here. My findings are it’s a rather hostile environment as you never know what might be supported, what plugins are/aren’t available, etc., and you may be able to code for that - but I like your approach; to be able to do sound without having to rely on Flash would be quite nice.
[However, it's pretty much always going to be -some- plugin at this point, right?]
February 1st, 2007 at 18:02
Scott is correct. Having dealt with many editions of my book where the publishers really wanted info on sound in browsers it is frankly just all over the place. If you try to deal with native support, common sound/video plugins, etc. you will have a VERY hard time making things work over a very wide audience or time period given the extreme variability of the environments and the fact that APIs change like the wind. Flash really is the best way, but it is interesting to put out the kind of experience in a way that others might learn these hard lessons
February 1st, 2007 at 23:47
I’m starting to see the light. Thanks for the comments, Thom and Scott. Unfortunate, in a way, because one of the points of bomberman was to prove you don’t really need flash to make a webgame, just for kicks and giggles.
Some sort of sound API pioneerd by the WHAT-WG would be nice, I guess. IE won’t play ball but that would reduce the plugin hell to just making it work on Windows-based IE, + as alternative the sound API. That sounds a lot easier
February 2nd, 2007 at 1:55
[...] Reinier’s Blog [...]
February 3rd, 2007 at 21:52
Another quite portable way is
something.innerHTML = “”;
February 4th, 2007 at 11:57
It stripped html from my previous post. In plain words, assign a string with an embed tag to the innerHTML property of some DOM object.
February 5th, 2007 at 19:52
Rob:
It would be nice not to have to rely on Flash, but until browsers start implementing a common, standard interface for audio etc., we’re kind of on our own (and you have to find whatever works, I guess.)
For what it’s worth, I did a JS-driven game several years back (should work in everything but Safari) - it uses Flash for the sound, but the rest is JS:
http://www.schillmania.com/arkanoid/arkanoid.html
Also perhaps of note, the superbowl.com live streaming site yesterday used a Flash movie with “tgoto”-style JS calls to enable sound for events (ie. touchdown, fumble etc.)
February 7th, 2007 at 7:11
Wow, am I glad none of the methods worked on Opera! You can keep your noise-infested pages to yourselves.
February 17th, 2007 at 22:27
[...] 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. [...]
February 27th, 2007 at 4:12
thanxs 4 the research! please continue! in ff on linux no sound at all (any of the 3 examples).
March 24th, 2007 at 18:43
[...] Reinier Zwitserloot ได้คิดวิธีที่จะใส่เสียงเข้าไปในเว็บโดยที่ไม่ต้องใช้ Flash และตอนนี้ก็ได้แบ่งปันความรู้ที่เขาได้ค้นคว่ามาให้เราๆ ท่านๆ ได้อ่านกัน สามารถเข้าไปอ่านได้ที่ Sound in Web Browsers without Flash หรือจะเข้าไปดูตัวอย่างได้ที่ Sound Check โดยในขณะนี้รองรับเฉพราะเบราเซอร์ Opera, firefox และ safari (IE ไม่เกี่ยว o/) [...]
May 6th, 2007 at 18:17
Hey Reinier,
“load delays - the first time obviously causes a delay as the sound is loaded. Annoying for one-off sfx. Might need to find an excuse to run the sounds in the intro somehow.”
I think I’ve found a way to preload sounds. See it in http://cin.ufpe.br/~lbm4/tutz/
* In IE, it will append the BGSOUND tag with the minimum volume
* In other browsers, it will append the EMBED tag with false autostart
It needs to be tested, but I think it’s a start…
May 8th, 2007 at 21:06
Here is my solution:
http://www.webveteran.com/portfolio/demos/javascript-audio-engine/
May 8th, 2007 at 21:06
Forgot to mention, it’s multi-track capable.
May 9th, 2007 at 2:57
Cool - works splendidly in all browsers I can rustle up on this backup notebook I’m on for now.
Would you mind if I add this to the list of stuff to integrate into GWT (Google Widget Toolkit)?
June 7th, 2007 at 23:46
what about live streaming ? any application already running…
August 6th, 2007 at 21:50
I was hoping that it would work on safari on the iPhone but sorry to report that it did not.
August 10th, 2007 at 5:56
New audio object is now easiest dynamic audio in Opera, but that doesn’t work in Firefox or IE…
function test() {
a = new Audio ( ‘data:audio/wav;base64,UklGRiUHAABXQVZFZm10IBAAAAABAAEAESsAABErAAABAAgAZGF0YQEHAAB0XYxpdIBpgF2AgHSMaYB0gICAgJd0dIyMjJd0dICAgJeMjJeAdICAjIyAgIBpgJeMdGmAgIB0dIB0gIBpdGmAgHR0aXR0jGldaXRdaWldjHSAgHRpdHSAjIB0l4yAdIyMjICAgKOMjGldaWldl4B0aWl0aYB0gHSMgIB0jKOAdICMdICAdIyXaWlpjIBdXXRpjHSMl3R0gJdpaXSMdF1pgGmAjFF0jF1pdHSMXWl0dICMaXSMl4Bpl6OAjHSAl1GMdIxpgIB0dJeAdJeAXWmMRl2MXV1po2ldrzp0jEaMdJdpjIxpjKNpl4BdgIBpgHRpuoB0jLp0gIxpjF2jUYyjOqNGgHRRo2mMaXSjRq9RrzqXUYxpjHRpo0a6UaN0r2mAo3SXUbo6oy%2BvL5ddaYBRaVGXRpdGjFGXaZdRr1GvXaNdl13GRrqMdICXaa9Rxl2MdHSXRoyMabpGul1plzrGOro6aaNGryOvXXSXaYxGgEavUVGvI8ZRaYxdul1dry%2BjdHSvF6%2BjI6OMRsZdaYxGjK9daaMvr4wvxrovr5dGxlF03UZ00TpRxjpd0V10xlF0o1GAly%2BM0TqAujqAr11pr110xl1dxmk6uoxRjKNpjLpdXa9dRqNpRqOMUYyMjLpdL6O6OjqvoyNGuoA6l68vOq%2BjOjqvr0Y6o6MjRsaXOnS6lyM6r5cjRq%2BjRkbGui8jurovI6PdXReA0YAjad26UUavxlEjo%2FSMF1HG0VEvgLqARoDRr0ZGr8ZpOozpoyMvl%2BmvUTp0o4BGRoyjaTp00ZcvL6Pply8jjNGXIyOAuoAjI4zdrzojadHGaS9Rr%2BmvRiOA6dFpFzqj0aNRL12Xl2kvOoy6gCMMUbrpr1EMOqPRo0YXRqPdr1EjXbrpxl0jOozd3ZdGL2nG6bpdFy%2BA3d2XLww6l93GdC86dK%2B6gC8XUaPGr10XL4DR3a90RkZ0l6OAXUZGaZejgF1GXWmMl4xpXXSMo5eMdFFRdKO6o2kvI1Gj0dGXUS86dLrRuoxdUXSvxqN0Ri9GgLrGo2k6I0aMxsaMRhcjXaPd3bp0OiMvaa%2FRxpddLy9Rl8bRr2kvIzppl7qvjF1GOlFpjK%2BjjGlRUWmMr6%2BjdFE6RnSv0dGjaTojL2mjxtGvgFEvOl2XxtGvjFEvL12Xxt26gEYXFzp0r8a6l2k6Iy9RjLrGr4xRIyM6aaPG0bqMUS8jRoCv3d26gFEvLzppjK%2B6o4BpUVFpjK%2Bvo4xpUVFpjKO6uq%2BAXTo6UXSjxtGvgEYXDCNRgLrd3caXaTojL1F0o7q6r4xpOiMjOmmXusa6o3RRLy9GaZfG0dGvgFEvIy9GdKPG0dG6l2k6IyNGaZe60dGvjFEvIyM6aZe60dG6l2k6IyMvUYCv0dHGo3RGIxcjRnSjxt3RxqN0Ri8vOl2Ar8bRxqOAUSMXIzppjLrR0bqjgFEvIyM6UYCjxtHGr4xpRjo6Rl10o7rGxrqXdFE6OkZdgKO6xrqvl4BpUUZGUWmAo6%2B6r5eAXTovLzpRaYCXr7q6r5eAXVFGOkZRaYCXo6Ojl4B0UUY6LzpRaYyjusbGuqOMaVFGOjpRXYCXusbGuq%2BXdF1RRjpGUWmAl6Ojo5eMgHRdUVFRXWl0jJejr6%2BjjHRpUUZGRlFdgJevusa6uqOAaUY6Ly86UWmAo7rGxrqvl4BpUTovIy9GXXSMr7rRxrqvl4xpUS8jFyM6UWmMo7rGxsavo4×0XUY6OjpRXXSMo7rGxsa6r4×0UTovIyM6Rl1pjKOvusbGuqOMdFE6IyMjL0ZddIyjusbR0cavo4BpUTovLy9GXWmAl6%2B6xsbGuqOMdGlRRjo6OlFddIyjr8bRxrqjjHRdRi8jIyMvOlFpgJejusbGxrqjl4BpUUY6Ly8vOlFpgJejusbRxsa6o4yAaVE6Ly8vL0ZRaYCXr7rGxrq6r6OMgGldRjo6Ly86UV10jKOvusbGxrqjl4B0XVE6Ly8vOlFdaYCXo7q6xsbGuq%2BXjHRdUTovLy8vOkZdaYCXr7q6xsa6r6OXjHRpUUY6Ly8vOjpGXWmAl6Ovurq6r6%2Bjl4B0XVFGOjo6RkZRXWl0jJejurq6urqvr6OXgHRdUUZGOkZGUV1pdICXo6%2B6urqvr6OXjIBpXVFGRjo6RkZRXWl0gIyjr7q6urqvr6OXjIBpXVE6OjovLzpGUVFddICMl6Ovurq6uq%2Bvo5eAdGldRkY6Ly86OkZRXXSAjJejr7q6usa6r6OXl4B0aV1RRkY6Ojo6RlFdaXSAl6Ojr7rGurq6r6OXjIB0aV1RRjo6OkZGUVFdaYCMjJejr6%2Bvr6%2Bvo5eMgHRpXVFGRjo6OkZGUVFdaXSAjJejr6%2B6urq6uq%2Bvo5eMgHRpXVFGRjo6Og%3D%3D’ );
a.onload = function () {
a.play();
}
}
August 10th, 2007 at 15:34
That’s cool. This is one of those WHATWG thingies so in theory it should show up in Safari/WebKit and Firefox at some point, no?
That would make life a lot easier.
October 27th, 2008 at 14:20
All sounds with all methods (including stop) working with Mozilla Firefox 3.0.3 on Ubuntu here.
This is a VERY nice project. Requiring a flash plug in to run your JavaScript app kinda defeats the main point of having a JavaScript app in the first place (working in all browsers without any plugins).
I’m definitely going to allow my users to choose between flash sound (which I’m guessing is more stable and supported) and JavaScript sound (which doesn’t require flash).