Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
React Beyond Markup
There’s more to it than meets the eye
Peter Önneby - @poenneby
“learn once, write anywhere”
I React
I Music
Hihat
Snare
Kick
<Kick /> <Rest /> <Snare /><Rest /> <Kick /> <Kick /><Snare /><Rest />
<Hihat /><Hihat /><Hihat /><Hihat /><Hihat /><Hihat...
React + Music
React Beyond Markup
React Tunes
Compose music with React
render() {
return (
<div>
<Song tempo={100} notesPerQuarter={4}>
...
React Beyond Markup
Web Audio API
The Sound API of your browser
const AudioContext = window.AudioContext ||
window.webkitA...
React Beyond Markup
AudioNodes
AnalyserNode
AudioBufferSourceNode
AudioDestinationNode
BiquadFilterNode
ChannelMergerNode
...
React Beyond Markup
Oscillator
Think synthesizers
const oscillator = audioCtx.createOscillator();
React Beyond Markup
AudioBuffer
Load raw waveforms into a buffer
fetch(url)
.then(res => res.arrayBuffer())
.then(arrayBuf...
Audio Routing
Putting it all together
AudioBufferSourceNode
OscillatorNode
GainNode
AudioNode.connect()
BiquadFilterNode
A...
Let’s make some music!
XebiCon'17 : React Beyond Markup - Peter Önneby
Prochain SlideShare
Chargement dans…5
×

XebiCon'17 : React Beyond Markup - Peter Önneby

35 vues

Publié le

React gives us the power to create complex user interfaces that are easy to maintain and highly composable. What if we took things a little further than just rendering views? There’s more to React than meets the eye!

Publié dans : Technologie
  • Soyez le premier à commenter

XebiCon'17 : React Beyond Markup - Peter Önneby

  1. 1. React Beyond Markup There’s more to it than meets the eye Peter Önneby - @poenneby
  2. 2. “learn once, write anywhere”
  3. 3. I React
  4. 4. I Music
  5. 5. Hihat Snare Kick
  6. 6. <Kick /> <Rest /> <Snare /><Rest /> <Kick /> <Kick /><Snare /><Rest /> <Hihat /><Hihat /><Hihat /><Hihat /><Hihat /><Hihat /><Hihat /><Hihat /> JSX
  7. 7. React + Music
  8. 8. React Beyond Markup React Tunes Compose music with React render() { return ( <div> <Song tempo={100} notesPerQuarter={4}> <Track> <Bar> <Kick /> <Rest /> <Rest /> <Rest /> <Clap /> ...
  9. 9. React Beyond Markup Web Audio API The Sound API of your browser const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext();
  10. 10. React Beyond Markup AudioNodes AnalyserNode AudioBufferSourceNode AudioDestinationNode BiquadFilterNode ChannelMergerNode ChannelSplitterNode ConstantSourceNode ConvolverNode DelayNode DynamicsCompressorNode GainNode MediaElementAudioSourceNode MediaStreamAudioDestinationNode MediaStreamAudioSourceNode OscillatorNode PannerNode ScriptProcessorNode StereoPannerNode WaveShaperNode
  11. 11. React Beyond Markup Oscillator Think synthesizers const oscillator = audioCtx.createOscillator();
  12. 12. React Beyond Markup AudioBuffer Load raw waveforms into a buffer fetch(url) .then(res => res.arrayBuffer()) .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer)) .then(audioData => { const bufferSource = audioContext.createBufferSource(); bufferSource.buffer = audioData; bufferSource.connect(audioContext.destination); bufferSource.start(); });
  13. 13. Audio Routing Putting it all together AudioBufferSourceNode OscillatorNode GainNode AudioNode.connect() BiquadFilterNode AudioDestinationNode
  14. 14. Let’s make some music!

×