Wavesurfer.js无法在iOS设备(离子3)上加载音频

时间:2018-07-20 21:37:05

标签: ios typescript xmlhttprequest ionic3 wavesurfer.js

我在应用上使用wavesurfer.js进行音频播放,在Android上效果很好(下面的打印屏幕)。

enter image description here

如果我点击“播放”图标,则一切正常。

但是,在iOS(仿真器和真实设备)上,似乎未加载音频。我尝试在Safari上使用ionic serve进行测试,并收到CORS错误。因此,我将我的AWS S3存储桶的CORS配置更改为<AllowedOrigin>*</AllowedOrigin>,并且至少在Safari浏览器上,该错误似乎已解决。然后,我再次运行ionic cordova build ios,并在模拟器上加载了音频并绘制了波形,但在真实设备(在iOS 11.4的iPhone上进行测试)上,错误仍然存​​在(我猜是错误,因为未显示波形可视化,然后点按“播放”图标就不会发生任何事情)。 (下面的打印屏幕)

enter image description here

我的代码中与加载音频有关的节选:

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
}

请记住,这不仅适用于iOS,而且适用于Android(现在也适用于Xcode iOS模拟器)。使用完全相同的代码。

那么,有人知道它会是什么吗?在iOS和Waveurfer的XHR之间加载文件还是其他问题吗?

0 个答案:

没有答案