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
310
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
43
Web Security, Frontend Masters
stevekinney
0
1.8k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
71
React and TypeScript, Turing School
stevekinney
0
300
Redux Workshop, 2021-05-05
stevekinney
2
2k
TypeScript and React Utility Types
stevekinney
1
180
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
150
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
220
Other Decks in Technology
See All in Technology
AI エージェント開発を支える MaaS としての Azure AI Foundry
ryohtaka
6
620
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
140
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
140
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
14
3.9k
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
1
230
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
490
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
140
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.1k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
650
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Six Lessons from altMBA
skipperchong
27
3.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Building an army of robots
kneath
303
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Docker and Python
trallard
44
3.3k
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