script2.js

function main(){
    document.addEventListener("DOMContentLoaded", () => {
        const tracksContainer = document.getElementById("tracks-container");
        const addTrackButton = document.getElementById("add-track");
        const fileInput = document.getElementById("file-input");

        function createTrack(audioFile = null) {
            const track = document.createElement("div");
            track.classList.add("track");

            const waveform = document.createElement("div");
            waveform.classList.add("waveform");

            const playhead = document.createElement("div");
            playhead.classList.add("playhead");
            waveform.appendChild(playhead);

            const playButton = document.createElement("button");
            playButton.textContent = "Play";

            const muteButton = document.createElement("button");
            muteButton.textContent = "Mute";

            const player = new Tone.Player(audioFile).toDestination();
            player.loop = true;

            let animationFrame;
            playButton.addEventListener("click", () => {
                if (player.state === "started") {
                    player.stop();
                    playButton.textContent = "Play";
                    cancelAnimationFrame(animationFrame);
                } else {
                    player.start();
                    playButton.textContent = "Stop";
                    const startTime = Tone.now();
                    const duration = player.buffer.duration;

                    function updatePlayhead() {
                        const elapsedTime = Tone.now() - startTime;
                        const progress = (elapsedTime % duration) / duration;
                        playhead.style.transform = `translateX(${progress * 100}%)`;
                        animationFrame = requestAnimationFrame(updatePlayhead);
                    }
                    updatePlayhead();
                }
            });

            muteButton.addEventListener("click", () => {
                player.mute = !player.mute;
                muteButton.textContent = player.mute ? "Unmute" : "Mute";
            });

            track.appendChild(waveform);
            track.appendChild(playButton);
            track.appendChild(muteButton);

            tracksContainer.appendChild(track);
        }

        addTrackButton.addEventListener("click", () => {
            fileInput.click();
        });

        fileInput.addEventListener("change", (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const audioUrl = e.target.result;
                    createTrack(audioUrl);
                };
                reader.readAsDataURL(file);
            }
        });
    });


    const osc = new Tone.Oscillator().toDestination().start();
    // a scheduleable signal which can be connected to control an AudioParam or another Signal
    const signal = new Tone.Signal({
        value: "C4",
        units: "frequency"
    }).connect(osc.frequency);
    // the scheduled ramp controls the connected signal
    signal.rampTo("C2", 4, "+0.5");
    console.log(signal);

}
main();