How to upload audio file with fetch into audio context?

Question

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

404 not found. I would check if the response that you have in the callback is ok. So probably it is not related to how you decode the audio data but which data you provide. Just try this and tell us what response do you have. `fetch(data).then((response) => { console.log(response.ok); return response.arrayBuffer();})` — PierBJX, Jun 03 '22 at 21:51
I get the same 404 Error and `false` It works, however, if I pass in the name of an existing mp3 file, for example, `fetch(song.mp3)` works fine and returns `true` — madfilms01, Jun 03 '22 at 22:13
Alright, so the response is not ok. The `fetch()` is not good. Probably, what you have in the buffer is not correct. Just do be sure, can you `console.log` what do you have in the buffer and show us the result? — PierBJX, Jun 03 '22 at 22:17
Ok, so I did `console.log(buffer)` and the output was `Uncaught ReferenceError: buffer is not defined at HTMLFormElement.` But I don't think that's the issue, because I got that error with the mp3 file that worked. — madfilms01, Jun 03 '22 at 22:20
What do you mean by you go that error with the mp3 file that worked? — PierBJX, Jun 03 '22 at 22:26
When I did `fetch(song.mp3)` the request was valid, but doing `console.log(buffer)` after that caused the error in my previous comment. I'm not sure that buffer can be printed in the console. I think the issue may be that `fetch()` does not have the directory of the file I am uploading. Is there a way to get the directory from which you upload a file in JavaScript? — madfilms01, Jun 03 '22 at 22:27
You should be able to print the buffer. I tried something very basic on my side and I succeed to print the buffer. The form data that you provide to the fetch is probably not good and the fetch is failing. If you console log the response, can you share a screenshot in your question. — PierBJX, Jun 03 '22 at 22:55
I added a screenshot, still getting the same error with `console.log(buffer)` — madfilms01, Jun 04 '22 at 00:38
Of course you get this error ^^ You are trying to log buffer outside the callback. Hence, it is undefined. Put the console log inside the `then((buffer) => {`. And when I said to show the screenshot. It was the screenshot of `console.log(response)` — PierBJX, Jun 04 '22 at 06:12

How to upload audio file with fetch into audio context?

0 Answers0