Wavesurfer.js not loading audio on iOS devices


#1

I’m using wavesurfer.js for audios on my app and it works great on Android (printscreen below).

31

And if I tap the play icon all works fine.

But, on iOS (emulator and real devices) looks like audio is not loading. I tried to test with ionic serve on Safari and get CORS error. So, I changed my CORS configuration of my AWS S3 bucket to <AllowedOrigin>*</AllowedOrigin> and the error seemed to have been solved, at least on Safari browser. Then, I run ionic cordova build ios again and on emulator the audio was loaded and waves was drawn, but on real devices (tested on iPhone’s with iOS 11.4) the error is still there (error I guess, because waveform visualization is not showed, and tapping the play icon nothing occours). (printscreen below)

Excerpt from my code related to loading audio:

ngAfterViewInit() {
  this.audio = this.audio.nativeElement;

  this.ws = WaveSurfer.create({
      container: this.audio,
      waveColor: "#555555",
      progressColor: "#c51b63",
      barHeight: 4,
      height: 30,
      cursorColor: "#c51b63"
  });
  
  this.ws.load(this.audioSource); // Source loaded from my S3 bucket
}

Remembering that not works only on iOS, but on Android (and now on Xcode iOS emulator too) works perfectly. With exactly same code.

So, does anyone have any idea what it can be? Can it be a problem between iOS and XHR of wavesurfer to load the file, or anything else?