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

【问题标题】：WavesurferJS in a VueJS app, audio can be played but waveform never loads on IOS Safari?WavesurferJS 在 VueJS 应用程序中，可以播放音频但波形永远不会在 IOS Safari 上加载？
【发布时间】：2020-08-20 14:27:30
【问题描述】：

我在我的 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"
    })
  );
},

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

【问题讨论】：

标签： ios vue.js audio wavesurfer.js

【解决方案1】：

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

【讨论】：

你如何在 IOS 上录制音频，我需要一些帮助，因为 safari 不支持 mediaRecorder，你能在这里分享你的想法吗，这会很有帮助，谢谢
@AbhiThakkar，我最终使用了this polyfill，它允许在移动 safari 上录制音频，但据我所知，没有能够在 IOS 上录制音频的解决方案铬。
我正在尝试将此 pollyfill 包添加到我的 vue.js 项目中，但在集成后出现“TypeError：MediaRecorder 不是构造函数”错误。我在挂载方法上添加了这样的 pollyfill。 window.MediaRecorder = require('audio-recorder-polyfill');
我不太确定你的问题是什么，但对我来说，我导入了 polyfill，并做了“window.MediaRecorder = AudioRecorder”，其中 AudioRecorder 是导入的 polyfill。之后我就可以像往常一样使用 MediaRecorder。