jQuery - Переключить кнопку воспроизведения/паузы (несколько аудио)

Question

Я хочу показывать разные заголовки, и каждый из них должен играть свой собственный звук (с переключением воспроизведения/паузы).

Каждая из этих кнопок должна получить свой собственный уникальный звук, используя тег <audio></audio>.

Я не герой в jQuery (пока), но я начал. Но отныне я не знаю, что делать.

Может кто-нибудь, пожалуйста, помогите мне в этом?

Я сделал jsfiddle, чтобы показать вам, что у меня уже есть.

http://jsfiddle.net/carloc/7341jxv6/

Большое спасибо!

Answer 1

Вы просто меняете класс, вам действительно нужно вызвать воспроизведение и паузу для элемента. см jsfiddle

HTML

<h2>Sound 1</h2> 
<div class="play" id="btn1">play</div> 

<h2>Sound 2</h2> 
<div class="play" id="btn2">play</div> 

<h2>Sound 3</h2> 
<div class="play" id="btn3">play</div> 


<!-- SOUNDS --> 
<audio id="sound1"> 
    <source src="http://www.bigsoundbank.com/sounds/ogg/0595.ogg" type="audio/ogg" /> 
</audio> 

<audio id="sound2"> 
    <source src="http://www.bigsoundbank.com/sounds/ogg/0580.ogg" type="audio/ogg" /> 
</audio> 

<audio id="sound3"> 
    <source src="http://www.bigsoundbank.com/sounds/ogg/0003.ogg" type="audio/ogg" /> 
</audio> 

Script -

$('.play').click(function(){ 
    var $this = $(this); 
    var id = $this.attr('id').replace(/btn/, ''); 
    $this.toggleClass('active'); 
    if($this.hasClass('active')){ 
     $this.text('pause'); 
     $('audio[id^="sound"]')[id-1].play();   
    } else { 
     $this.text('play'); 
     $('audio[id^="sound"]')[id-1].pause(); 
    } 
}); 

Здесь^= это начинается с селектора, который выбирает все аудиофайлы и используя идентификатор кнопки, мы на самом деле играть или пауза точный щелчок аудио.

Answer 2

Я думаю, что это то, о чем вы просите.

Вы можете использовать JQuery для запуска и приостановки так:

$('#sound1').trigger('play'); 

и

$('#sound1').trigger('pause'); 

Answer 3

это должно быть функция и ожидалось :)

используя .trigger('play') and .trigger('pause')

JS FIDDLE