html5 音频

一段音频文件，准备就绪后播放，并且循环播放

<span id="playbox" class="btn_music on"><audio src="815.mp3" loop autoplay="autoplay" id="audio"></audio></span>

js代码

 <script>
 $(document).ready(function () {
     $("#playbox").toggle(function () {
            $(this).removeClass("on");
            document.getElementById("audio").pause();
        }, function () {
            $(this).addClass("on");
            document.getElementById("audio").play();
        });
 })
        
</script>

css代码  （就是播放按钮类的图片切换）

.btn_music {
display: inline-block;
width: 35px;
height: 35px;
background: url('images/play.png') no-repeat center center;
background-size: 100% auto;
position: absolute;
z-index: 100;
left: 15px;
top: 30px;
}
.btn_music.on {
    background-image: url("images/stop.png");
}