With wavesurfer.js, how can I create an AudioContext AFTER loading the waveform?

Question

I have:

 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);

On iOS safari, this won't play. Apparently, I need to create an AudioContext AFTER a user action. So I can add a button with a click event to trigger this. But I want the waveform to show on load.

Answer 1

On IOS due to security reasons it will not allow to play onload. User will have to initiate the audio play through some user action.

Find an example where it plays the audio on safari browser below

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