views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!--char set (lang above)-->
  <meta charset="utf-8">

  <!--device/browser shizzle-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!--meta content-->
  <link rel="shortcut icon" href="favicon.ico" />

  <meta name="author" content="Ruth John (@rumyra)">
  <meta name="dcterms.rightsHolder" content="Ruth John for Rumyra Ltd, United Kingdom, 2015">
  <title>The Web Audio API</title>

  <link rel="stylesheet" href="reveal/css/reveal.css">
  <link rel="stylesheet" href="reveal/css/theme/rumyra.css" id="theme">
  <link rel="stylesheet" href="reveal/lib/css/eighties.css">
  <link rel="stylesheet" href="assets/audio.css">
  <script src="reveal/js/reveal.js"></script>
  <script src="scripts/d3.min.js"></script>

  <!-- <script src="https://js.pusher.com/3.0/pusher.min.js"></script> -->
  <!-- <link rel="stylesheet" href="visuals.css"> -->

  <style type="text/css">
    #screen {
      position: absolute; top:0px; left:0px;
      margin: 0px; padding: 0px;
      width:100vw; height:100vh;
      background-color: black;
      display: none;
    }
    svg {width: 100vw; height: 100vh; padding:0px; margin:0px;}
  </style>

</head>

<!--

$green: #acc486
$orange: #ea8d88
$purple: #8c4c6f

$brown: #463c34
$cream: #eee5c4

$grey: #bebebe
-->

<body class="talk">
  <div class="reveal">
    <div class="slides">
      <section>

        <section data-background-color="#8c4c6f">
          <h1>A New Soundscape</h1>
          <h1>Web Audio & MIDI</h1>
          <h2>Ruth John&nbsp;&nbsp;|&nbsp;&nbsp;@Rumyra</h2>
          <aside class="notes">
          </aside>
        </section>

        <!--COOL DEMO HERE-->
        <!-- <section data-background-color="#8c4c6f" data-state="vis_speakers">
          <audio src="media/warren.m4a" data-autoplay></audio>
          <aside class="notes">
            <p>DANCE!</p>
          </aside>
        </section> -->

        <section data-background-color="#8c4c6f" data-background-image="media/talk2med.jpg">
          <h1>Ruth John&nbsp;&nbsp;|&nbsp;&nbsp;@Rumyra</h1>
          <h2>Hello</h2>
          <aside class="notes">
            <p>Hello Viewsource!</p>
            <p>Real pleasure to be here. My name is Ruth, I'm here to talk to u about audio & midi, on the web.</p>
            <p>I have to bypass intros as I have a lot to get through - you can find me on this thing the internet @rumyra twitter github codepen</p>
            <p>I have this much to get through...</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/specScroll.mp4">
          <aside class="notes">
            <p>This is a video of me scrolling through the specification.. sped up 8 times - this is the working draft from last year - it moved into candidate recommendation last month. 6 years, it's here to stay.</p>
            <p>It's a spec unto itself really - by the way the length of that video before I sped it up was 2 1/2 mins!</p>
            <p>It's silly long.</p>
            <p>If you're not from a musical background it can be pretty intimidating.</p>
            <p>MDN DOCS</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/mdnDocs.mp4">
          <aside class="notes">
            <p>MDN docs of methods, functions, properties, events. I mean what even is a cent. Top tip - it's not a denomination of a currency.</p>
            <p>Was this article helpful? To be honest it actually is. These docs are the most helpful. Go here.</p>
            <p>The other barrier to entry when we talk about web audio - or when I do - is I see peoples minds - they do this:</p>
          </aside>
        </section>

        <!-- <section data-background-color="#8c4c6f" data-background-image="media/meProject.jpg">
          <h1>Ruth John&nbsp;&nbsp;|&nbsp;&nbsp;@Rumyra</h1>
          <p>Street VJ</p>
          <aside class="notes">
            <p>This is me projecting visuals around my city. With a laptop, a projector, a midi controller and hand coded browser based software.</p>
            <p>AKA Legacy FED</p>
            <p>How long I've been doing this for...</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/devEx.png">
          <h1>Ruth John&nbsp;&nbsp;|&nbsp;&nbsp;@Rumyra</h1>
          <p>~ 15 Years</p>
          <aside class="notes">
            <p>I've been a web developer for about 15 years now</p>
            <p>I'm a recongnised Google Developer Expert in browser stuff and specifically audio and midi</p>
            <p>I work for myself</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/paddle.jpg">
          <h1>Ruth John&nbsp;&nbsp;|&nbsp;&nbsp;@Rumyra</h1>
          <p>Bobby the dog</p>
          <aside class="notes">
            <p>This is my favourite client - Bobby the dog - the only thing he's ever tried to do is knock my off my paddle board into a mangrove river full of sting rays - true story</p>
            <p>Yup totally qualified to talk about the whole of the web audio API...</p>
            <p>Now there's 2 problems we encounter when we talk about audio on the web - the first one is this:</p>
          </aside>
        </section>
 -->
        <!-- people are relunctant to use it on the web -->
        <section data-background-color="#8c4c6f" data-background-video="media/cameronsworld.mp4">
          <aside class="notes">
            <p>Real website - camerons world</p>
            <p>A website playing background music - the modern version of which is something like this:</p>
            <p>bgsound isn't a tag anymore - we don't have to deal with this</p>
            <p>Then there's the modern day equivilant.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/annoy.mp4">
          <aside class="notes">
            <p>An annoying advert that autoplays - yes I know.</p>
            <p>http://afternooncareer.com/lp/int/uk/dn24/clx.htm</p>
            <p>I mean this is intrusive and pretty horrible, ur probably trying to read an article</p>
            <p>We have some measures in browsers now to help with this autoplay fiasco, which I'll discuss - so bearing in mind neither of these things are a thing</p>
            <p>But actually there's some really great examples of audio just being used on plain ol' websites.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/futureLibrary.mp4">
          <!-- future library -->
          <h4>futurelibrary.no</h4>
          <aside class="notes">
            <p>This is my favourite, this is a project from Norway called future library, where they're growing a forest and getting authors to write books for every tree and every year.</p>
            <p>Sounds are playing throughout, but beautiful & well thought out even mute fades it out</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/86years.mp4">
          <!-- portfolio -->
          <h4>86andahalfyears.com</h4>
          <aside class="notes">
            <p>This is 86 and half years. A story website about the musings of an 86 1/2 yesr old man. But presented so excellently.</p>
            <p>None of the sounds on these websites are intrusive, they enhance the experience, these aren't websites you flick to, or just read, you discover them. There is a place for audio here.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/abletonSite.jpg">
          <!-- ableton learn music -->
          <h4>learningmusic.ableton.com</h4>
          <aside class="notes">
            <p>The web is connectivity, information - what better use than education.</p>
            <p>Ableton, who make music software & instruments, launched this website giving users an overview to learn music.</p>
            <p>Sure the subject matter is audio, but without the extensive functionality of the audio api this wouldn't be possible.</p>
            <p>So how do we create experiences like these?</p>

          </aside>
        </section>


        <!-- <section data-background-color="#8c4c6f" data-background-image="media/roland808.png">
          <aside class="notes">
            <p>There's this guy - Gregor Adams - he built an roland 808 to celebrate 808 followers on codepen, that was cool. And it's not just him, there's a growing trend I mean there are all these</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/novation.png">
          <aside class="notes">
            <p>synth</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/html909.png">
          <aside class="notes">
            <p>the</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background="media/viktor.png">
          <aside class="notes">
            <p>There are all these fabulous things being built with the web audio api</p>
            <p>But for now, back to audio... web audio. I mean look at this where do you even begin, it's big, it's complicated, you have to have a background in audio to begin to understand it.</p>
            <p>Let's take a whistle stop tour. And here in lies a basic coding lesson for a friday morning.</p>
          </aside>
        </section> -->


        <!-- the thing about coding is you can make what you want - you don't *have* to copy something that exists -->

        <!-- might do people started replicating synths - then do weird examples - keep why the web for the end -->

        <section data-background-color="#8c4c6f">
          <h1>Digital Audio</h1>
          <h4>A little lesson</h4>
          <aside class="notes">
            <p>I'm sure everyone here is aware sound travels through meaterial as waves.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="play-sin">
          <h1>Digital Audio</h1>
          <svg id="wave-graph"></svg>
          <aside class="notes">
            <p>[d] You've probably seen a dipiction of a sound wave that looks a little something like this - this is what we call a sine wave, it's a nice pure wave, a nice pure sound. like 'd'</p>
            <p>On the x axis is time and the y axis is amplitude, or volume.</p>
            <p>In reality, sounds aren't likely to be this pure - as I'm talking to you - the sound my voice is more distorted - more jaggy wave.</p>
            <p>Now what we do when we record this digitally, is we take the amplitude value at a given time, we record that and that's what we're interpreting when we're playing it back.</p>
            <p>Common rate is 44.1 khz - means taking 44,100 samples per second. Just numbers.</p>
            <p>Let's begin - super code heavy</p>
          </aside>
        </section>


        <!-- create new audio api - recording studio -->
        <section data-background-color="#8c4c6f">
          <h1>Audio Context</h1>
          <pre><code class="js">const context = new AudioContext();</code></pre>
          <aside class="notes">
            <p>So let's begin - the first thing we need to do...</p>
            <p>Here I'm creating an instance of the audio context to be used within my application - I only need to do this once, this is the audio api. It gives me all the methods I'm going to need in endless supply.</p>
            <p>The context is sort of the area where everything happens.</p>
            <p>Think of it like a recroding studio. Instruments, mixing desks, effects.</p>
            <p>prefix still needed in safari everyone</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
        <h1>Loading Sounds</h1>
        <pre><code data-trim class="js">// DOM (audio, video element)
const mediaSource = context.createMediaElementSource(element);

// Streams (data, camera, mic)
const streamSource = context.createMediaStreamSource(stream);

// Buffer (file, data)
fetch('soundFile.mp4')
  // read into memory as array buffer
  .then(response => response.arrayBuffer())
  // turn into raw audio data
  .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
  // then play (see https://jakearchibald.com/2016/sounds-fun/)
          </code></pre>
          <aside class="notes">
            <p>Once you have that, you need some sounds.</p>
            <p>Let's start with loading sounds - on a website this is important.</p>
            <p>There are three main ways of loading sounds into this context.</p>
            <p>buffers are containers data - samples. sample rate. create your own. Files are compressed, mp3, m4a, FLAC.</p>
            <p>With the top two we by pass the buffer stuff, but there's no preload - when we fetch the file in the last method we load it into memory and get retreive it at any time. As a rule top one for not many and long tracks. Middle for streams, last for lots of short sounds.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
        <h1>Play Sounds</h1>
        <pre><code data-trim class="js">// connect to output
source.connect(context.destination);

// start our sound!
source.start();
          </code></pre>
          <aside class="notes">
            <p>Once you've got your sound we need to play it. This means connect it to the speakers and set it to play.</p>
            <p>There's a couple more destinations, speakers are default. There's stream destination using MediaStream API, so you can broadcast to peers with Web RTC, or save to file, or you can collect the data in a buffer.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="play-arps">
        <h1>Play Sounds</h1>
        <button data-sound="play-arps">Arps</button>
          <aside class="notes">
            <p>[q] Now using the code that we have just seen, I've done this. I've got a sound, I've loaded it into a buffer, attached it to an event listener so I can set it to play when the button is pressed.</p>
            <p>Great</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/aGraph1.png" data-state="stop-arps">
        <h1>Audio Graph & Nodes</h1>
        <!-- picture of graph here -->
          <aside class="notes">
            <p>So this is where I can start to talk about nodes.</p>
            <p>So this is a representation of what we have just created. This is what we call an audio graph. So far a source and destination. These boxes you can see joined together we call nodes and as we add more effects we will add more nodes to this graph.</p>
            <p>Let's say we want to add mute functionality - we can do that with a gain node.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/mute.jpg" class="lists">
          <div class="list-left">
            <h2>Mute 👍</h2>
          </div>
          <div class="list-right">
            <h2>No mute 👎</h2>
          </div>
          <!-- mute controls -->
          <aside class="notes">
            <p>Mute is important on the internet</p>
            <p>If we look back at our previous examples, forest does this well, 86years not so mcuh</p>
            <p>Regardless we can add that - there's a gain node</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
        <h1>Mute: Gain Node</h1>
        <pre><code data-trim class="js">// create gain node
const gainNode = context.createGain();

// set value
gainNode.gain.value = 0;

// connect our nodes together
source.connect(gainNode).connect(context.destination);

source.start();
          </code></pre>
          <aside class="notes">
            <p>What we do is create one...</p>
            <p>This controls volume. 0 value is nothing, 1 value is normal. 0.5 half. By setting it to 0 it will mute our audio. We can set this value to anything.</p>
            <p>Need to connect it.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="mute-arps">
        <h1>Mute Sounds</h1>
        <button data-sound="arps" data-mute="undef">Arps</button>
          <aside class="notes">
            <p>[w] Now using the code that we have just seen, I've done this. I've got a sound, I've loaded it into a buffer, attached it to an event listener so I can set it to play when the button is pressed.</p>
            <p>Great</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/aGraph2.png">
        <h1>Our Audio Graph</h1>
        <!-- picture of graph here -->
          <aside class="notes">
            <p>Going back to our audio graph - this is what it looks like now. See it has our effect node in the middle, our gain node.</p>
          </aside>
        </section>

        <!-- portfolio example -->
        <!-- volume, anything else? Timing - jakes article - library -->

        <!-- <section data-background-color="#8c4c6f">
          <h1>Alter sounds</h1>
          <pre><code data-trim class="js">// even out velocity
var compressor = context.createDynamicsCompressor();
// set values threshold, knee, ratio, reduction, attack, release

// delay sound
const delay = context.createDelay(5.0);
          </code></pre>
          <aside class="notes">
            <p>Here are some other simple nodes we can use to modify sounds.</p>
            <p>Ear is a clever thing, it can here very quiet sound & very loud sounds. It evens them out for you. It's a very good dynamic compressor.</p>
            <p>Panner takes into account distance, orientation adn 3D space. There's a whole bunch of params to set for this one - I strongly suggest looking at the docs.</p>
          </aside>
        </section> -->

        <section data-background-color="#8c4c6f" data-background-image="media/using.png">
        <h1>MDN Demo: Using Web Audio API</h1>
        <!-- <h2>https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API</h2> -->
          <aside class="notes">
            <p>There is a demo on MDN docs called Using Web Audio API and it goes through all these things</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/confetti.png">
        <h1>New Thing! Autoplay Policy</h1>
        <blockquote><h3>"Create or resume context from inside a user gesture"</h3></blockquote>
          <aside class="notes">
            <p>OK so the autoplay policy. This is a discussion with browsers to combat the ugly things that happen onload in a browser. Videos, load noises, flashing animation.</p>
            <p>I think there's a long way to go and a proper specification needs to be reached, there's only really one article on Chrome developers to go on, but it goes a little something like:</p>
            <p>Create or resume...</p>
            <p>When you create the context it has a state - which is suspended until user interaction</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
          <h1>Resuming Context</h1>
          <pre><code data-trim class="js">button.addEventListener('click', function() {

  // check if context is in suspended state (autoplay policy)
  if (audioCtx.state === 'suspended') {
      audioCtx.resume();
  }

  // now you can play things

}, false);
          </code></pre>
          <aside class="notes">
            <p>Here is a simple example - the button is an html element and on click event we're testing to see if the context is suspended if it is we just resume it.</p>
            <p>So now that we've got sound, what can we do with it. THere's so much, it is the web after all. Information, education!</p>
          </aside>
        </section>


        <section data-background-color="#8c4c6f" data-background-image="media/gamesvr.jpg">
        <h1>Web GL</h1>
        <h2>Games & XR</h2>
        <!-- picture of graph here -->
          <aside class="notes">
            <p>I have put these in the same bracket - gaming, augmented reality, virtual reality... why?</p>
          </aside>
        </section>


        <!-- panning, spatialisation, sound spriting -->
        <section data-background-color="#8c4c6f">
          <h1>Spatialisation</h1>
          <pre><code data-trim class="js">// create & set listener node
const listener = context.listener;

listener.positionX.value = window.innerWidth/2;
listener.positionY.value = window.innerHeight/2;
listener.positionZ.value = 295;

// create & set panner node
const panner = new PannerNode(audioCtx, {
  panningModel: pannerModel,
  distanceModel: distanceModel,
  positionX: positionX,
  positionY: positionY,
  positionZ: positionZ,
  orientationX: orientationX,
  orientationY: orientationY,
  orientationZ: orientationZ,
  refDistance: refDistance,
  maxDistance: maxDistance,
  rolloffFactor: rollOff,
  coneInnerAngle: innerCone,
  coneOuterAngle: outerCone,
  coneOuterGain: outerGain
})
          </code></pre>
          <aside class="notes">
            <p>Something we call spatialisation, I'm making sound, person listing, I move, sound moves. This emulates it.</p>
            <p>This is the aptly named panner node.</p>
            <p>3D sound scape to work with.</p>
            <p>Create sound source - where sound is coming from and a listener, where it is picked up from.</p>
            <p>We can make sounds appear as if they are infront or you, above you, to the left to the right.</p>
            <p>Cones are like lights - ambient and spotlight.</p>
            <p>PROPERTIES! on SOURCE</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/confetti.png">
        <h1>New Thing! Classes</h1>
        <h4>You can create a node with class based syntax</h4>
          <aside class="notes">

          </aside>
        </section>

        <!-- VR example? or phone -->
        <section data-background-color="#8c4c6f">
          <h1>MDN Docs: Audio Spacialization</h1>
          <p data-height="600" data-theme-id="1345" data-slug-hash="MqayoK" data-default-tab="result" data-user="Rumyra" data-pen-title="Boombox: Spacialisation" class="codepen">See the Pen <a href="https://codepen.io/Rumyra/pen/MqayoK/">Boombox: Spacialisation</a> by Rumyra (<a href="https://codepen.io/Rumyra">@Rumyra</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
          <aside class="notes">
            <p>A frame?</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/harry.png">
          <!-- portfolio -->
          <h4>my.pottermore.com</h4>
          <aside class="notes">
            <p>Can't see yourself using it?</p>
            <p>The latest harry potter site - for pottermore - integrates 3d on the web (web gl) and thus environment sound effects along side background music</p>
            <p>No one seems to mind if it's 3D right :)</p>
          </aside>
        </section>

        <!-- phaser -->
        <section data-background-color="#8c4c6f" data-background-image="media/threea.jpg">
          <h1>three.js & A-Frame</h1>
          <aside class="notes">
            <p>Both three.js and a-frame include this panner functionality. So you can position audio within your 3d space when using those libraries.</p>
            <p>Why? Let's go back to the why... the obvious one the one you usually see but it's really over whelming - instruments.</p>
            <p>Synths, drum machines, sequencers...</p>
            <p></p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/block.mp4">
          <aside class="notes">
            <p>This is blokdust. Built by Luke Twyman, Luke Phillips and Edward Silverton in Brighton.</p>
            <p>It completely reinvents the interface of a synth - which is another thing the web empowers us to do.</p>
            <p>It's well mental. A beautiful interface for a synth - you just pull things in, sound inputs, add effects, chain them together and output them. You can add controls.</p>
            <p>Note this interface - it'll be important later.</p>
            <p>So how do you make sounds...</p>
          </aside>
        </section>

        <!-- But what if you do want to create your own sounds, or make your own sound machine - 4th way -->
        <section data-background-color="#8c4c6f" data-state="osc">
        <h1>Make Sounds</h1>
        <pre><code data-trim class="js">// waveform
const oscillator = context.createOscillator();
oscillator.type = 'triangle';
oscillator.frequency = 440;

// custom waveform
var wave = context.createPeriodicWave(real, imag, constraints);
oscillator.setPeriodicWave(wave);
          </code></pre>
          <aside class="notes">
            <p>[e] Instead of loading sounds, like we saw before, we can create them. There's an osciallator node. The sin wave you saw ealier, this can create one of those.</p>
            <p>It can also create a number of default waves (specifically ones that are easy to generate) - square, triangle and sawtooth.</p>
            <p>You can even make your own wave form to be generated. The PeriodicWave interface defines a periodic waveform that can be used to shape the output of an OscillatorNode.</p>
            <p>This sounds a bit like this 'e'</p>
          </aside>
        </section>

        <!-- <section data-background-color="#8c4c6f">
        <h1>Oscillator</h1>
        <button data-sound="osc">Oscillator</button>
          <aside class="notes">
            <p>This is an oscillator - it doesn't really sound like much, but if we change a few params and add a gain like we did earlier we can do some fun stuff with it.</p>
            <p>Great</p>
          </aside>
        </section> -->

        <section data-background-color="#8c4c6f">
        <h1>Built in stuff</h1>
        <pre><code data-trim class="js">// jump frequency down
oscillator.frequency.exponentialRampToValueAtTime(10,
  context.currentTime+1);

// jump volume down too!
gainNode.gain.exponentialRampToValueAtTime(0.001,
  context.currentTime+0.9);
          </code></pre>
          <aside class="notes">
            <p>These properties we have on these nodes are of a type `audio param`</p>
            <p>The audio api comes with some nice methods use on parameters - here's a good one - I use it commonly, so I wanted to share it.</p>
            <p>exponential ramp to value at time</p>
            <p>changes the value of the node at a set time - use it on frequency of osc AND if we create a gain node before, change volume</p>
            <p>also linear value at time method. Exponential ramp is curve & nicer to hear.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="laser">
        <h1>Laser</h1>
        <button data-sound="laser">Laser</button>
          <aside class="notes">
            <p>[t] So by simply adding a bit of built in functionality - boom we have a laser. With an oscillator.</p>
          </aside>
        </section>

        <!-- maybe put kick example in here -->

        <!-- <section data-background-color="#8c4c6f" data-background-image="media/tuna.png" data-transition="none">
          <h1>Tuna</h1>
          <aside class="notes">
            <p>Tuna - sound effects library. Useful for games.</p>
            <p>The other way to create sounds is to create your own data for a buffer rather than an oscialltor.</p>
          </aside>
        </section> -->

        <section data-background-color="#8c4c6f" data-state="white">
        <h1>Buffers</h1>
        <pre><code data-trim class="js">// make your own!
const node = context.createBufferSource(),
  buffer = context.createBuffer(channels, frameCount, sampleRate),
  data = buffer.getChannelData(0);

for (var i = 0; i < 4096; i++) {
 data[i] = Math.random();
}

node.buffer = buffer;

// thanks http://www.justgoscha.com/programming/2014/04/08/creating-dynamic-audiobuffers-with-webaudio.html
          </code></pre>
          <aside class="notes">
            <!-- play noise here? -->
            <p>[g] That audio buffer we passed the file data into earlier, to load the file. We don't have to load a file into a buffer, we can create that data ourselves. We know now it's just numbers.</p>
            <p>The loop you see in the code here creates numbers that when passed into the buffer and played play white noise.</p>
            <p>Are you ready it doesn't sound great. </p>
            <p>Pink noise is better than white noise, it's softer, it reduces the harsher tones, we can use a function for that, or we can use another of the built in methods the api gives us.</p>
            <p>And this is where we can really start to have some fun with the other filter nodes the api gives us.</p>
          </aside>
        </section>


        <section data-background-color="#8c4c6f" data-state="pink">
          <h1>Alter sounds</h1>
          <pre><code data-trim class="js">// filter/accentuate frequencies
const biquadFilter = context.audioCtx.createBiquadFilter();
biquadFilter.type = "lowpass";
biquadFilter.frequency.value = 500;

// manipulate waveform
const shaper = context.createWaveShaper();
shaper.curve = someCraMathsFunction();

// repeat buffer data
const reverb = context.createConvolver();
// fetch file to use as buffer or make here ...
reverb.buffer = bufferedFile;
          </code></pre>
          <aside class="notes">
            <p>[h] Here are some ways to alter sounds - remember these can be used on any nodes.</p>
            <p>Biquad filter - algorithms on data - to enhance frequencies or filter them out. There's lots of types. High pass, low pass, high shelf, low sheif, peaking</p>
            <p>Defines an array of numbers to multiply to the sample</p>
            <p>often generated by recording a percussive noise or frequency sweep in a space. Does this all sound convoluted? Well, technically, it is!</p>
            <p>If we put a bandpass type biquad filter on the white noise it now sounds like this:</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="snare">
        <h1>Snare</h1>
        <button data-sound="snare">Snare</button>
          <aside class="notes">
            <p>[y] Then if we do what we did before and add a little gain drop odd - boom, we got a snare!</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/confetti.png">
        <h1>New Thing! IIR Filter</h1>
        <h4>Super crazy Maths things</h4>
          <aside class="notes">
            <p>Infinite impulse response filter - 2 types in digital signal processing.</p>
            <p>the biquad is a specific type or iir.</p>
            <p>It gives you way more power and flexibility - but, you're looking at doing polynomial maths - so it's not for the faint hearted.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/iir.png">
        <h1>MDN Docs: Using IIR FIlters</h1>
        <!-- picture of graph here -->
          <aside class="notes">
            <p>Someone has written an article and a demo!</p>
            <p>It's on MDN docs!</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
          <h1>Timing</h1>
          <pre><code class="js">const now = context.currentTime</code></pre>
          <aside class="notes">
            <p>See loads of code!</p>
            <p>Timing is super important in audio. Whether you're just loading in and playing sounds, or you do want to take it further.</p>
            <p>In web audio we have this currentTime property on the context itself. It accesses the audio subsystems hardware clock.</p>
            <p>The web audio Api has a currentTime property. This starts when you instigate the api right at the start, but it uses system hardware for the clock and can be used as a benchmark all the way through. So let's say we load in a hi hat sound. We can simple create a loop and using currentTime, we can play the hi hat four times equally ina loop.</p>
            <p>Music works like this, it has beats and these are mad eup into bars. Sometimes you have 4 beats in a bar, sometimes 3, sometimes two, sometimes 8 half beats. It's all just maths.</p>
            <p>Long story short - we don't have to use javascript timing functions - which are dodgy.</p>
            <p>Gives u benchmark throughout</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="hi-hat">
        <h1>Hi Hat</h1>
        <button data-sound="hh">Hi Hat</button>
          <aside class="notes">
            <p>[u] Then if we do what we did before and add a little gain drop odd - boom, we got a snare!</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/confetti.png">
        <h1>New Thing! Audio Worklets</h1>
        <h4>Processing off the main thread</h4>
          <aside class="notes">
            <p>They're kinda here</p>
            <p>So this takes all that number crunching off the main thread too - there's a few bits and bobs being done at the moment in regards to number crunching, better syntax</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
          <h1>Audio Worklets</h1>
          <!-- <p> googlechromelabs.github.io/web-audio-samples/</p> -->
          <pre><code class="js">let worklet = new AudioWorkletNode(context, 'worketModule');
source.connect(worklet).connect(context.destination);</code></pre>
          <aside class="notes">
            <p>They're kinda here</p>
            <p>So this takes all that number crunching off the main thread too - there's a few bits and bobs being done at the moment in regards to number crunching, better syntax</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/step.png">
        <h1>MDN Docs: Advanced Techniques</h1>
        <!-- picture of graph here -->
          <aside class="notes">
            <p>Someone has written an article and a demo!</p>
            <p>It's on MDN docs!</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/fistBump.gif">
          <aside class="notes">
            <p>Well done everyone - fist bump!</p>
            <p>Cos we haven't seen enough code right!</p>
            <p>So wait - I think we might have just created a sound, a laser, and a drum kit... it's almost like we've created a mini synth, in 35 minutes. Now I have 10 to control it!</p>
            <p>Super cool great - but I haven't shown you anything you can't do with hardware, or already existing software</p>
          </aside>
        </section>


        <section data-background-color="#8c4c6f">
          <h1>MIDI</h1>
          <aside class="notes">
            <p>The web midi api is a different api altogether and I will explain why...</p>
            <p>This is literally my favourite subject</p>
            <p>This is not MIDI...</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/cameronsworld.mp4">
          <aside class="notes">
            <p>Real website - camerons world</p>
            <p>A website playing background music - the modern version of which is something like this:</p>
            <p>bgsound isn't a tag anymore - we don't have to deal with this</p>
            <p>Then there's the modern day equivilant.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/controllers.jpg" data-transition="none">
          <aside class="notes">
            <p>We can hook up any MIDI instrument or controller to our browser - seriously</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
          <h1>Web MIDI API</h1>
          <h2>[144, 60, 100]</h2>
          <pre><code data-trim>// call requestMIDIAccess
navigator.requestMIDIAccess({ sysex: false }).then(onMIDISuccess, onMIDIFailure);

// on success of MIDI device recognised
function onMIDISuccess(midiControl) {
  var MIDI = midiControl;

  // log each input data
  MIDI.inputs.forEach(function (input) {
    console.log(input.onmidimessage.data)
  }
}
          </code></pre>
          <aside class="notes">
            <p>You make sure it’s avail, listen for attached device, when plugged in you can receive these afore mentioned messages. All I’m doing here is logging those messages - you can do whatever you want with them. Notice the sysex false - this is related to system messages and I will get back to that in a moment.</p>
            <p>Now there’s a window of opportunity - there’s plenty of stuff we can start coding with that!</p>
            <p>But what are these values?</p>
            <p>the first byte 144 is the message type and channel, 144 is 90 in hex and the 9 says it's a 'Note on' message and the 0 is the channel number. A 'Note on' message has two data bytes, the first is the 'key number' which I'm guessing is the note number, so 60 would be C the second is 'note on velocity' and this has a value of 100, - 0-127 (I'm guessing this means the rate at which the note is turned on)</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f">
          <h1>Demo</h1>
          <iframe height='800' scrolling='no' title='Web MIDI API Example' src='//codepen.io/Rumyra/embed/NxdbzL/?height=300&theme-id=1345&default-tab=result' allow="midi *;" frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/Rumyra/pen/NxdbzL/'>Web MIDI API Example</a> by Rumyra (<a href='https://codepen.io/Rumyra'>@Rumyra</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
          <aside class="notes">
            <p>So if I plug in a MIDI instrument or controller and instigate the web MIDI api in my brwoser - this is the data you'll get</p>
            <p>You should all see a keyboard - one of the most common MIDI enabled instruments. Now this is the data that the web MIDI api passes back to us when a MIDI device is plugged in. So let's take a look at the code.</p>
            <p>SHUT THESE NOTES DOWN!</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="midi">
        <div id="synth">
          <button data-sound="m-arps">Arps</button>
          <button data-sound="m-laser">Laser</button>
          <button data-sound="m-kick">Kick</button>
          <button data-sound="m-snare">Snare</button>
          <button data-sound="m-hh">Hi Hat</button>
        </div>
          <aside class="notes">
            <p>That means I can trigger those sounds I made with these events</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/madeon.png">
          <h4>madeon.fr/adventuremachine</h4>
          <aside class="notes">
            <p>I mean god forbid you build a website that you can control with a midi controller</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-image="media/circuit.png">
          <h4>components.novationmusic.com</h4>
          <aside class="notes">
            <p>This is Novations component software - novation make hardware</p>
            <p>It works online and runs in the browser and updates & stores, samples & settings for their Novation Circuit, which is one of their syths.</p>
            <p>All made possible with web midi.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-background-video="media/typeMidi.mp4" data-state="no-visuals">
          <h4>Laurie Cape</h4>
          <aside class="notes">
            <p>or in fact use it for meaningless things like this guy who's literally just trying out font styles</p>
            <p>and with all these things I wouldn't even dare think about how there's no piece of software on the market that satisfy's both your making music and playing live needs so you build your own - which is exactly what Matt McKegg did</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="vis_canvas">
          <aside class="notes">
          </aside>
        </section>


        <!-- <section data-background-color="#8c4c6f" data-background-image="media/piano.jpg">
          <aside class="notes">
            <p>And there's not just websites or codepens</p>
            <p>This is piano - an art installation built with three.js and p5.js by Patrik Hubner - it harnesses web audio and web midi.</p>
            <p>An audio visualisation is displayed in a window and MIDI controller used to by passers by to interact with it.</p>
          </aside>
        </section> -->


        <section data-background-color="#8c4c6f" data-state="no-visuals">
          <h1>Audio Design</h1>
          <p>in</p>
          <h1 style="border-top:2px solid #efefef;border-bottom:none;">Web Design</h1>
          <aside class="notes">
            <p>I know that the demos here aren't really what you'd put on a site. Although pls someone build a site with a laser button. But I do hope the techniques demonstrated are ones to use and really get you started with the API and help you understand what's possible and why.</p>
            <p>My friend said to me recently the web we're in is like being in a mall - a shopping centre... we're bombarded with adverts, aggressive lights, moving parts _all_ the time. Of course we think audio is intrusive</p>
            <p>We need more parks, more oceans, more forests.</p>
            <p>Think about sound - think about it as part of design, it can be something simple (forms), animation is always enhanced - it's 2017, we don't need horrible load blaring music when we land on a page, we have all this power at our fingertips to make it really mature</p>
            <p>We're so quick to pick up grid systems, animation apis, 3d, games, vr on the web, all great things. (why we have it) But we have it now! We have all this power.</p>
            <p>When it comes to something as simple as ear magic we're reluctant and dismissive. Please think twice, I think we can be thoughtful - start a new wave of sound in our code.</p>
          </aside>
        </section>

        <section data-background-color="#8c4c6f" data-state="no-visuals">
          <h1>Go Forth&nbsp;&nbsp;|&nbsp;&nbsp;Make Noise</h1>
          <h1>Ruth John</h1>
          <h1>@Rumyra</h1>
          <p>Thank You Very Much</p>
          <aside class="notes">
            <p>Thank you very much, I'm Ruth John</p>
            <p>All these examples you've seen are on codepen as part of codevember</p>
            <p>Go have a relax and I hope you had a lovely conference!</p>
            <p>Don't be narrow minded, be open minded.</p>
          </aside>
        </section>
        <!-- conslusion -->
        <!--  -->
        <!-- support for music file types -->


<!-- THIS IS IMPORTANT "0x" + x.toString(16); -->
      </section>
    </div></div>

    <div id="screen"></div>

<script src="reveal/plugin/notes/notes.js"></script>
<script src="reveal/plugin/highlight/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<script src="scripts/talkEvents.js"></script>

<script type="text/javascript">
// Reveal~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


</script>


</body>
</html>