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
Do you even jam bruh?
Search
Siddharth Kshetrapal
August 20, 2017
Technology
1
140
Do you even jam bruh?
Experiments with Web Audio API and React
Siddharth Kshetrapal
August 20, 2017
Tweet
Share
More Decks by Siddharth Kshetrapal
See All by Siddharth Kshetrapal
We need to talk about our frontend workflow
siddharthkp
1
200
Advanced Component Patterns
siddharthkp
0
58
The life of CSS and it's future
siddharthkp
1
190
Building real time data heavy interfaces for SaaS
siddharthkp
1
170
A portal to the future
siddharthkp
7
2.8k
Designing in React
siddharthkp
0
180
ES2015 on production? Not so fast
siddharthkp
1
330
Building node modules
siddharthkp
2
460
Add Superpowers to your React components using ES7 decorators
siddharthkp
1
330
Other Decks in Technology
See All in Technology
テキスト解析で見る PyCon APAC 2025 セッション&スピーカートレンド分析
negi111111
0
270
Creating Awesome Change in SmartNews
martin_lover
1
180
All You Need Is Kusa 〜Slackデータで始めるデータドリブン〜
jonnojun
0
140
Amebaにおける Platform Engineeringの実践
kumorn5s
6
890
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
170
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
270
.mdc駆動ナレッジマネジメント/.mdc-driven knowledge management
yodakeisuke
23
10k
Startups On Rails 2025 @ Tropical on Rails
irinanazarova
0
240
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
4
640
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.4k
ゆるくVPC Latticeについてまとめてみたら、意外と奥深い件
masakiokuda
2
220
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
190
Featured
See All Featured
Speed Design
sergeychernyshev
28
880
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
GitHub's CSS Performance
jonrohan
1030
460k
It's Worth the Effort
3n
184
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Typedesign – Prime Four
hannesfritz
41
2.6k
Music & Morning Musume
bryan
47
6.5k
Transcript
DO YOU EVEN JAM BRUH?
DO YOU??
bit.ly/reactbangalore twitter slack
@siddharthkp
javascript architect @practo open source github.com/siddharthkp youtube thingy bit.ly/jsshow
Web Audio API
AudioContext input → effects → destination
AudioContext input → effects → destination OscillatorNode AudioBuffer
AudioContext input → effects → destination OscillatorNode AudioBuffer BiquadFilter GainNode
WaveShaper
AudioContext input → effects → destination OscillatorNode AudioBuffer BiquadFilter GainNode
WaveShaper Audio MediaStream
Web Audio API Full spec: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
AudioContext input → effects → destination OscillatorNode AudioBuffer BiquadFilter GainNode
WaveShaper Audio MediaStream
AudioContext input → effects → destination OscillatorNode AudioBuffer BiquadFilter GainNode
WaveShaper Audio MediaStream
AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) AudioContext ↓ destination ↓
effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
oscillator.frequency.setValueAtTime(400, context.currentTime) AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
oscillator.frequency.setValueAtTime(400, context.currentTime) oscillator.connect(context.destination) AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
oscillator.frequency.setValueAtTime(400, context.currentTime) oscillator.connect(context.destination) oscillator.start() setTimeout(() => oscillator.stop(), 1000) AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
oscillator.frequency.setValueAtTime(400, context.currentTime) const gainEffect = context.createGain() oscillator.connect(context.destination) oscillator.start() setTimeout(() => oscillator.stop(), 1000) AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
oscillator.frequency.setValueAtTime(400, context.currentTime) const gainEffect = context.createGain() gainEffect.gain.setValueAtTime(10, context.currentTime) oscillator.connect(context.destination) oscillator.start() setTimeout(() => oscillator.stop(), 1000) AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
oscillator.frequency.setValueAtTime(400, context.currentTime) const gainEffect = context.createGain() gainEffect.gain.setValueAtTime(10, context.currentTime) oscillator.connect(gainEffect).connect(context.destination) oscillator.start() setTimeout(() => oscillator.stop(), 1000) AudioContext ↓ destination ↓ effect input
const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()
oscillator.frequency.setValueAtTime(400, context.currentTime) oscillator.type = 'square' // sine, square, triangle, sawtooth const gainEffect = context.createGain() gainEffect.gain.setValueAtTime(10, context.currentTime) oscillator.connect(gainEffect).connect(context.destination) oscillator.start() setTimeout(() => oscillator.stop(), 1000) AudioContext ↓ destination ↓ effect input
AudioContext ↓ destination ↓ effect const context = new(window.AudioContext ||
window.webkitAudioContext) const source = context.createBufferSource() const url = './audio/snare.wav' input
AudioContext ↓ destination ↓ effect const context = new(window.AudioContext ||
window.webkitAudioContext) const source = context.createBufferSource() const url = './audio/snare.wav' new BufferLoader(context, url, audioBuffer => { source.buffer = audioBuffer }).load() input
AudioContext ↓ destination ↓ effect const context = new(window.AudioContext ||
window.webkitAudioContext) const source = context.createBufferSource() const url = './audio/snare.wav' new BufferLoader(context, url, audioBuffer => { source.buffer = audioBuffer source.connect(context.destination) source.start() }).load() input
None
• • • • • • • •
• • • • • • • • kick x
x x x x x x x
• • • • • • • • kick x-----
x----- x----- x----- x----- x----- x----- x-----
• • • • • • • • kick x
x x x x x x x
• • • • • • • • kick x
x x x x x x x snare x x x x
• • • • • • • • kick x
x x x x x x x snare x x x x hihat x x x x x x x x
• • • • • • • • kick x
x x x x x x x snare x x x x hihat x x x x x x x x bass E E E E B B B B
• • • • • • • • kick x
x x x x x x x snare x x x x hihat x x x x x x x x bass E E E E B B B B lead E2 E2 G2 E2 D2 C2 B1
React
• • • • • • • • kick x
x x x x x x x snare x x x x hihat x x x x x x x x bass E E E E B B B B lead E2 E2 G2 E2 D2 C2 B1
<Song> kick x x x x x x x x
snare x x x x hihat x x x x x x x x bass E E E E B B B B lead E2 E2 G2 E2 D2 C2 B1 </Song>
<Song> <Kick> x x x x x x x x
</Kick> snare x x x x hihat x x x x x x x x bass E E E E B B B B lead E2 E2 G2 E2 D2 C2 B1 </Song>
class Kick extends React.Component { }
class Kick extends React.Component { constructor () { } componentDidMount
() { } render () { } }
class Kick extends React.Component { constructor () { super(props) this.state
= { notes: this.props.children.split(' ') } } componentDidMount () { } render () { } }
class Kick extends React.Component { constructor () { super(props) this.state
= { notes: this.props.children.split(' ') } } componentDidMount () { loadInstrument('kick').then(source => { this.setState({ source }) }) } render () { } }
class Kick extends React.Component { constructor () { super(props) this.state
= { notes: this.props.children.split(' ') } } componentDidMount () { loadInstrument('kick').then(source => { this.setState({ source }) }) } render () { this.state.notes.map((note, index) => { setTimeout(() => this.state.source.play(), index * 500) }) } }
<Song> <Kick> x x x x x x x x
</Kick> <Snare> x x x x </Snare> hihat x x x x x x x x bass E E E E B B B B lead E2 E2 G2 E2 D2 C2 B1 </Song>
<Song> <Kick> x x x x x x x x
</Kick> <Snare> x o x o x o x o </Snare> hihat x x x x x x x x bass E E E E B B B B lead E2 E2 G2 E2 D2 C2 B1 </Song>
class Kick extends React.Component { constructor () { ... }
componentDidMount () { ... } render () { this.state.notes.map((note, index) => { if (index !== 'o') { setTimeout(() => this.state.source.play(), index * 500) } }) } }
<Song> <Kick> x x x x x x x x
</Kick> <Snare> x o x o x o x o </Snare> <Hihat> x x x x x x x x </Hihat> bass E E E E B B B B lead E2 E2 G2 E2 D2 C2 B1 </Song>
<Song> <Kick> x x x x x x x x
</Kick> <Snare> x o x o x o x o </Snare> <Hihat> x x x x x x x x </Hihat> <Bass> E E E E B B B B </Bass> lead E2 E2 G2 E2 D2 C2 B1 </Song>
class Bass extends React.Component { constructor () { ... }
componentDidMount () { ... } render () { this.state.notes.map((note, index) => { setTimeout(() => { this.state.source.frequency.value = getFrequency(note) this.state.source.play()) }, index * 500) }) } }
const chords = { C: 65.406, D: 73.416, E: 82.407,
F: 87.307, G: 97.999, B: 123.471, }
const chords = { C: 65.406, C1: 32.703, D: 73.416,
D1: 36.708, E: 82.407, E1: 41.203, F: 87.307, F1: 43.654, G: 97.999, G1: 48.999, B: 123.471, B1: 61.735 }
const chords = { C: 65.406, C1: 32.703, D: 73.416,
D1: 36.708, E: 82.407, E1: 41.203, F: 87.307, F1: 43.654, G: 97.999, G1: 48.999, B: 123.471, B1: 61.735 } const getFrequency = note => { return chords[note] }
<Song> <Kick> x x x x x x x x
</Kick> <Snare> x o x o x o x o </Snare> <Hihat> x x x x x x x x </Hihat> <Bass> E E E E B B B B </Bass> <Lead> E2 E2 G2 E2 D2 C2 B1 </Lead> </Song>
• • • • • • • • <Lead> E2
E2 G2 E2 D2 C2 B1 </Lead>
• • • • • • • • E2 E2
G2 E2 D2 C2 B1 <Lead> <Note> E2 </Note> <Note> E2 </Note> <Note> G2 </Note> <Note> E2 </Note> <Note> D2 </Note> <Note> C2 </Note> <Note> B1 </Note> </Lead>
• • • • • • • • E2 E2
G2 E2 D2 C2 B1 <Lead> <Note time = "0" duration = "0.75" > E2 </Note> <Note time = "0.75" duration = "0.25" > E2 </Note> <Note time = "1" duration = "0.25" > G2 </Note> <Note time = "1.375" duration = "0.25" > E2 </Note> <Note time = "1.75" duration = "0.25" > D2 </Note> <Note time = "2" duration = "1" > C2 </Note> <Note time = "3" duration = "1" > B1 </Note> </Lead>
class Lead extends React.Component { constructor () { ... }
componentDidMount () { ... } render () { this.props.children.map((child, index) => { setTimeout(() => { this.state.source.frequency.value = getFrequency(child.props.chord) this.state.source.play()) }, child.props.time * 1000) }) } }
Speech Synthesis API
const synth = window.speechSynthesis const voices = synth.getVoices()
const synth = window.speechSynthesis const voices = synth.getVoices() const text
= 'Hello world' const speech = new SpeechSynthesisUtterance(text); speech.voice = voices[0]
const synth = window.speechSynthesis const voices = synth.getVoices() const text
= 'Hello world' const speech = new SpeechSynthesisUtterance(text); speech.voice = voices[53] synth.speak(speech)
@siddharthkp twitter github