Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Do you even jam bruh?

Do you even jam bruh?

Experiments with Web Audio API and React

Siddharth Kshetrapal

August 20, 2017
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Technology

Transcript

  1. const context = new(window.AudioContext || window.webkitAudioContext) const oscillator = context.createOscillator()

    oscillator.frequency.setValueAtTime(400, context.currentTime) AudioContext ↓ destination ↓ effect input
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. AudioContext ↓ destination ↓ effect const context = new(window.AudioContext ||

    window.webkitAudioContext) const source = context.createBufferSource() const url = './audio/snare.wav' input
  9. 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
  10. 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
  11. • • • • • • • • kick x-----

    x----- x----- x----- x----- x----- x----- x-----
  12. • • • • • • • • kick x

    x x x x x x x snare x x x x
  13. • • • • • • • • kick x

    x x x x x x x snare x x x x hihat x x x x x x x x
  14. • • • • • • • • 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
  15. • • • • • • • • 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
  16. • • • • • • • • 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
  17. <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>
  18. <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>
  19. class Kick extends React.Component { constructor () { super(props) this.state

    = { notes: this.props.children.split(' ') } } componentDidMount () { } render () { } }
  20. class Kick extends React.Component { constructor () { super(props) this.state

    = { notes: this.props.children.split(' ') } } componentDidMount () { loadInstrument('kick').then(source => { this.setState({ source }) }) } render () { } }
  21. 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) }) } }
  22. <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>
  23. <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>
  24. class Kick extends React.Component { constructor () { ... }

    componentDidMount () { ... } render () { this.state.notes.map((note, index) => { if (index !== 'o') { setTimeout(() => this.state.source.play(), index * 500) } }) } }
  25. <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>
  26. <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>
  27. 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) }) } }
  28. const chords = { C: 65.406, D: 73.416, E: 82.407,

    F: 87.307, G: 97.999, B: 123.471, }
  29. 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 }
  30. 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] }
  31. <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>
  32. • • • • • • • • <Lead> E2

    E2 G2 E2 D2 C2 B1 </Lead>
  33. • • • • • • • • 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>
  34. • • • • • • • • 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>
  35. 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) }) } }
  36. const synth = window.speechSynthesis const voices = synth.getVoices() const text

    = 'Hello world' const speech = new SpeechSynthesisUtterance(text); speech.voice = voices[0]
  37. const synth = window.speechSynthesis const voices = synth.getVoices() const text

    = 'Hello world' const speech = new SpeechSynthesisUtterance(text); speech.voice = voices[53] synth.speak(speech)