jQuery - 切换播放/暂停按钮（多个音频）

Posted 2023-02-25

【中文标题】jQuery - 切换播放/暂停按钮（多个音频）

【英文标题】：jQuery - Toggle play/pause button (Multiple audios)

【发布时间】：2015-07-15 12:32:57

【问题描述】：

我想显示不同的标题，每个标题都必须播放自己的声音（带有播放/暂停开关）。

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

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

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

我制作了一个 jsfiddle 来向你展示我已经拥有的东西。

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

非常感谢！

【问题讨论】：

如果你也在这里包含那个小提琴代码会很好。

【参考方案1】：

你只是改变了类，你实际上需要为元素调用 play 和 pause 。参考 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，我们实际上播放或暂停确切点击的音频。

【参考方案2】：

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

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

JS FIDDLE

【参考方案3】：

我想这就是你想要的。

您可以像这样使用 JQuery 来启动和暂停：

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

和

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