如何通過javascript刪除html5音頻播放器中的源音頻文件

Question

我有一個動態音頻播放器（默認為 html5），我可以在其中設置 src 並自動播放。 這就是全部工作。 我還有一個刪除 src 的鏈接，但以下幾行實際上都沒有刪除和/或重置播放器以刪除/刪除源音頻文件。 如果您播放音頻，然后停止並單擊刪除音頻文件，播放器仍將播放現有的音頻文件。 那么如何在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>