如何通过 javascript 删除 html5 音频播放器中的源音频文件

Question

我有一个动态音频播放器（默认 html5），我可以在其中设置 src 并自动播放。这一切都在起作用。我还有一个 link 来删除 src， 但是下面几行的 none 实际上 删除 and/or 将播放器重置为 delete/remove源音频文件。如果您播放音频，然后停止并单击删除音频文件，播放器仍然会播放现有的音频文件。所以如何从 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', '');

Answer 1

当您删除 src 属性时，您只是从 audio 的 HTML 表示中删除 src ]元素。

基础 JavaScript HTMLAudioElement 仍然有一个 src 属性，所以只需删除 src 属性.

原生 JavaScript 中的最小解决方案类似于 document.getElementsByTagName('audio')[0].src = '';

当然，在执行此操作之前，您不应将 audio 标记替换为 img 标记

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.org/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>

如何通过 javascript 删除 html5 音频播放器中的源音频文件

how to remove source audio file in html5 audio player via javascript

html

javascript

avaudioplayer

html5-audio