bGQzmVp

bgqzmvp.markdown

bGQzmVp

A Pen by itsbrex on CodePen.

License.

index.html

<script src="https://unpkg.com/tone@next"></script>
<script src='https://tboie.github.io/webaudio-tinysynth/webaudio-tinysynth.js'></script>

<button id="btnPlay">START</button>

script.babel

//init TinySynth without using default audiocontext
var tinySynth = new WebAudioTinySynth({ internalcontext: 0 });

//use ToneJS AudioContext and connect to Tone.Master
//Tone.Master could be replaced with other components/effects
Tone.connect(tinySynth.setAudioContext(Tone.context), Tone.Master);

//set channel instrument program (0-127)
tinySynth.send([0xc0, 65]);

var noteDuration = Tone.Time("32n");
var seq = new Tone.Sequence(
  function (time, note) {
    //note on
    tinySynth.send([0x90, note, 100], time);
    //note off
    tinySynth.send([0x80, note, 0], time + noteDuration);
  },
  [60, 62, 64, 66, 68, 70, 72, 74, 73, 69, 68, 67, 62, 60, 59, 56],
  "16n"
).start(0);

btnPlay.onclick = function (e) {
  if (Tone.Transport.state === "stopped") {
    Tone.Transport.position = 0;
    Tone.Transport.start();
    btnPlay.innerHTML = "STOP";
  } else {
    Tone.Transport.stop();
    btnPlay.innerHTML = "START";
  }
};

style.css

html {
  background-color: #000;
}
#btnPlay {
  width: 200px;
  height: 75px;
  border-radius: 20px;
}