JSFiddle - React, Tailwind, and code Playground

by bobbyrne01

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.7.1/Tone.js"></script>
<div>
  <button id="togglePlayback">Start</button>
</div>

<div id="results">

</div>

JavaScript

var isPlaying = false;
    
      document.getElementById('togglePlayback').addEventListener('click', function() {
        isPlaying = !isPlaying;
        Tone.Transport.bpm.value = 100;
        Tone.Transport.timeSignature = "4/4";
        results.innerHTML += 'Start playing<br/>';
        results.innerHTML += Tone.Transport.bpm.value + '<br/>';
        results.innerHTML += Tone.Transport.timeSignature + '<br/>';
    
        if(isPlaying) {
          Tone.Transport.scheduleRepeat(function(time){
            var results = document.getElementById('results');
            results.innerHTML += 'Seconds: ' + Tone.Transport.getSecondsAtTime(time) + '<br/>';
            results.innerHTML += 'Ticks: ' + Tone.Transport.getTicksAtTime(time) + '<br/>';
          }, "4n");
          Tone.Transport.start();
        }
      });