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

Posted

技术标签:

【中文标题】如何通过javascript删除html5音频播放器中的源音频文件【英文标题】:how to remove source audio file in html5 audio player via javascript 【发布时间】:2020-01-28 20:55:21 【问题描述】:

我有一个动态音频播放器(默认为 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', '');

【问题讨论】:

【参考方案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>

【讨论】:

audio.src = '' 在控制台中显示警告:Invalid URI. Load of media resource failed。有没有办法在没有警告的情况下做到这一点?此外,audio.removeAttribute('src') 不会从轨道中删除音频,并且可以再次按“播放”按钮播放。 @Rodrigo 这可能是依赖于实现的事情,因为我在 Chrome 中没有收到任何警告。我想你不应该担心它。顺便问一下,Firefox 是在哪个浏览器中收到此警告的? 是的,火狐。我想我必须忍受,但我讨厌控制台上不必要的警告:( 这个警告对我来说很奇怪,因为空字符串是 src 的默认值(如果没有提供),所以我不明白为什么 Firefox 想要解析它 A = document.createElement('audio'); console.log(A.src); A.src = ''; console.log(A.src); 这将输出两个不同的值:&lt;empty string&gt;http://localhost/。奇怪!

以上是关于如何通过javascript删除html5音频播放器中的源音频文件的主要内容,如果未能解决你的问题,请参考以下文章

如何删除 HTML5 音频标签中的下载选项?

当通过 JavaScript 填充源时,Html5 音频不会在 Safari 中播放

如何播放音频?

使用 Javascript 播放音频元素 (html5)

如何使用 javascript 控制 HTML5 音频标签

在 HTML5 音频播放器上添加和删除控件