sounds as data uri

[spelagon]

I stumbled upon this site recently: http://codebase.es/riffwave/

 

It shows how to generate sounds and play them in pure javascript using the old HTML Audio tag with data uri as source (inline base64 encoding)

Means it should work on all modern browsers (exception below) even if they do not support the new Web Audio API !!

So should be possible to create for example a mod player that is (nearly) cross platform (compare FlodJS: http://www.photonstorm.com/flod).

 

Just too bad that Mobile Safari does not support audio as data uri though :(

 

 

 

Another example of this technique: http://www.p01.org/releases/JS1K_Speech_Synthesizer/

[Evan Burchard]

Awesome!

 

This would be a good post for html5audio.org

[dhaber]

I've heavily used this technique for my SFMaker application, mostly because the web audio API wasn't an option back when it was written.  It does work fairly well.   It is notable that IE doesn't support this technique either, since they don't support WAV audio, despite Microsoft's role in popularizing the format.   Hopefully at some point they'll change their position on that.     Mobile is always hit or miss on audio, even with this technique, but it is getting better.   On the desktop side I have fairly complicated games fully generating their audio procedurally on init using this and then playing all sounds out of <audio> tags, and it actually works pretty well. 

 

For anyone looking to build WAVs on their own (even to just better understand the data section,) I found this very useful:

 

          https://ccrma.stanford.edu/courses/422/projects/WaveFormat/

 

I have a WaveFile.js that I wrote that is somewhat similar to the linked riffwave.js.  I've noticed riffwave.js always uses its own base64 encoder.   My code has a base64 encoder as a fallback, but when possible uses the browser's btoa(), which I'm guessing is notably faster, though I may be wrong.   Otherwise, the end result is probably about the same regardless of which one is used.

 

WaveFile.js is part of SFMaker, and the new open source version has not yet been released.   There is an old version out there, but the new one is much better.  In case anyone is interested, I just made an SFMaker repository and placed WaveFile.js from the newer version up on github so that it can be immediately used by anyone looking for this sort of thing.  It can be found here:

 

     https://github.com/leshylabs/sfMaker/blob/master/WaveFile.js

 

That is under LGPL.  I've been thinking with the new release I may switch to a much more permissive license, but that won't be until I put together the new release.   riffwave.js is listed as being Public Domain, so it may currently have a nicer license.

 

Example usage:

var waveFile = new WaveFile();// Set the format as (SampleRate, bitsPerSecond, numChannels)// Default is (8000, 8, 1) if this call is left outwaveFile.setFormat(11025, 8, 1); // Create your waveform data and add it to the waveFilewaveFile.data = data;//  From here you have options://  To play the sound and return a generated audio tag:var audio = waveFile.play();//  To just return an audio tagvar audio = waveFile.generateAudioTag();//  Or to return the base64 (which is extremely useful if you//  plan on generating multiple Audio tags, since it can just be//  set to the src of each, which is far faster than regenerating//  it repeatedly.)var base64 = waveFile.generateBase64();

I threw these notes and this release of WaveFile.js together hastily for the purpose of this post.  It is late, and I may have made mistakes.   If anyone has any questions, just let me know.

[spelagon]

dhaber: Very interesting. Thanks for your detailed post.

I did stumble upon SFMaker too while looking into retro sound generation. Awesome web app!!!