使用 wavesurfer.js，如何在加载波形后创建 AudioContext？答案

【问题标题】：With wavesurfer.js, how can I create an AudioContext AFTER loading the waveform?使用 wavesurfer.js，如何在加载波形后创建 AudioContext？
【发布时间】：2019-08-27 15:03:37
【问题描述】：

我有：

 this.wavesurfer = WaveSurfer.create({
        container: "#wavesurfer-player",
        height: 60,
        barWidth: 2,
        barHeight: 1, // the height of the wave
        barGap: null,
        scrollParent: false
      });
      this.wavesurfer.load(this.url);
      this.wavesurfer.on(
        "loading",
        progress => (this.loadingProgress = progress)
      );
      this.wavesurfer.on("ready", () => {
        let progressBarContainer = document.querySelector(
          ".progress-bar-container"
        );
        progressBarContainer.classList.add("animated", "fadeOut");
        this.loadingProgress = 100;
        this.wavesurfer.un("ready");
        progressBarContainer.addEventListener("animationend", () => {
          this.hideProgressBar = true;
        });
      });

      this.wavesurfer.on("audioprocess", this.audioprocess);

在iOS safari 上，这不会播放。显然，我需要在用户操作之后创建一个 AudioContext。所以我可以添加一个带有click 事件的按钮来触发它。但我希望波形在负载时显示。

【问题讨论】：

标签： mobile-safari audiocontext wavesurfer.js

【解决方案1】：

出于安全原因，在 IOS 上不允许播放 onload。用户必须通过一些用户操作来启动音频播放。

在下面找到它在 Safari 浏览器上播放音频的示例

https://code pen.io/entonbiba/pen/WRyxga

【讨论】：