Mak♪ng Waves
A Primer in Pure JS Generated Audio
<a><abbr><address><area><article><aside><audio><b><base><bdi><bdo><blockquote><body><br><button><canvas><caption><cite><code><col><colgroup><command><datalist><dd><del><details><dfn><div><dl><dt><em><embed><fieldset><figcaption><figure><footer><form><h1><h2><h3><h4><h5><h6><head><header><hgroup><hr><html><i><iframe><img><input><ins><kbd><keygen><label><legend><li><link><map><mark><menu><meta><meter><nav><noscript><object><ol><optgroup><option><output><p><param><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strong><style><sub><summary><sup><table><tbody><td><textarea><tfoot><th><thead><time><title><tr><track><ul><var><video><wbr>
<audio>
</audio>
<audio>
- Popular formats: WAV, Ogg Vorbis, MP3.
- Codec support varies between browsers.
- Loading and playback scriptable.
Play with music!
A Brief History
of Computer Audio
1951: CSIRAC: the world's first computer to play music.
1961: IBM 704 computer simulates speech.
1982: MIDI is born.
2011: ...
2011: ? ? ?
2011: Music can be generated using HTML5/JavaScript!
On Waves
Pressure Waves
Analog Electrical Signals
Sampling (Digitization)
Sample Data
Digital to Analog Conversion
Analog Electrical Signals
Pressure Waves
Frequency
Amplitude
Sampling Rate
Making Waves
Making WAVs
Sound from data:
<audio src="data:audio/wav,RIFF6%C9%03%00WAVEfmt%20%10%00
%00%00%01%00%01%00D%AC%00%00%88X%01%00%02%00%10%00data%12
%C9%03%00%07%00%06%00%FE%FF%06%00%00%00%01%00%01%00%00%00
%FF%FF%FE%FF%FF%FF%FC%FF%FD%FF%FF%FF%00%00%F8%FF%F9%FF%F9
%FF%F6%FF%FB%FF%FE%FF%FD%FF%01%00%FC%FF%07%00%02%00%05%00
%06%00%20%00%1F%00%18%00%1E%00%18%00%00%22%00..."></audio>⇓
Speaking binary
encInt(42, 1) == '*''*'.charCodeAt(0) == 42btoa(encInt(42, 1)) == 'Kg=='Note: btoa and encInt are not standard JS functions.
WAV to the audience
Generating the header
Encoding WAV data
Let's make some noise...
Show me a sine
Sine waves
Attack & decay
Making music
Random patterns
Echo... echo... echo...
Discussion
- Pure JS!
- Audio is generated, then played.
- Resulting data: URIs can be rather large and slow to create.
Mozilla Audio API extension
loadedmetadata eventMozAudioAvailable eventmozSetup(channels, rate)mozWriteAudio(data)Abstractions
- Dynamic audio is bleeding edge.
- Available APIs vary between browsers.
- Cross-browser abstractions exist.
- XAudioJS (github.com/grantgalitz/XAudioJS)