VueJS 应用程序中的 WavesurferJS，可以播放音频但波形永远不会在 IOS Safari 上加载？

Question

我在我的 VueJS 应用程序中使用 WavesurferJS，过去一周我一直在努力解决这个问题。在 IOS Safari（据我所知，仅限 IOS Safari），我的 wavesurfer 组件无法完成解码 audio/loading 波形，一条细直线刚刚出现.如果不使用 backend: "MediaElement"，组件只会显示为空白。然而，使用后端，我可以播放音频，但波形仍然无法加载。

我稍微阅读了 wavesurfer 文档并根据常见问题解答："if you use the backend: 'MediaElement' option... The audio will start playing as you press play. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform."。这正是我遇到的情况，可以播放音频并且出现细线，但我认为波形永远不会结束 downloading/decoding。

我处理音频加载的 Vue 方法：

setupRecentRecordingandSave(data, num, name) {

  var url = window.URL.createObjectURL(data);

  if (this.wavesurfer[num] == null) {
    this.createWaveSurfer(num);
    this.wavesurfer[num].load(url);
    this.showRecent = true;
  } else {
    this.wavesurfer[num].load(url);
  }
  this.$store.commit("addCough", { key: name, val: data});
}

我正在使用一个 wavesurfer 元素数组，在用户进行录制后调用此方法，并将 blob 数据发送到此方法。

我的创建 wavesurfer 代码：

createWaveSurfer(num) {
  Vue.set(
    this.wavesurfer,
    num,
    WaveSurfer.create({
      container: "#waveform-" + num,
      waveColor: "#f7931e",
      progressColor: "#824500",
      fillParent: true,
      hideScrollbar: true,
      backend: "MediaElement"
    })
  );
},

我已经为此苦苦挣扎了一段时间，感谢您的帮助。谢谢

Answer 1

原来我的问题不在于 WaveSurfer，而在于我在 IOS 上录制用户音频的方式。修复并确保录音正确后，波形正确显示。

VueJS 应用程序中的 WavesurferJS，可以播放音频但波形永远不会在 IOS Safari 上加载？

WavesurferJS in a VueJS app, audio can be played but waveform never loads on IOS Safari?

audio

ios

vue.js

wavesurfer.js