禁用 HTML5 音频

Disable HTML5 Audio

本文关键字：音频 HTML5 禁用      更新时间：2023-09-26

我在一个页面上有 4 个<audio>标签。客户端已请求每个音频片段以线性方式提供。

即第一个可用，休息禁用直到完成播放，然后第二个变得可用等等。

此外，他们还要求音频条在屏幕上保持可见（我只是要动态添加它们）只是不"活动"。

所以问题是：当disabled属性（<audio disabled>）不存在时，如何禁用音频标签。

提前谢谢。

更新：即使是CSS，JS或JQuery的答案也将不胜感激...我想做的只是模仿一个禁用的按钮，但用于 html 音频。

如果您向音频标签添加style="pointer-events:none"，您还可以禁用该标签...

我假设html是这样的： 

<audio src='...' controls id='audio1'></audio>
<audio src='...' controls id='audio2'></audio>
<audio src='...' controls id='audio3'></audio>
<audio src='...' controls id='audio4'></audio>

那么我的 JQuery 解决方案将是： 

var audios = ['audio1', 'audio2', 'audio3', 'audio4'];
var canPlay = 0;

$('audio').each(function(){
    this.addEventListener('play', function(){
        if(this.id!=audios[canPlay]){
            this.pause();
            this.currentTime = 0;
        }
    });
    this.addEventListener('ended', function(){
        canPlay = (canPlay + 1) % audios.length;
    });
});
相关文章：