HTML页面添加能暂停的背景音乐

HTML页面添加能暂停的背景音乐

html代码

<a class="mscBtn" id="audioBtn" title='啦啦' style="cursor:pointer;"></a>
<audio id="bgMusic" src="../salepage/img/bgm.mp3" autoplay="autoplay"></audio>
<script src="http://resource.mizuiren.com/jquery.js"></script>

css代码

  <style>
    .pause {
        background-position: 0 bottom !important;
    }
    .mscBtn {
        height: 50px;
        background: #fff url(../salepage/img/music.png) no-repeat;
        display: block;
    }
</style>

！important 很重要，他的作用是提高指定样式规则的应用优先权（优先级）。
js代码

<script>
    $(function () {
        var music = document.getElementById("bgMusic");
        $("#audioBtn").click(function () {
            if (music.paused) {
                music.play();
                $("#audioBtn").removeClass("pause").addClass("play");
            } else {
                music.pause();
                $("#audioBtn").removeClass("play").addClass("pause");
            }
        });
    });
</script>

需要的图片地址：http://img.mizuiren.com/musicbtn.png