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.

XebiCon'17 : React Beyond Markup - Peter Önneby

70 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!

×