JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="https://unpkg.com/tone"></script>
    <script src="https://unpkg.com/@tonejs/ui"></script>
    <tone-demo>
      <tone-play-toggle></tone-play-toggle>
    </tone-demo>

JavaScript

var synth = new Tone.MembraneSynth().toMaster();

      //create a loop
      var loop = new Tone.Loop(function(time) {
        synth.triggerAttackRelease("C1", "8n", time);
      }, "4n");

      //play the loop between 0-2m on the transport
      loop.start(0).stop("2m");

      //start/stop the transport
      document
        .querySelector("tone-play-toggle")
        .addEventListener("change", e => Tone.Transport.toggle());