Question

我有一个内容滑块，设置为每次点击播放/停止。

问题：我希望它在第二次点击时暂停。现在它不会停顿。有什么想法吗？

请在此处查看网站：http://dev.alsoknownas.ca/music/（主页上的音频品牌部分）。

以下是代码：

**编辑反映Lloyd建议的代码如下：

<audio id="player"></audio>

这是脚本：

$(document).ready(function(){
$("span.1").attr("data-src","song.mp3");
$("span.2").attr("data-src","song2.mp3");
$("span.3").attr("data-src","song3.mp3");
$("span.4").attr("data-src","song4.mp3");
$("span.5").attr("data-src","song5.mp3");
});

$("span.1,span.2,span.3,span.4,span.5").click(function () {
  var player = document.getElementById("player");
  player.src = this.getAttribute("data-src");
  player.play();
});

Answer 1

这个标记：

<audio id="player"></audio>

<span class="1">one</span>
<span class="2">two</span>

使用此脚本：

$("span.1")
    .attr("data-src-mp3","song1.mp3")
    .attr("data-src-ogg","song1.ogg");
$("span.2")
    .attr("data-src-mp3","song2.mp3")
    .attr("data-src-ogg","song2.ogg");

$("span[data-src-mp3]").click(function () {
    var player = document.getElementById("player"),
        $this = $(this);

    if ($this.hasClass("selected")) {
        if (player.paused) {
            player.play();
        } else {
            player.pause();
        }
    } 
    else {
        $("span[data-src-mp3].selected").removeClass("selected");
        $this.addClass("selected");
        $(player)
            .empty()
            .append($("<source>").attr("src", $this.attr("data-src-mp3")))
            .append($("<source>").attr("src", $this.attr("data-src-ogg")))
        player.play();
    }
});

现场演示：http://jsfiddle.net/75lb/8cGBx/

Answer 2

试试这个，

而不是做

$('audio').bind('play','pause', function() {

待办事项

$('audio').bind('play pause', function(event) {

根据您的代码，默认情况下，音频会暂停，当用户点击时，它会开始播放，然后在下次点击时暂停播放。

希望这适合你。

如何在点击时动态加载/播放/暂停多源HTML5音频？

2 个答案: