Tuesday, November 25th, 2008
Generating and Playing Sound in Javascript
Category: Sound
Another experiment with sound, data: URIs, and the embed tag.
SK has shown that it’s possible to generate wave file in Javascript and play it. All this happens in the browser and without requiring Flash. He’s built a sine wave generator and a song player.
I came across a post about putting .wav files in data: URIs (via an Ajaxian post) so my immediate question was whether I could generate .wav files on the fly. There’s nothing particularly complicated about the .wav format, and I had done it before in PHP, so I applied the idea to JavaScript.
There’s a limit to data URIs, so you’re not able to do too much with it, but at least I was successful in generating a sine waveform with JavaScript. I had to lower the sample rate significantly so that I could fit the data in. I’ve found it to work on Firefox, Opera, Safari, and Google Chrome, but I didn’t test it in Internet Explorer 8 (not installed). You can increase the size of the generated .wav file by changing around the parameters, but be aware that it will stop working if the URI grows to be too large.
It’s prompting for apple’s quicktime?
@Fyzbo. Its the mime-type
.
<embed src=”data:audio/wav;….”/>
What about mp3 files?
cnizz, if he had to lower the sample rate to get a sine wave working, I doubt mp3s make any sense at all (at this point in time).
.
I’ve done a few VSTi instruments, you need a lot of samples for high fidelity. Cut the number of samples and the noise floor rises dramatically.
Yeah, you still need either Flash or Quicktime. No real breakthrough here.
Yeah, you still need either Flash or Quicktime.No real breakthrough here.
.
Surely we haven’t forgotten about the <audio/> tag?
Javascript should be able to provide pretty much any format via data: URIs with QuickTime, etc. MIDI is one example, see this related discussion and demo video.
Excellent post.
I enjoy seeing things like this.
It’ll work fine with the tag too. Firefox nightlies have with WAV support if you want to test.
It never occurred to me to try to embed data in URIs that would otherwise be in files. Wikipedia has some interesting info on the topic:
http://en.wikipedia.org/wiki/Data:_URI_scheme#Examples
Given the browser size restrictions on URIs it might not be partial for audio data but it does make me wonder what you could do with image data like GIFs that would fit into the size range. I’m wondering if this might be a nifty way to do JS palette shifting of images on-the-fly or even animated GIF creation from a series of stored frames.
[withdraws to code lair to test concept]
RSarvas: Due to the compression algorithm GIFs aren’t practical in JS, but BMPs are doable in realtime. See Neja, the JS demo I did in summer 2005. Most of it is done by generating 24bits BMP images on the fly ( Canvas wasn’t exactly there yet ) and includes classic 2d effects, and a couple of 3D effects like perspective correct mapping with gouraud shading.
As for sound, WAVE PCM is a straight forward format. I started a softSynth ~2 years ago. It’s definitely doable. Not in realtime though.
As long as you call this an “experiment”… Anyhow, audio/wav is an unknown plugin.
Note that the Dynamic WAV Generator is now on this page (the link Michael gave us is broken) : http://www.sk89q.com/playground/jswav/