main.js(theAlpine.jsscriptfile)

import Alpine from "alpinejs";
Alpine.start();
const baseUrl = "https://phv-conversion.herokuapp.com/";
const metronomeBpmRange = {}; // sample metronome beats
const metronomeBpmRangePicker = new Range();
const metronomeBeatsPerBar = {}; // sample metronome beats
const metronomeBeatsPerBarPicker = new Range();
const formatName = function(fileName) {
 return fileName.split(".").shift().replace(/[^a-z0-9_-]/gi, "").toLowerCase();
}
window.addEventListener("load", function() {
 const audioContext = new AudioContext();
 const audioElm = document.getElementById("audioPlayer");
 if (audioContext.state === "suspended") {
    audioElm.addEventListener("click", function() {
      if (audioContext.state !== "unsuspended") audioContext.resume();
    });
 }
 audioContext.onstatechange = function() {
    if (audioContext.state === "running") audioElm.classList.remove("paused");
    else audioElm.classList.add("paused");
 };
});
const MidiPlayer = {
 set_midi_data: async function(midi_data) {
    const result = await window.fetch("https://phv-conversion.herokuapp.com/convert", {
      method: "POST",
      headers: {
        Accepts: "application/json",
        "Content-Type": "application/json"
      },
      body: midi_data
    }).then(response => response.json());
    console.log(result);
    this.setState({
      midi: result.midi,
      name: result.name,
      format: result.format,
      audio_url: null,
      img_url: null,
      is_playing: false,
      playhead_x: 0,
      bpm: 120,
      bars: 4,
      segments: 4,
      segment_length: 4,
      tracks: result.tracks,
    });
 },
 toggle_playback: function() {
    if (this.state.is_playing) {
      audioCtx.stop();
      this.setState({
        is_playing: false,
      });
    } else {
      audioCtx.play();
      this.setState({
        is_playing: true,
      });
    }
 },
 render: function() {
    const progression_indicator = new Progress();
    const is_playing = this.state.is_playing;
    progression_indicator.playback = is_playing;
    return(
        <div id="songAudio" class="border-2 border-black absolute block w-full h-full" onclick={() => this.toggle_playback()}>
        {is_playing && (
            <div className="playback__progress-bar bg-gray-300">
              <div className="h-full absolute top-1/4 bg-green-500">{progression_indicator.percent_played()}</div>
            </div>
        )}
 </div>