一段音频文件,准备就绪后播放,并且循环播放
<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"); }