Learning to Read Music with the Web MIDI API

gist-reveal.it-slides.html

<section data-background-transition='zoom' data-transition='concave'  data-state='blackout'>
  <h2>Learning to Read Music with the</h2>
  <h1>Web MIDI API</h1>
  <h3>Node+JS Interactive 2019</h2>
  <br/>
  <h3 class='fragment grow'><a style='color:deepskyblue;' href='http://bit.ly/web-midi-api'>http://bit.ly/web-midi-api</a></h3>
</section>

    <section style="color:white;" data-transition='concave' data-background-transition='fade' id='presented-by'>
	    <p style="color:white;">presented by&hellip;</p>
      <div class='fragment fade-left' style='width:45%; float:left;'>
        <p><a href="http://twitter.com/jankleinert"><img alt="Jan Kleinert" src="https://pbs.twimg.com/profile_images/1087055426267402240/BTeh6LLK_400x400.jpg" style="width:70%"/></p>
        <p><a href="http://twitter.com/jankleinert">Jan Kleinert @jankleinert</a></p>
      </div>
      <div class='fragment fade-up' style='width:10%;float:left;margin-top: 13%;font-size: 250%;font-weight: bold;color:white;'>&amp;</div>
      
      <div class='fragment fade-right' style='width:45%; float:left;'>
        <p><a href="http://twitter.com/ryanj/"><img alt="ryanj" src="http://ryanjarvinen.com/images/ryanj-mestrefungo-com.gif" style="width:70%" /></p>
        <p><a href="http://twitter.com/ryanj/">Ryan Jarvinen @ryanj</a></p>
      </div>
  <br/>
     </section>
<section data-background-transition='zoom' data-transition='concave' id='how-did-we-get-here' data-background-image="https://jankleinert.com/assets/images/practicing-piano.jpg">
  

  
</section>
<section data-transition='concave'>
	<h2><a href="https://www.cameronsworld.net/" target="_blank" style="color: white;">MIDI?</a></h2>
</section>
<section id='midi-no-sound' data-transition='concave' >
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Speaker_off.svg/500px-Speaker_off.svg.png" style="border: none; background: none; box-shadow: none;">
</section>
<section id='midi' data-transition='concave' data-background-image="https://cdn.sparkfun.com/assets/learn_tutorials/4/0/8/spec-book.jpg">
	<h2 style="color: black;" >MIDI</h2>
	<p style="color: black;" class="fragment">Musical Instrument Digital Interface</p>
	<p style="color: black;" class="fragment">A technical standard since the '80s</p>
	<p style="color: black;" class="fragment">For communication between digital musical instruments, audio devices, etc.</p>
	
</section>

<section id='midi-messages' data-transition='concave' >
	<h2>MIDI Messages</h2>
	<p class="fragment">Channel Voice Message</p>
	<p class="fragment">Note On (144) </p>
	<p class="fragment">Note Number (0 - 127) </p>
	<p class="fragment">Velocity</p>
	
</section>

<section data-transition='concave'>
	<h2>Web MIDI API</h2>
	<p class="fragment"><img src="https://media.giphy.com/media/Hcw7rjsIsHcmk/source.gif"  style="height: 250px; border: gray"/></p>
	<p class="fragment">+</p>
	<p class="fragment"><img src="https://media.giphy.com/media/ule4vhcY1xEKQ/source.gif"  style="height: 250px; border: gray"/></p>
</section>


  <section data-transition='concave' id='web-midi-is-supported'>
	  <h3>Does this browser support the Web MIDI API?</h3>
    <pre ><code contenteditable>
if (navigator.requestMIDIAccess) {
    console.log('WebMIDI is supported in this browser.');
    navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
} else {
    console.log('WebMIDI is not supported in this browser.');
}
    </code></pre>
  </section>
	
	  <section data-transition='concave' id='can-i-use'>
	  <h3>caniuse.com</h3>
		  <img src="https://jankleinert.com/assets/images/caniuse.png"/>
  </section>

 <section data-transition='concave' id='alternatives'>
	  <h3>An alternative - JZZ, a MIDI library for Node.js and web-browsers</h3>
	 <p>JZZ.js: <a href="https://www.npmjs.com/package/jzz">https://www.npmjs.com/package/jzz</a></p>
	 
  </section>
	
  <section data-transition='concave'>
    <h3>Draw the first note and get MIDI inputs</h3>
    <pre ><code contenteditable>
function onMIDISuccess(midiAccess) {
    shuffleArray(level1Notes);
    drawNote(level1Notes[noteIndex]);
    
    var inputs = midiAccess.inputs;
    var outputs = midiAccess.outputs;

    for (var input of midiAccess.inputs.values()) {
        input.onmidimessage = getMIDIMessage;
    }
}
    </code></pre>
    <pre ><code contenteditable>
var level1Notes = [60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72];
</code></pre>  
  </section>
	
  <section data-transition='concave'>
<h3>Listen for the noteOn command</h3>
<pre ><code contenteditable>
function getMIDIMessage(message) {
    var command = message.data[0];
    var note = message.data[1];
    var velocity = message.data[2];

    switch (command) {
        case 144: // noteOn
            document.querySelector('.note-info').textContent = 'Command: ' + command +
                ' , Note: ' + note + ' , Velocity: ' + velocity;
            noteOnListener(note);
            break;
    }
}
</code></pre>   
	  
  </section>
  <section data-transition='concave'>
    <h3>noteOnListener</h3>
    <p class='fragment'>Checks if the note that was played was the correct note, turns it green or red</p>
    <p class='fragment'>After 1.5 seconds, resets and displays the next note</p>
	  <p class='fragment'>Displays the score once all notes have been played</p>
  </section>


<section data-transition='concave'>
	<h2>Demo Time!</h2>
<p class='fragment'><a href="https://noteon-demo-getyournoteson.b9ad.pro-us-east-1.openshiftapps.com/" target="_blank">https://noteon-demo-getyournoteson.b9ad.pro-us-east-1.openshiftapps.com/</a></p>
</section> 
<section data-transition='concave'>
	<h2>Want to learn more?</h2>
	<p><a href="https://github.com/jankleinert/get-your-notes-on">https://github.com/jankleinert/get-your-notes-on</a></p>
	<p><a href="https://www.smashingmagazine.com/2018/03/web-midi-api/">Getting Started with the Web MIDI API</a></p>
	<p><a href="https://www.midi.org/developer-web-midi-info">Web MIDI info from midi.org</a></p>
	<p><a href="http://bit.ly/web-midi-api">http://bit.ly/web-midi-api</a></p>
</section>