<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - MidiMessaging</title>
  
  
  
  
<style>
html,
body {
  margin: 0;
  padding: 0;
}

#main,
.dash {
  display: flex;
  width: 80%;
  align-items: center;
  justify-content: center;
  margin: 10vmin auto;
  flex-direction: column;
  flex-grow: 5;
}

.dash {
  /*display:none;*/
}

span,
span > em {
  color: red;
  background: #06C7BD;
  position: relative;
  text-align: center;
}

strong,
i {
  font-weight: bold;
  font-family: "Droid Sans Mono", sans-serif;
}

em {
  font-style: normal;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  float: left;
  display: inline-flex;
  background: #efefef;
  border-radius: 60px;
  text-align: center;
  margin: 2px;
  flex-direction: column;
  overflow: hidden;
}

table {
  width: 100%;
}

td {
  text-align: center;
  width: 33%;
}

button,
p {
  width: 100%;
}

small {
  font-size: 0.5rem;
}

.slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 400px;
  height: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no">
  <div id="main">
  <h5 id="title">Lower Volume, click text, click text again to pause</h5>
  <div class="sentence">
    <p class='playMe'></p>
    <button>Change Text</button>
  </div>
</div>
<div class="dash">
  <strong></strong>
  <label for="range">Tempo
        <input id="range" type="range" class="slider" min="2" max="170" step="1" value="6"  oninput="range_disp.value = range.value"//> <output  id="range_disp"></output> </label>
  <table>
    <thead>
      <tr>
        <th>Note</th>
        <th>Frequency</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>None</td>
        <td>0</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
class midiMusic {
  constructor(base, text) {
    this.el = document.querySelector('.playMe');
    this.audioContext = window.AudioContext || window.webkitAudioContext;
    this.audio = true;
    this.osc = true;
    this.dash = document.querySelector('.dash');
    this.td = this.dash.querySelectorAll('tr')[1].children;
    this.notePanel = this.dash.querySelector('strong');
    this.position = -2;
    this.playing = false;
    this.base = base || 30;
    this.scaleSet = [];
    this.lettersl = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    this.lettersu = this.lettersl.map(e => {return e.toUpperCase();});
    this.numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    this.symbols = [' ', '-', '?', ',', '/', '.', '!'];
    this.allkeys = this.symbols.concat(this.lettersl, this.numbers, this.lettersu).join('');
    this.scale = {
      'C0': [16.35, 2109.89],
      'C#0/Db0': [17.32, 1991.47],
      'D0': [18.35, 1879.69],
      'D#0/Eb0': [19.45, 1774.2],
      'E0': [20.6, 1674.62],
      'F0': [21.83, 1580.63],
      'F#0/Gb0': [23.12, 1491.91],
      'G0': [24.5, 1408.18],
      'G#0/Ab0': [25.96, 1329.14],
      'A0': [27.5, 1254.55],
      'A#0/Bb0': [29