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
60
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
460
Add Superpowers to your React components using ES7 decorators
siddharthkp
1
330
Other Decks in Technology
See All in Technology
大規模PaaSにおける監視基盤の構築と効率化の道のり
lycorptech_jp
PRO
0
180
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
370k
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.3k
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
240
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
CSSDay, Amsterdam
brucel
0
160
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
yukisnow1823
2
1.2k
Cursor Meetup Tokyo
iamshunta
3
1.1k
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
GitHub's CSS Performance
jonrohan
1031
460k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
BBQ
matthewcrist
88
9.7k
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