Unhandled Promise Rejection when playing audio on Safari

I'm struggling to play an audio (mp3 file) on Safari. It returns:

[Error] Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

The same is working just fine on Chrome. I understand that Safari won't allow autoplay if the user did not interact before with the page but this is not the case as I'm using a "play" button to play the audio file.

HTML

<div class='play playBtn' style="margin-left: 100px;">
   <i class="fa fa-play" aria-hidden="true"></i>    
</div>

<div>
   <audio id="player" type="audio/mpeg">
   </audio>
</div>

JavaScript

$(".playBtn").on('click', function(){
   var fa = $(this).find(".fa")
   if( $(fa).hasClass("fa-play")){
      $(fa).fadeOut(150, function(){
         $(this).removeClass("fa-play").addClass("fa-stop").fadeIn(150)
         document.getElementById("player").src = "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3"
         document.getElementById("player").load();
         document.getElementById("player").play();
      });
   }    
});

Here you can find a fiddle: jsfiddle