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
290
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
Making Music with the Web Audio API, JSConf Colombia 2023
stevekinney
0
31
React and TypeScript, Turing School
stevekinney
0
180
Redux Workshop, 2021-05-05
stevekinney
1
1.9k
TypeScript and React Utility Types
stevekinney
1
160
A Gentle Introduction to GraphQL Resolvers
stevekinney
1
140
React State
stevekinney
11
10k
React State: useEffect and Custom Hooks
stevekinney
0
200
Building Modular Frontend Architectures
stevekinney
1
410
Redux
stevekinney
1
110
Other Decks in Technology
See All in Technology
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
780
SWC Transformerから見るTypeScript関数記述ベストプラクティス
fujiyamaorange
1
160
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
180
認知症フレンドリーテックとスタックチャン
naokiuc
0
400
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
220
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
460
パスワードを保存しますか?
hanacchi
0
240
OPENLOGI Company Profile
hr01
0
45k
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
310
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
220
TiDBにおけるテーブル設計と最適化の事例
cygames
0
750
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
15
1.1k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Building Applications with DynamoDB
mza
88
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Faster Mobile Websites
deanohume
300
30k
It's Worth the Effort
3n
180
27k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Designing with Data
zakiwarfel
96
4.8k
Teambox: Starting and Learning
jrom
128
8.4k
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