wavesurfer.play() does not play the audio

[ManimMadhav]

I am trying to play an audio file. It is loading correctly as I can see the waveform. But when i click on the play button, it does not start playing and instead throws an AudioContext warning in console. I am not sure as to why I am getting this, because I've been using wavesurfer.js for weeks now and I have not faced this issue ever.

This my code snippet to play the file:

//waveform object initialization
var wavesurfer = WaveSurfer.create({
    container: "#audiowave",
    waveColor: "#00008B",
    progressColor: "#87CEEB",
    height: 180,
    partialRender: true,
    fftSamples: 512,
    barHeight: 2,     
    minPxPerSec: 400,       
    plugins: [Timeline],
});

const playButton = document.getElementById("btn-playpause");
playButton.addEventListener('click', () => {
    if (wavesurfer.isPlaying()){
        wavesurfer.pause();
    }
    else{
        console.log("Clicked Play/Pause");
        wavesurfer.play();
    }
});

This is the console upon clicking the play button:

Wonder if there's any fixes, do let me know. Thanks!

[sarahmonks]

Hey,

I found something here on stackoveflow:
https://stackoverflow.com/questions/55026293/google-chrome-javascript-issue-in-getting-user-audio-the-audiocontext-was-not
See answer by "st-h".
He says:
"If an AudioContext is created prior to the document receiving a user gesture, it will be created in the "suspended" state, and you will need to call resume() after a user gesture is received."

Then If you look at the other answers there too , they suggest you can resume the AudioContext with the following code:
getAudioContext().resume();

So maybe you could try something like this:

}else{
  console.log("Clicked Play/Pause");
  getAudioContext().resume();
  wavesurfer.play();
}