setMediaElement doesn't work

[UchihaYuki]

It will only work if I set media in WaveSurfer.create.

  loadFile(file: File) {
    const audio = new Audio(URL.createObjectURL(file));
    // const audio = new Audio("/assets/mengnalisha.mp3"); // Doesn't work either
    audio.controls = true;
    document.body.appendChild(audio);
    this.waveSurfer.setMediaElement(audio);
  }

The audio element can play the music, but this.waveSurfer won't show the waveform.

[katspaugh]

It's not supposed to do anything other than setting an external media element.

[UchihaYuki]

I don't understand. I didn't do anything other than set an external media element.
It will work if I set media element when creating WaveSurfer like the following:

    this.waveSurfer = WaveSurfer.create({
      height: this.height,
      container: this.hostRef.nativeElement,
      waveColor: this.waveColor,
      progressColor: this.progressColor,
      hideScrollbar: true,
      autoCenter: true,
      sampleRate: this.sampleRate,
      media: new Audio(URL.createObjectURL(file)),
    });

But if I set media element later by calling

this.waveSurfer.setMediaElement(new Audio(URL.createObjectURL(file)));

It won't work.

[katspaugh]

Yes, and it's not supposed to do what you expect here (load audio). If you need to load a new audio, you must additionally call wavesurfer.load().

// Create a wavesurfer
const wavesurfer = WaveSurfer.create({
  ...
})

// Later on, swap the media element with a new one
// This won't load new audio, just replace the audio element
const newAudio = new Audio() // no need to pass a URL here
wavesurfer.setMediaElement(newAudio)

// You can additionally load a new audio file
wavesurfer.load('...')

[UchihaYuki]

Gotcha. Thanks!