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.

Javascript Song Player

Related Content:

Posted by Michael Mahemoff at 9:35 am
13 Comments

+++--
3.8 rating from 30 votes

13 Comments »

Comments feed TrackBack URI

It’s prompting for apple’s quicktime?

Comment by Fyzbo — November 25, 2008

@Fyzbo. Its the mime-type
.
<embed src=”data:audio/wav;….”/>

Comment by TNO — November 25, 2008

What about mp3 files?

Comment by cnizz — November 25, 2008

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.

Comment by Nosredna — November 25, 2008

Yeah, you still need either Flash or Quicktime. No real breakthrough here.

Comment by jefposkanzer — November 25, 2008

Yeah, you still need either Flash or Quicktime.No real breakthrough here.
.
Surely we haven’t forgotten about the <audio/> tag?

Comment by TNO — November 25, 2008

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.

Comment by Schill — November 25, 2008

Excellent post.
I enjoy seeing things like this.

Comment by drewlesueur — November 25, 2008

It’ll work fine with the tag too. Firefox nightlies have with WAV support if you want to test.

Comment by doublec — November 25, 2008

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]

Comment by RSarvas — November 26, 2008

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.

Comment by p01 — November 26, 2008

As long as you call this an “experiment”… Anyhow, audio/wav is an unknown plugin.

Comment by transformer — November 27, 2008

Note that the Dynamic WAV Generator is now on this page (the link Michael gave us is broken) : http://www.sk89q.com/playground/jswav/

Comment by grafikmuzik — December 29, 2010

Leave a comment

You must be logged in to post a comment.