I’m working on a university project that involves manipulating audio files using the Tone.js library. I’m a beginner in both music and Tone.js library, so I’m hoping for some guidance on how to achieve a specific functionality.

My goal is to allow users to dynamically change the BPM (beats per minute) of an MP3 file that is being played using a slider. I’ve set up a basic player using Tone.js and have a slider in my HTML that I’d like to use to control the BPM.

Additionally, I’m using a Tone.Recorder to record the audio output, and I have keydown event listeners to start and stop the recording. I’m also using a Tone.JCReverb effect, which I’m controlling with another slider.

My question is this:
I’ve set up an event listener for the slider to change the Tone.Transport.bpm.value based on the slider’s value. Is this the correct approach to dynamically change the BPM?

Here’s a snippet of my current code:

let player;
let recorder;
let maxDuration = 20; // Maximum recording length in seconds
let reverb;
let myBpm;

Tone.Transport.bpm.value = 120;
Tone.Transport.start();

// Initialize the recorder
recorder = new Tone.Recorder();

reverb = new Tone.JCReverb({
 roomSize: 0.8,
 wet: 0,
}).toDestination();

player = new Tone.Player("audio/piano1.mp3").chain(
 reverb,
 Tone.Destination,
 recorder
);
player.loop = true;
player.autostart = true;

document.getElementById("bpmSlider").addEventListener("input", function () {
 const bpmValue = this.value;
 Tone.Transport.bpm.value = bpmValue;
});

document.addEventListener("keydown", function (event) {
 if (event.key === "q" || event.key === "Q") {
    console.log('The "q" key is being pressed!');

    // Start recording
    recorder.start();
    // Set a timeout to stop and restart recording after maxDuration seconds
    setTimeout(() => {
      recorder.stop().then((recording) => {
        // Convert the recording to a Blob
        const blob = new Blob([recording], { type: "audio/webm" });
        // Convert the Blob to an ArrayBuffer
        blob.arrayBuffer().then((arrayBuffer) => {
          // Send the ArrayBuffer to the server
          socket.emit("audioData", arrayBuffer);
        });
      });
      // Immediately restart recording
      recorder.start();
    }, maxDuration * 1000); // Convert seconds to milliseconds

    // Ensure the player starts at a time greater than the current time
    const startTime = Tone.now() + 0.01; // Add a small delay to ensure the start time is greater
    player.start(startTime);
 }
});

document.addEventListener("keydown", function (event) {
 if (event.key === "e" || event.key === "E") {
    console.log('The "e" key is being pressed!');
    player.stop();
    // Stop recording
    recorder.stop().then((recording) => {
      // Convert the recording to a Blob
      const blob = new Blob([recording], { type: "audio/webm" });
      // Convert the Blob to an ArrayBuffer
      blob.arrayBuffer().then((arrayBuffer) => {
        // Send the ArrayBuffer to the server
        socket.emit("audioData", arrayBuffer);
      });
    });
 }
});