Making Music with the Web Audio API (Nation.js, 2015)

When you weren't looking, someone stuck a synthesizer into your favorite web browser. The Web Audio API is widely supported and makes it easy—and more importantly, fun—to create, process, and control audio in the browser. We can spin up oscillators, adjust gain, tweak frequencies, and slap on some funky delay. Additionally, we can also take existing sounds and manipulate them to our heart's content. We can grab input from cameras and microphones and use them as we see fit. But, the fun doesn't stop there—we still have the rest of the browser's media APIs at our disposal. We'll talk a little bit about the Web Audio API. We'll explore the browser as a vehicle for creative expression. We'll fire up some audio contexts and connect some nodes. We'll also leverage the getUserMedia Web API, WebSockets, and others to build unique musical instruments that could only be possible in the web browser. We'll not only talk about the API itself, but also some of the fundamental concepts for working with audio and making music.

Transcript

1. Making Music with the Web Audio API Steve Kinney — @stevekinney — steve@turing.io
2. Hello. I'm Steve. @stevekinney — steve@turing.io
3. http://turing.io
4. http://github.com/stevekinney/making-music
5. synthesizer web browser Someone put a . in your
7. The Web Audio API.
8. It all starts with some context.
53. Source: http://commons.wikimedia.org/wiki/File:Waveforms.svg
58. A4 440 Hz
59. A4 440 Hz A5 880 Hz
60. A3 220 Hz A4 440 Hz A5 880 Hz
61. B4 C5 C#5 D5 D#5 E5 F5 F#5 G5 G#5 A4 440 Hz A5 880 Hz
62. Note Frequency (hz) A 440.00 A̅ 476.67 B 513.33 C 550.00 C̅ 586.67 D 623.33 D̅ 660.00 E 696.67 F 733.33 F̅ 770.00 G 806.67 G̅ 843.33 A 880.00 A̅ B C
63. Note Frequency (hz) Frequency (hz) A 440.00 A̅ 476.67 B 513.33 C 550.00 550.00 C̅ 586.67 595.83 D 623.33 641.67 D̅ 660.00 687.50 E 696.67 733.33 F 733.33 779.17 F̅ 770.00 825.00 G 806.67 870.83 G̅ 843.33 916.67 A 880.00 962.50 A̅ 1008.33 B 1054.17 C 1100.00
65. http://github.com/stevekinney/octavian
73. Emits a keyDown event
74. Emits a keyDown event
75. keyDown event
76. keyDown event
89. keyDown event
92. keyUp event
95. synthesizer web browser Someone put a . in your
96. synthesizer web browser Someone put a . in your
97. +
99. Emits a facetrackingEvent
105. +
106. 1 2 3 4 5 6 7 8 9 1011 12131415 0 C3 E3 G3 A3 C4 E4 G4 A4 C5 E5 G5 A5
112. +
120. Music is pretty awesome.
121. The web is pretty awesome.
122. Music and the web are even more awesome when their together.
124. http://github.com/stevekinney/ making-music
125. Thank you. Twitter, Github, and like everything else: @stevekinney Slides and demos: http://github.com/stevekinney/making-music Be a mentor or hire our students: http://turing.io