I have a dynamic audio player (default html5) where I can set the src and it auto plays. That is all working. I also have a link to remove the src, but none of the following lines actually removes and/or resets the player to delete/remove the source audio file. If you play the audio, then stop it and click the delete audio file, the player STILL will play the existing audio file. So how to remove the source audio file from the player in javascript?

                  jQuery('#audioPlayer"').replaceWith('<img id="audioPlayer" src="">');
                  jQuery('#MP3').replaceWith('<img id="MP3" src="">');

                  var mediaPlayer1 = document.getElementById("audioPlayer");
                  var mediaPlayer2 = document.getElementById("MP3");

                  mediaPlayer1.src ='';
                  mediaPlayer1.removeAttribute("src");
                  mediaPlayer1.load();
                  mediaPlayer2.src ='';
                  mediaPlayer2.removeAttribute("src");
                  mediaPlayer1.attr('src', '')
                  mediaPlayer1.children('source').prop('src', '');
                  mediaPlayer2.children('source').prop('src', '');

I have a dynamic audio player (default html5) where I can set the src and it auto plays. That is all working. I also have a link to remove the src, but none of the following lines actually removes and/or resets the player to delete/remove the source audio file. If you play the audio, then stop it and click the delete audio file, the player STILL will play the existing audio file. So how to remove the source audio file from the player in javascript?

                  jQuery('#audioPlayer"').replaceWith('<img id="audioPlayer" src="">');
                  jQuery('#MP3').replaceWith('<img id="MP3" src="">');

                  var mediaPlayer1 = document.getElementById("audioPlayer");
                  var mediaPlayer2 = document.getElementById("MP3");

                  mediaPlayer1.src ='';
                  mediaPlayer1.removeAttribute("src");
                  mediaPlayer1.load();
                  mediaPlayer2.src ='';
                  mediaPlayer2.removeAttribute("src");
                  mediaPlayer1.attr('src', '')
                  mediaPlayer1.children('source').prop('src', '');
                  mediaPlayer2.children('source').prop('src', '');

• javascript
• html
• html5-audio
• avaudioplayer

1 Answer 1

When you remove the src attribute, you're just removing src from the HTML representation of the audio element.

The underlying JavaScript HTMLAudioElement still has a src property when you do that, so just remove the src property.

A minimal solution in native JavaScript would be something like document.getElementsByTagName('audio')[0].src = '';

Of course, you should not replace the audio tag with an img tag before doing that

document.getElementById('removeSourceProperty').addEventListener('click', function() {
  document.getElementsByTagName('audio')[0].src = '';
});

document.getElementById('removeSourceAttribute').addEventListener('click', function() {
  document.getElementsByTagName('audio')[0].removeAttribute('src');
});

<audio controls="controls" src="https://cdn.bitdegree/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true"></audio>
  
<div>
    <button id="removeSourceAttribute">Remove source attribute (HTML only)</button>
    <button id="removeSourceProperty">Remove source property (Works!)</button>
</div>