禁用 HTML5 音频

Question

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

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

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

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

提前致谢。

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

Answer 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;
    });
});

Answer 2

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

禁用 HTML5 音频

Disable HTML5 Audio

html

javascript

css

audio

jquery