2

I'm trying to play/pause an mp3 HTML5 audio on clicking button (having id "playaudio"), it is working fine on all devices except on iOS Safari, it is showing the following error on Safari in the console when clicking on play button:

Unhandled Promise Rejection: NotSupportedError: The operation is not supported."

Can anyone tell me why I'm facing this issue only on Safari, and how can I fix it?

let song = document.getElementById("testingsong");

$('#playaudio').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    $(".play").css("display", "none");
    $(".pause").css("display", "block");
    song.play();
  } else {
    $(".play").css("display", "block");
    $(".pause").css("display", "none");
    song.pause();
  }
  
  $(this).data("clicks", !clicks);
});
<audio id="testingsong" src="/audio.mp3"></audio>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Jibran Mustafa Virk
  • 37
  • 5
  • Have you researched the error and tried any fixes? Some answers state that the problem is due to the use of [a relative path in Safari](https://stackoverflow.com/a/47310447/519413), others say it's possibly the file format (although you seem to be using an MP3 which I would imagine is well-supported unless you're using a weird sample rate or encoding) – Rory McCrossan Jul 04 '22 at 10:47
  • I've searched a lot about the error but I didn't find any resource stating the exact error. And yes, I've tried using the absolute path also for mp3 and still it shows the same error – Jibran Mustafa Virk Jul 04 '22 at 10:50
  • perhaps the server is sending the wrong `content-type` - check the response headers for the request of the mp3 - I'm curious: what IS the content-type – Bravo Jul 04 '22 at 10:52
  • The content-type in the response header is: `Content-Type: audio/mp3` , and this is the correct one in my case – Jibran Mustafa Virk Jul 04 '22 at 10:57

0 Answers0