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

I have a content slider, set to play / stop on each click.

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

The problem: I want it to pause on second click. Right now it won't pause. Any ideas?

问题:我希望它在第二次点击时暂停。现在它不会停顿。有任何想法吗?

See site here: http://dev.alsoknownas.ca/music/ (audio branding section on homepage).

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

Here's the code:

这是代码:

**Edited to reflect the code suggested by Lloyd below:

**编辑以反映劳埃德建议的代码如下:

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

Here's the script:

这是脚本:

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

2 个解决方案

#1

for this markup:

对于此标记:

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

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

use this script:

使用这个脚本:

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

Live Demo: http://jsfiddle.net/75lb/8cGBx/

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

2 个解决方案

#1

更多相关文章

随机推荐