CODEWITHSUNDEEP
javascriptjquerycsshtmlaudio
Zze
Zze

Reputation: 18845

Disable HTML5 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 becomes 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.

Upvotes: 2

Views: 6563

Answers (2)

Jon
Jon

Reputation: 198

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

Upvotes: 6

mido
mido

Reputation: 25054

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

Upvotes: 1

Related Questions