HTML5頁面播放音樂
阿新 • • 發佈:2019-02-09
H5頁面播放音樂其實很簡單,只需要用<audio>這個標籤就行十分方便。
路徑選在音樂所在位置就行了。
<audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>
關於點選按鈕音樂開啟/停止播放的效果做了個簡單的例子
css:<a class="play" id="audioBtn" style="cursor:pointer;" onclick="autoPlay()"></a> <audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>
.pause { height: 50px; background: url(images/musicbtn.png) no-repeat; display: block; background-position: 0 bottom; } .play { height: 50px; background: url(images/musicbtn.png) no-repeat; display: block; }
JS:
function autoPlay() { var myAuto = document.getElementById('bgMusic'); var btn = document.getElementById('audioBtn'); if (myAuto.paused) { myAuto.play(); btn.classList.remove("pause"); btn.classList.add("play"); } else { myAuto.pause(); btn.classList.remove("play"); btn.classList.add("pause"); } }
不過只有這個如果是移動端用到,iphone不會開啟是自動播放需要再加一個js
<script type="text/javascript">
function audioAutoPlay() {
var audio = document.getElementById("bgMusic"),
play = function () {
audio.play();
document.removeEventListener("touchstart", play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
play();
}, false);
document.addEventListener("touchstart", play, false);
}
</script>
在body的onload事件呼叫即可效果圖: