Отключить HTML5 Audio

Question

У меня есть 4 <audio> теги на странице. Клиент запросил, чтобы каждый фрагмент аудио был доступен линейно.

не есть первый доступный, остальные отключены до готовой игры, то второй становится доступным и т.д .. и т.д ..

Кроме того, они просили, чтобы аудио бары остаются видимыми на экране (я просто хочу, чтобы добавить их динамически) просто не «активно».

Таким образом, вопрос: Как отключить звуковой тег, когда атрибут disabled (<audio disabled>) не существует ..

Заранее спасибо.

Update: Даже 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; 
    }); 
});