NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

Question

I have this audio element on my page :

 <audio id="splayer" controls="controls" class="audiocontrol" >
 <source src='{{ baseUrl}}storage/{{src}}' />
 </audio>

    start_audio()
    {  

      var player = <HTMLAudioElement> document.querySelector('#splayer');
      player.load();
      var promise = player.play();


      if (promise !== undefined) {
        promise.then(_ => {
          
        }).catch(error => { console.log('error');
          console.log(error)
        });
      }
    }

This is working on chrome and firefox but getting this error on Safari :

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission

There is a modal which loads at the initial page load and user clicks on allow button to give permission :

   <button class="btn micallowbtn" data-dismiss="modal">Allow</button>

This works on chrome but getting error on safari.

Any solution to resolve this issue on Safari