Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Do you even jam bruh?
Siddharth Kshetrapal
August 20, 2017
Technology
1
120
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
150
Advanced Component Patterns
siddharthkp
0
45
The life of CSS and it's future
siddharthkp
1
170
Building real time data heavy interfaces for SaaS
siddharthkp
1
150
A portal to the future
siddharthkp
7
2.7k
Designing in React
siddharthkp
0
160
ES2015 on production? Not so fast
siddharthkp
1
300
Building node modules
siddharthkp
2
310
Add Superpowers to your React components using ES7 decorators
siddharthkp
1
310
Other Decks in Technology
See All in Technology
UIKitのアップデート #WWDC22
akatsuki174
4
340
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
alvarosanchez
0
120
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
4
300
Scrum Fest Osaka 2022 フルリモート下でのチームビルディング
moritamasami
2
1.2k
JDK Flight Recorder入門
chiroito
1
510
Retca Cloud
bau
0
520
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
18k
Meet passkeys
satotakeshi
1
120
Data in Google I/O - IO Extended GDG Seoul
kennethanceyer
0
150
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
140
データ分析基盤のはじめかた
chanyou0311
0
120
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
850
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
180k
WebSockets: Embracing the real-time Web
robhawkes
57
5.2k
The Invisible Customer
myddelton
110
11k
Embracing the Ebb and Flow
colly
73
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
YesSQL, Process and Tooling at Scale
rocio
157
12k
What's in a price? How to price your products and services
michaelherold
229
9.4k
Docker and Python
trallard
27
1.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Writing Fast Ruby
sferik
612
57k
Scaling GitHub
holman
451
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.3k
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