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
160
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
220
Advanced Component Patterns
siddharthkp
0
68
The life of CSS and it's future
siddharthkp
1
210
Building real time data heavy interfaces for SaaS
siddharthkp
1
190
A portal to the future
siddharthkp
7
2.8k
Designing in React
siddharthkp
0
190
ES2015 on production? Not so fast
siddharthkp
1
330
Building node modules
siddharthkp
2
470
Add Superpowers to your React components using ES7 decorators
siddharthkp
1
340
Other Decks in Technology
See All in Technology
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
130
Trust as Infrastructure
bcantrill
0
320
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
280
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
470
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
890
「Verify with Wallet API」を アプリに導入するために
hinakko
1
230
o11yで育てる、強い内製開発組織
_awache
3
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
110
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
about #74462 go/token#FileSet
tomtwinkle
1
290
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Music & Morning Musume
bryan
46
6.8k
For a Future-Friendly Web
brad_frost
180
9.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Context Engineering - Making Every Token Count
addyosmani
5
180
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Become a Pro
speakerdeck
PRO
29
5.5k
Speed Design
sergeychernyshev
32
1.1k
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