wavesurfer.js tries to send a http request while calling loadBlob

[UchihaYuki]

I use angular framework

this.waveSurfer = WaveSurfer.create({
  container: this.waveform,
  waveColor: '#ff00ff',
  progressColor: '#000000',
});

this.audioFile.onchange = (event: any) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const arrayBuffer = event.target.result;
    const blob = new Blob([arrayBuffer]);
    console.log(blob);
    this.waveSurfer.loadBlob(blob).then(() => {});
  };
  reader.onerror = (event) => {
    console.error('An error ocurred while reading the file: ', event);
  };
  reader.readAsArrayBuffer(file);
};

when the following line is called

this.waveSurfer.loadBlob(blob).then(() => {});

I saw the following in console

GET https://mydomain.com/blob net::ERR_ABORTED 404 (Not Found)

[katspaugh]

If it’s fetching that, then that’s what you’re passing to the loadBlob function…

[UchihaYuki]

I also print the blob in console:

Blob {size: 3295819, type: ''}

It's not a link. It's the content of an mp3 file.

[katspaugh]

Please make sure your blob has a correct content type, e.g. audio/mpeg