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
150
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
210
Advanced Component Patterns
siddharthkp
0
62
The life of CSS and it's future
siddharthkp
1
200
Building real time data heavy interfaces for SaaS
siddharthkp
1
180
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
330
Other Decks in Technology
See All in Technology
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
140
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
160
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
4.1k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.6k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.3k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
240
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
290
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
15k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Adopting Sorbet at Scale
ufuk
77
9.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
What's in a price? How to price your products and services
michaelherold
246
12k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
Automating Front-end Workflow
addyosmani
1370
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Invisible Side of Design
smashingmag
301
51k
Into the Great Unknown - MozCon
thekraken
39
1.9k
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