JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<head>
    <script src="https://cdn.jsdelivr.net/npm/tone@next/build/Tone.min.js"></script>
  </head>

  <body>
    <button id="unlock">Allow Sound</button>
    <button id="play" disabled>Toggle Loop</button>
    <button id="render" disabled>Render 5s Offline</button>
    <p>
      Rendering 5s of sound using an offline scheduleRepeat causes issues - namely a loud glitch at the start of the sequence.
    </p>
  </body>

JavaScript

const buffer = new Tone.Buffer(
      "https://tonejs.github.io/audio/casio/A1.mp3"
    );

    Tone.Transport.swingSubdivision = "16n";
    Tone.Transport.scheduleRepeat((time) => {
      handleToneTransportTick(time);
    }, "8n");

    function handleToneTransportTick(time) {
      let source = new Tone.BufferSource(buffer).toDestination();
      source.start(time + 0.25);
    }

    const render = () => {
      Tone.Offline(({
        transport
      }) => {

        let p1 = new Tone.Player(buffer).sync().toDestination() // .start(0) // .toDestination();



        transport.scheduleRepeat((time) => {
          // handleToneTransportTick(time);
          p1.start(time)
        }, "8n");

        transport.start(0.01);
      }, 5).then((buffer) => {
        console.log(buffer);
        var player = new Tone.Player(buffer).toDestination();
        player.start();
      });
    };

    let unlockButton = document.querySelector("#unlock");
    let playButton = document.querySelector("#play");
    let renderButton = document.querySelector("#render");

    unlockButton.addEventListener("click", () => {
      Tone.start();
      unlockButton.disabled = true;
      renderButton.disabled = false;
      playButton.disabled = false;
    });

    playButton.addEventListener("click", () => {
      Tone.Transport.toggle();

    });

    renderButton.addEventListener("click", render);