H5 Music Auto Play ios//no Android phone pictures click

Define music Buttons

<div id= "music-btn" class= "O-play" style= "WIDTH:24PX; height:24px; Display:block; Position:absolute; top:12px; right:12px; z-index:9999; Background:url (images/musicbtn.png) no-repeat center/cover; " ></div>

Music
<audio id= "O-music" src= "Img/bg.mp3" class= "Muisc" preload= "preload" autoplay= "AutoPlay" loop= "loop" ></ Audio>

SRC attribute specifies the URL of the video to play

The Preload property specifies whether to load the video after the page is loaded. If the AutoPlay property is set, the property is ignored. The Loop property specifies that playback starts again when the video ends. Set this property, the video will loop back. the AutoPlay property is set to the video element that is automatically played: The AutoPlay property specifies that the video is ready to play as soon as it is prepared.

JS file

<script type= "Text/javascript" >

　　 iOS auto Play
function Audioautoplay (ID) {
var audio = document.getElementById (ID),
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);
}
Audioautoplay (' O-music ');
　　 Music Button
$ (' #music-btn '). On (' click ', function () {
if (!document.queryselector (' #o-music '). Paused) {
Document.queryselector (' #o-music '). Pause ();
$ (this). Removeclass (' O-play ');
}else{
Document.queryselector (' #o-music '). Play ();
$ (this). addclass (' O-play ');
}
});
//Disable Android phone picture click
for (var i=0; I<document.queryselectorall (' img '). length; i++) {
Document.queryselectorall (' img ') [I].addeventlistener (' click ', Function (e) {
E.preventdefault ();
})
}
</script>

H5 Music Auto Play ios//no Android phone pictures click