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!
{ 27 } Comments
Says it needs to install Quicktime plugin in FF2
Well, unfortunately none of the tests are working with Linux and firefox 2.0
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.
I think you’ll have tu use the object tag for it to work with Opera.
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.
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).
In FF 1.59 / win — It says it needs Quicktime for Midi/MP3/Wav
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.
FF 2.0 / Ubuntu Linux 6.10 – No sound.
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.
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?]
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
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
Another quite portable way is
something.innerHTML = “”;
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.
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.)
Wow, am I glad none of the methods worked on Opera! You can keep your noise-infested pages to yourselves.
thanxs 4 the research! please continue! in ff on linux no sound at all (any of the 3 examples).
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…
Here is my solution:
http://www.webveteran.com/portfolio/demos/javascript-audio-engine/
Forgot to mention, it’s multi-track capable.
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)?
what about live streaming ? any application already running…
I was hoping that it would work on safari on the iPhone but sorry to report that it did not.
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();
}
}
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.
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).
{ 4 } Trackbacks
[...] 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. [...]
[...] Reinier’s Blog [...]
[...] 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. [...]
[...] Reinier Zwitserloot ได้คิดวิธีที่จะใส่เสียงเข้าไปในเว็บโดยที่ไม่ต้องใช้ Flash และตอนนี้ก็ได้แบ่งปันความรู้ที่เขาได้ค้นคว่ามาให้เราๆ ท่านๆ ได้อ่านกัน สามารถเข้าไปอ่านได้ที่ Sound in Web Browsers without Flash หรือจะเข้าไปดูตัวอย่างได้ที่ Sound Check โดยในขณะนี้รองรับเฉพราะเบราเซอร์ Opera, firefox และ safari (IE ไม่เกี่ยว o/) [...]