app.js

import { WaveSurfer } from "https://unpkg.com/wavesurfer.js";

const waveform = document.querySelector("waveform");
const audioFiles = [];

function playAudioClip(clipIndex) {
 const clip = audioFiles[clipIndex];
 waveform.waveSurfer.mute();
 waveform.waveSurfer.play();
 waveform.waveSurfer.on("audioprocess", (event) => {
    if (event.clipIndex !== clipIndex) {
      waveform.waveSurfer.pause();
      waveform.waveSurfer.mute();
    }
 });
}

function stopAudioClip() {
 waveform.waveSurfer.pause();
}

function addAudioClip(blob) {
 const id = audioFiles.length;
 audioFiles[id] = new WaveSurfer(blob, `audio ${id}`);
 waveform.append(audioFiles[id].amplitudeNode);
}

 function initWaveform() {
 const wavesurfer = new WaveSurfer({
    container: waveform.querySelector(".waveform"),
 });
 wavesurfer.on("audioprocess", (event) => {
    const clipIndex = event.clipIndex;
    if (clipIndex !== undefined) {
      const clip = audioFiles[clipIndex];
      if (event.type === "mute") {
        clip.mute();
      } else {
        clip.play();
      }
    }
 });
 return wavesurfer;
}

function initAudioClips() {
 audioFiles.forEach((clip) => {
    addAudioClip(clip);
 });
}

function main() {
    const uploadButton = document.querySelector("button");
    const audioInput = document.createElement("input");
    audioInput.type = "file";
    audioInput.multiple = "multiple";
    audioInput.accept = "audio/*";
    uploadButton.addEventListener("click", () => {
      audioInput.click();
    });
    audioInput.onchange = async () => {
      if (audioInput.files.length) {
        for (const file of audioInput.files) {
          const url = await createObjectURL(file);
          const blob = new Blob(url, { type: file.type });
          addAudioClip(blob);
        }
      }
    };
 }

 function createObjectURL(file) {
    const url = URL.createObjectURL(file);
    return url;
 }

 main();
})