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"
);
let source = null

source = new Tone.BufferSource(buffer).toDestination();

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

function handleToneTransportTick(time) {
    source.start(time + 0.25);
}
const render = () => {
    Tone.Offline(({ transport }) => {
        source = new Tone.BufferSource(buffer).toDestination();


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

        transport.start(0.2);
    }, 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);