Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making Music in the Browser
Search
Steve Kinney
May 29, 2015
Technology
3
320
Making Music in the Browser
Resources and more:
https://github.com/stevekinney/making-music
Steve Kinney
May 29, 2015
Tweet
Share
More Decks by Steve Kinney
See All by Steve Kinney
Introduction to Testing
stevekinney
0
95
Web Security, Frontend Masters
stevekinney
0
2.9k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
95
React and TypeScript, Turing School
stevekinney
0
330
Redux Workshop, 2021-05-05
stevekinney
2
2.1k
TypeScript and React Utility Types
stevekinney
1
200
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
160
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
240
Other Decks in Technology
See All in Technology
BirdCLEF+2025 Noir 5位解法紹介
myso
0
200
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
データエンジニアがこの先生きのこるには...?
10xinc
0
450
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
about #74462 go/token#FileSet
tomtwinkle
1
420
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
510
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
280
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
25
17k
バイブコーディングと継続的デプロイメント
nwiizo
2
440
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Unsuck your backbone
ammeep
671
58k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Statistics for Hackers
jakevdp
799
220k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building Adaptive Systems
keathley
43
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
RailsConf 2023
tenderlove
30
1.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Transcript
Making Music with the Web Audio API Steve Kinney —
@stevekinney
Hello. I'm Steve.
http://turing.io
Nodebots Colorado: Denver, June 3 http://nodebots.co/
synthesizer web browser Someone put a . in your
The Web Audio API.
It all starts with some context.
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
Source: http://commons.wikimedia.org/wiki/File:Waveforms.svg
None
None
None
A4 440 Hz
A4 440 Hz A5 880 Hz
A3 220 Hz A4 440 Hz A5 880 Hz
A4 440 Hz A5 880 Hz B4 C5 C#5 D5
D#5 E5 F5 F#5 G5 G#5
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
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
None
http://github.com/stevekinney/octavian
None
None
None
None
None
None
None
Emits a keyDown event
Emits a keyDown event
keyDown event
keyDown event
None
None
None
None
None
None
None
None
None
None
None
None
None
keyDown event
None
None
keyUp event
None
None
synthesizer web browser Someone put a . in your
synthesizer web browser Someone put a . in your
+
None
Emits a facetrackingEvent
None
None
None
None
None
+
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 0 C3 E3 G3 A3 C4 E4 G4 A4 C5 E5 G5 A5
None
None
None
None
None
+
None
None
None
None
None
None
Music is pretty awesome.
The web is pretty awesome.
Music and the web are even more awesome when their
together.
None
http://github.com/stevekinney/making-music
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