禁用 HTML5 音频答案

【问题标题】：Disable HTML5 Audio禁用 HTML5 音频
【发布时间】：2015-01-19 22:57:26
【问题描述】：

我在一个页面上有 4 个<audio> 标签。客户要求音频的每个 sn-p 都是线性可用的。

即第一个可用，在完成播放之前禁用休息，然后第二个可用等等..等等..

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

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

提前致谢。

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

【问题讨论】：

标签： javascript jquery css html audio

【解决方案1】：

我假设 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;
    });
});

【讨论】：

【解决方案2】：

如果您将style="pointer-events:none" 添加到它，您也可以禁用音频标签...

【讨论】：