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.8k
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
190
Building Modular Frontend Architectures
stevekinney
1
410
Redux
stevekinney
1
100
Other Decks in Technology
See All in Technology
Vos logs méritent mieux que la config par défaut
lyrixx
2
250
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.4k
Getting started with controlling LEGO using Swift
hcrane
0
130
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
私のRSpecの書き方 / How I write RSpec
tmtms
4
820
統計的学習理論読み Chapter 2
kmatsui
1
190
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
10分でわかるfreeeのQA
freee
0
220
20240321_生成AI時代のDevOps
kzkmaeda
2
610
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Producing Creativity
orderedlist
PRO
335
39k
The Invisible Side of Design
smashingmag
293
49k
Product Roadmaps are Hard
iamctodd
43
9.6k
Agile that works and the tools we love
rasmusluckow
323
20k
Facilitating Awesome Meetings
lara
39
5.5k
Thoughts on Productivity
jonyablonski
57
3.8k
Bash Introduction
62gerente
604
210k
Fireside Chat
paigeccino
19
2.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
GitHub's CSS Performance
jonrohan
1023
450k
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