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>

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

Raw WAV data displayed graphically

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) == 42
btoa(encInt(42, 1)) == 'Kg=='

Note: btoa and encInt are not standard JS functions.

Slides + Code:

Some slides make noise!

WAV to the audience

Raw WAV data displayed graphically

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

Mozilla Audio API extension

loadedmetadata event
MozAudioAvailable event
mozSetup(channels, rate)
mozWriteAudio(data)

Web Audio API (Chrome)

Abstractions

Audio in the Wild

http://matt.west.co.tt/music/jasmid-midi-synthesis-with-javascript-and-html5-audio/

http://www.bemmu.com/music/index.html

http://weare.buildingsky.net/2010/06/17/html5-audio-data-api

HTML5 Audio with Realtime Javascript Low Pass Filter from Corban Brook on Vimeo.

http://b.uild.in/synth/

http://lights.elliegoulding.com

http://vimeo.com/12039415

Web Audio Data API - Text to Speech Demo from David Humphrey on Vimeo.

Thanks!

@chromakode

github.com/chromakode

Presented by github.com/chromakode/pow