Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Making Music in the Browser
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Steve Kinney
May 29, 2015
Technology
350
3
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Making Music in the Browser
Resources and more:
https://github.com/stevekinney/making-music
Steve Kinney
May 29, 2015
Transcript
123 slides
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
More Decks by Steve Kinney
See All by Steve Kinney
Enterprise UI, v2
stevekinney
0
330
React_Performance__2022.pdf
stevekinney
0
56
React Performance v2
stevekinney
0
99
Introduction to Testing
stevekinney
0
210
Web Security, Frontend Masters
stevekinney
0
4.5k
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
150
React and TypeScript, Turing School
stevekinney
0
400
Redux Workshop, 2021-05-05
stevekinney
2
2.3k
TypeScript and React Utility Types
stevekinney
1
250
Other Decks in Technology
See All in Technology
The Author Pays
hiccupps
0
190
Claude Codeで作ったアプリを安全に公開する/Built with Claude Japan 2026
yoshidashingo
0
240
LLM 基盤と kagent v0 を全部 k8s に入れてみた / Deploy both LLM and kagent v0 in k8s
kota2and3kan
0
180
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
inariku
PRO
3
180
Kiro を使うコツ (頼み方、覚えさせ方、任せ方) | 目指せ Kiro マスター 09
inariku
PRO
3
150
Agent Harnessはどう作る?事例から学ぶAI Agentの設計思想
sergicalsix
0
280
bpf_arenaとstruct_opsを使うのが難しかった話
masu_mi
0
230
自治体AIコンタクトセンター、何をどこに任せる?~Amazon Connect Customer +Amazon Bedrockの実践知~ / 20261107 Satoshi Torano
shift_evolve
PRO
1
130
速くなった開発の効果をどう推し量るのか
bulbulpaul
0
110
人間+AIを「チーム」としてプロセスを再設計する
littlehands
0
420
田んぼから始まる挑戦 〜新米農家の1年目〜
miu_crescent
PRO
0
220
SSFの現在地 ― CAEP/RISCからAI Identityへ
oidfj
0
430
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
70
69k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.9k
Skip the Path - Find Your Career Trail
mkilby
1
290
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Abbi's Birthday
coloredviolet
5
11k
The Limits of Empathy - UXLibs8
cassininazir
2
780
Are puppies a ranking factor?
jonoalderson
2
4.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
3.1k
How to Talk to Developers About Accessibility
jct
2
620