Playing music on the H5 page is actually very simple. It is very convenient to just use this tag.
Just select the path where the music is located.
A simple example is made about the effect of clicking the button to start/stop the music
css:
.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");
}
}
But only this if it is used on the mobile terminal, the iphone will not be turned on, it will automatically play and need to add a js
It can be called in the onload event of the body
Effect picture:
Code download: https://download.csdn.net/download/u011498721/10603013