How to upload audio file with fetch into audio context?

104 Views Asked by At

I am trying to upload an mp3 from my computer into a soundtouch audio context in order to change the tempo and pitch.

HTML

<form class="form" id="form">
     <input type="file" id="inputFile"><br>
     <button type="submit">Upload File</button>
</form>

JavaScript:

const myForm = document.getElementById("form");
const inputFile = document.getElementById("inputFile");

myForm.addEventListener("submit", e => {
e.preventDefault();
const data = new FormData();
data.append("inputFile", inputFile.files[0]);

playBtn.setAttribute('disabled', 'disabled');
if (shifter) {
  shifter.off();
}
fetch(data) 
  .then((response) => response.arrayBuffer())
  .then((buffer) => {
    audioCtx.decodeAudioData(buffer, (audioBuffer) => {
      shifter = new PitchShifter(audioCtx, audioBuffer, 16384);
      shifter.tempo = speedSlider.value;
      shifter.pitch = pitchSlider.value;
      shifter.on('play', (detail) => {
        currTime.innerHTML = detail.formattedTimePlayed;
        progressMeter.value = detail.percentagePlayed;
      });
      duration.innerHTML = shifter.formattedDuration;
      playBtn.removeAttribute('disabled');
    });
  });
})

When I try this code, I get two error messages:

GET ...(port number)... 404 (NOT FOUND)
100.64.5.65/:1 Uncaught (in promise) DOMException: Unable to decode audio data

Any help would be appreciated as I don't know how to fix this.

code screenshot

0

There are 0 best solutions below