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.