html5 audio配合span data-src-mp3使用

发表于 更新于 分类于 本文字数： 1.3k 阅读时长 ≈ 1 分钟

html5 audio配合span data-src-mp3使用

编写html代码

1
2
3
4
5
6
7
<audio id="player" style="display: none"></audio>

<span class = '1' data-src-mp3="" data-src-ogg=""></span>
				
<span class = '2' data-src-mp3="" data-src-ogg=""></span>


初始化span标签

1
2
3
4
5
6
$("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");

控制播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("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")))
        // 必须使用load重新加载audio，否则播放audio时，播放出来的还是最初始的资源
        player.load();
        player.play();
    }
});