javascript - Pause the blob audio in Safari - Stack Overflow

I am trying to load/download the audio file from the URL, create an HTML audio tag, and play it. Everything works fine. The audio will download without any issues from the URL and then play automatically, but when I click on the Pause button, the audio will start to play from the beginning instead of stopping/pausing!

function load_Audio( contentID ) {

  var audioUrl = $( contentID ).text();
        
  $.ajax({
    url: audioUrl,
    method: 'GET',
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data) {

      // Create a blob URL for the audio file
      var blobUrl = URL.createObjectURL(data);

      const audioElement = document.createElement('audio');
      audioElement.setAttribute('controls', true);
      audioElement.setAttribute('controlsList', 'nodownload');
      audioElement.setAttribute('autoplay', 'autoplay');
      document.body.appendChild(audioElement);

      const sourceElement = document.createElement('source');
      audioElement.appendChild(sourceElement);
      sourceElement.src = blobUrl;
      sourceElement.type = 'audio/mpeg';

      $('#audioholder').html(audioElement);
    },
    error: function() {
      $('#audioholder').html('Failed to load the audio file');
    }
  });

}

So, what's the issue here? What's the solution to solve this pause/stop issue?

I am trying to load/download the audio file from the URL, create an HTML audio tag, and play it. Everything works fine. The audio will download without any issues from the URL and then play automatically, but when I click on the Pause button, the audio will start to play from the beginning instead of stopping/pausing!

function load_Audio( contentID ) {

  var audioUrl = $( contentID ).text();
        
  $.ajax({
    url: audioUrl,
    method: 'GET',
    xhrFields: {
      responseType: 'blob'
    },
    success: function(data) {

      // Create a blob URL for the audio file
      var blobUrl = URL.createObjectURL(data);

      const audioElement = document.createElement('audio');
      audioElement.setAttribute('controls', true);
      audioElement.setAttribute('controlsList', 'nodownload');
      audioElement.setAttribute('autoplay', 'autoplay');
      document.body.appendChild(audioElement);

      const sourceElement = document.createElement('source');
      audioElement.appendChild(sourceElement);
      sourceElement.src = blobUrl;
      sourceElement.type = 'audio/mpeg';

      $('#audioholder').html(audioElement);
    },
    error: function() {
      $('#audioholder').html('Failed to load the audio file');
    }
  });

}

So, what's the issue here? What's the solution to solve this pause/stop issue?

• javascript
• html
• jquery
• blob

Share Improve this question Follow asked Jan 30 at 17:12 AliAli 1,05855 gold badges1919 silver badges3737 bronze badges 5

• 2 How are you calling load_Audio()? I'm guessing it's in an event listener that gets triggered again when the user clicks on the Pause button. – Barmar Commented Jan 30 at 22:02
• P.S. Use either snake_case or camelCase. Mixing both in the same identifier is weird. – Barmar Commented Jan 30 at 22:03
• Barmar: You are right! That was the issue, I have the load_Audio on the parent div where the new audio loads after the call, and with every new click that was going to call that function again! Thank you so much. – Ali Commented Jan 31 at 3:45
• Why would you use AJAX for this anyway? If it's a GET request, you can just set the src attribute for the audio element, and then the browser will handle streaming for you. Much more efficient. – Brad Commented Jan 31 at 4:06
• Brad: for some reason that I don't know about, any other ways that I have tried, the audio will take so much time to load in Safari or sometimes even shows an error after I click on the play! then I have to refresh the page! – Ali Commented Jan 31 at 4:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The fix is to use the Audio() constructor instead of document.createElement('audio').

The Audio() constructor creates a more stable audio object that handles blob URLs better in Safari and Its properly maintains the audio state and timing, allowing pause/play to work as expected

Try this solution:

// Instead of this:
const audioElement = document.createElement('audio');

// Use this:
const audioElement = new Audio();