jQuery

Question

我想显示不同的标题，每个标题都必须播放自己的声音（使用 play/pause 切换）。

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

我在 jQuery 中还不是英雄，但我已经开始了。但是从现在开始，我不知道该怎么办了。

有人可以帮我解决这个问题吗？

我制作了一个 jsfiddle 来向您展示我已经得到的东西。

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

非常感谢！

Answer 1

我想这就是你要的。

您可以像这样使用 JQuery 开始和暂停：

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

和

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

Answer 2

这应该是您期望的功能:)

使用.trigger('play') and .trigger('pause')

JS FIDDLE

Answer 3

您只是在更改 class，您实际上需要为该元素调用播放和暂停。参考 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();
    }
});

这里的 ^= 是 starts with selector，它选择所有音频并使用按钮的 id，我们实际播放或暂停确切点击的音频。

jQuery - 切换 play/pause 按钮（多个音频）

jQuery - Toggle play/pause button (Multiple audios)

html

audio

toggle