Regions are not created for wavesurfer instances

[rioharper]

Hello! New to this whole wavesurfer business (and ts/js!). I am building a simple little data analysis app. I got this working when the directory for the audio/text files were stated outright in the code (regions generated fine), but introducing a user input really messed this all up. Basically, the wavesurfer will now load, but without any regions. Any help would be great!

import WaveSurfer from "https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js";
import RegionsPlugin from "https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js";
import Hover from "https://unpkg.com/wavesurfer.js@7/dist/plugins/hover.esm.js";
const wsregion_list = [];
const waveforms = [];
let currentWaveform = null;

const random = (min, max) => Math.random() * (max - min) + min;
document.getElementById('setFoldersButton').addEventListener('click', setFolders);


async function fetchAudioAndTextFiles() {
  try {
      const responseAudio = await fetch("/list-audio");
      const responseText = await fetch("/list-text");
      const audioFiles = await responseAudio.json();
      const textFiles = await responseText.json();
      console.log("Audio files:", audioFiles);
      console.log("Text files:", textFiles);
      return {audioFiles, textFiles};

  } catch (err) {
      console.error("Error fetching files:", err);
  }
}


async function setFolders() {
  const audioFolder = document.getElementById('audioFolder').value;
  const textFolder = document.getElementById('textFolder').value;
  
  fetch('/set-folders', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ audioFolder, textFolder })
  })
  .then(res => res.text())
  .then(message => {
    alert(message);
    // Call the fetch functions after successfully setting the folders
    fetchAudioAndTextFiles().then(async ({audioFiles, textFiles}) => {
       if (!audioFiles || !textFiles) {
          console.error("Received empty response from fetching data");
          return;
       }
       for (let i = 0; i < audioFiles.length; i++) {
          const file = audioFiles[i];
          await fetchAudioFiles(file);
          await fetchTextFiles(textFiles[i]);  // corresponding text file
       }
    });
  })
  .catch(err => {
    console.log('Error setting folders:', err);
  });
}
 


function calculateStats(lines) {
  const values = lines.map(line => parseFloat(line.split(" ")[2])).filter(value => !isNaN(value));
  const mean = values.reduce((acc, val) => acc + val) / values.length;
  const stdDev = values.length > 0 ? Math.sqrt(values.reduce((acc, val) => acc + (val - mean) ** 2, 0) / values.length) : 0;
  const median = values.sort((a, b) => a - b)[Math.floor(values.length / 2)];
  return { stdDev, median };
}

function fetchAudioFiles() {
  fetch("/list-audio")
    .then(res => res.json())
    .then(files => {
      if (!files) {
        console.error("Received empty response from /list-audio");
        return;
      }
      const tabsDiv = document.getElementById("tabs");
      const waveformsDiv = document.getElementById("waveforms");

      // Clear existing tabs and waveforms
      tabsDiv.innerHTML = "";
      waveformsDiv.innerHTML = "";

      files.forEach((file, index) => {
        // Create a tab for each file
        console.log("Creating tab for file:", file); // Debugging line
        const tab = document.createElement("div");
        tab.className = "tab";
        tab.textContent = file;
        tab.onclick = () => selectTab(index);
        tabsDiv.appendChild(tab);

        // Create a waveform div
        const waveformDiv = document.createElement("div");
        waveformDiv.className = "waveform";
        waveformDiv.tabIndex = 0; // Make it focusable
        waveformsDiv.appendChild(waveformDiv);

        // Initialize WaveSurfer
        const wavesurfer = WaveSurfer.create({
          container: waveformDiv,
          url: `/audio/${file}`,
          autoscroll: true,
          autocenter: true,
          minPxPerSec: 150,
          height: 300,
          plugins: [
            Hover.create({
              lineColor: "#ff0000",
              lineWidth: 4,
              labelBackground: "#555",
              labelColor: "#fff",
              labelSize: "11px",
            }),
          ],
        });
        console.log("created wavesurfer" + file);

        // append wsRegions to wsregion_list
        const wsRegions = wavesurfer.registerPlugin(RegionsPlugin.create());
        wsregion_list.push(wsRegions);
        wavesurfer.on("interaction", () => {
          wavesurfer.playPause();
        });

        // Reset the active region when the user clicks anywhere in the waveform
        let activeRegion = null;
        wsRegions.on("region-clicked", (region, e) => {
          e.stopPropagation(); // prevent triggering a click on the waveform
          activeRegion = region;
          region.play();
        });
        wavesurfer.on("interaction", () => {
          activeRegion = null;
        });

        // Update the zoom level on slider change
        wavesurfer.once("decode", () => {
          document.querySelector('input[type="range"]').oninput = (e) => {
            const minPxPerSec = Number(e.target.value);
            wavesurfer.zoom(minPxPerSec);
          };
        });
      });

      function selectTab(index) {
        console.log("Selecting tab:", index);
        waveformsDiv.childNodes.forEach((waveform, i) => {
          waveform.style.display = i === index ? "block" : "none";
          if (i === index) {
            currentWaveform = waveforms[i];
          }
        });
      }

      // Select the first tab
      selectTab(0);
    })
    .catch((err) => {
      console.error("Error fetching files:", err);
    });
}

function createRegions(textFile, wsRegions) {
  function getColor(value, median, stdDev) {
    const logistic = x => 1 / (1 + Math.exp(-x * 2));
    const red = Math.max(0, Math.min(255, Math.round(logistic((value - median) / stdDev) * 255)));
    const green = Math.max(0, Math.min(255, Math.round(logistic((median - value) / stdDev) * 255 * 0.8)));
    const blue = 0;
    const alpha = 0.2;
    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
  }
  fetch(`/text/${textFile}`)
    .then(res => res.text())
    .then(text => {
      const lines = text.split("\n");
      const { median, stdDev } = calculateStats(lines);
      console.log("median:", median, "stdDev:", stdDev);
      lines.forEach((line, index) => {
        const [floats, text] = line.split(" | ");
        const [start, end, confidence] = floats.split(" ");
        wsRegions.addRegion({
          content: text,
          id: index,
          start: parseFloat(start),
          end: parseFloat(end),
          color: getColor(parseFloat(confidence), median, stdDev),
        });
      });
      console.log("Created regions for text file:", textFile)
    })
    .catch(err => {
      console.log("Error reading text file:", err);
    });
}
function fetchTextFiles() {
  fetch("/list-text")
    .then(res => res.json())
    .then(textFiles => {
      textFiles.forEach((textFile, index) => {
        if (textFile) {
          createRegions(textFile, wsregion_list[index]);
        }
      });
    })
    .catch(err => {
      console.log("Error fetching text files:", err);
    });
  }```

![image](https://github.com/katspaugh/wavesurfer.js/assets/50555644/e266eef2-ba9c-432a-b23f-3a28952df8fa)

[katspaugh]

You should debug your app, this forum is for wavesurfer-specific questions.