javascript - Disable HTML5 Audio - Stack Overflow

admin管理员组

文章数量:1399994

I have 4 <audio> tags on a page. The client has requested that each snippet of audio be available linearly.

i.e. First available, rest disabled until finished playing, then second bees available etc.. etc..

Additionally, they've requested that the audio bars remain visible on screen (I was just going to add them dynamically) just not 'active'.

So the question is: How do I disable an audio tag when the disabled attribute ( <audio disabled> ) doesn't exist..

Thanks in advance.

Update: Even a CSS, JS or JQuery answer would be appreciated... All I want to do is mimic a disabled button but for html audio.

I have 4 <audio> tags on a page. The client has requested that each snippet of audio be available linearly.

i.e. First available, rest disabled until finished playing, then second bees available etc.. etc..

Additionally, they've requested that the audio bars remain visible on screen (I was just going to add them dynamically) just not 'active'.

So the question is: How do I disable an audio tag when the disabled attribute ( <audio disabled> ) doesn't exist..

Thanks in advance.

Update: Even a CSS, JS or JQuery answer would be appreciated... All I want to do is mimic a disabled button but for html audio.

• javascript
• jquery
• css
• html
• audio

Share Improve this question Follow edited Jan 20, 2015 at 0:09 Zze asked Jan 19, 2015 at 22:57 ZzeZze 18.9k1414 gold badges9595 silver badges125125 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can also disable an audio tag if you add style="pointer-events:none" to it…

I am assuming the html to be something like:

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

then my JQuery solution would be:

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

本文标签： javascriptDisable HTML5 AudioStack Overflow