0

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

我读了一点wavesurfer文档并根据FAQ：“如果你使用后端：'MediaElement'选项......音频将在你按下播放时开始播放。将显示一条细线，直到整个音频文件是下载并解码以绘制波形。”。这正是我正在经历的，可以播放音频并显示一条细线，但我认为波形永远不会完成下载/解码。

我处理音频加载的 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"
    })
  );
},

我已经为此苦苦挣扎了一段时间，不胜感激。谢谢。

4

1 回答 1

0

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

于 2020-05-09T00:55:31.523 回答