how to resolve the warning: AudioContext was not allowed to start. while playing songs in the loop

I’m trying to make loop options in the audio player (using wavesurfer.js) I have made a button for a loop. when use hits the button the loop mode turns on and after finishing the current song next, the next song plays itself. But the problem is that when next song has loaded the browser give me the following warning:

The AudioContext was not allowed to start. It must be resumed (or
created) after a user gesture on the page.

how can this issue be solved?

here is my jQuery code:

var playcounter = false;
      $("#playAll").click(function(){
        $(this).toggleClass('play-all-btn2');
        playcounter = !playcounter;
      });
      wavesurfer.on('finish', function () {
        if(!playcounter){
          wavesurfer.stop();
        }else{
          songAdrr++;
          songAdrr1 = songAdrr;
          songlinktest = $(".player-playlist .songlink").eq(songAdrr).attr('href');
          if (typeof songlinktest === 'undefined') { //if no song found, stop loading song
            wavesurfer.stop();
            wavesurfer.cancelAjax();
            songAdrr--;
            songAdrr1 = songAdrr;
          }else{
            $(".wavetest").show();
            $(".player-playlist .player-song-detail .wavetest").eq(songAdrr).hide();
            $(".player-playlist .player-song-detail #songwave").remove();
            $(".player-playlist .player-song-detail #testdiv").eq(songAdrr).append("<div id='songwave'> </div>");
            wavesurfer = WaveSurfer.create({
              container: '#songwave',
              waveColor: '#CCCCCC',
              progressColor: '#E64C51',
              barWidth:2,
              height:40,
              barGap:2,
              backgroundColor: 'transparent'
          });
            wavesurfer.load(songlinktest);
            wavesurfer.play();
            wavesurfer.stop();
          }
          
        }
        if (songAdrr > 0) {
          $("#preSong").prop('disabled', false);
        }
        if (songAdrr == totalSongs) {
          $("#nextSong").prop('disabled', true);
        }

      });