jQuery - 切换播放/暂停按钮(多个音频)

Question

我想要显示不同的标题,每个标题都必须播放自己的声音(播放/暂停切换).

这些按钮中的每一个都必须通过使用<audio></audio>标签获得自己独特的声音.

我还不是jQuery中的英雄,但我已经开始了.但从现在开始,我不知道该怎么做.

有人可以帮我这个吗？

我已经做了一个jsfiddle来向你展示我已经拥有的东西.

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

非常感谢你!

Answer 1

你只是改变了类,你实际上需要调用play并暂停元素.参考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>

脚本 -

$('.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();
    }
});

这里^ =是选择器的开始,它选择所有音频并使用按钮的id,我们实际上播放或暂停精确点击的音频.