About the implementation of automatic playback effect of background music in h5

The autoplay attribute of music is also introduced here:

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

autoplay attribute stipulates that the audio will start playing as soon as it is ready.

If this property is set, the audio will play automatically.

But in actual application, we often encounter the phenomenon that automatic playback cannot occur, mainly because some browsers or mobile phones block or do not support the autoplay attribute. Here I will introduce the method I use.

First of all: the code in the html is as follows

<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
<source src="music/bgmusic.mp3" />
</audio>
<!--这里是音乐-->
<img id="btn" class="active" src="img/music.png" alt="" />
<!--这里是一个可以控制背景音乐播放暂停的开关-->

Use the following code in the js file

var audio = document.getElementById('music1');
$("#btn").bind("touchstart", function bf() {

if(audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 这个就是播放
$("#btn").addClass("active")
} else {
audio.pause(); // 这个就是暂停
$("#btn").removeClass("active")
}
}
})

After writing this, most Android machines can basically realize automatic playback, but Apple phones are still not available at this time

Here I used a button to be added to the loading page. When the loading is completed, click the button to guide the user to complete the automatic playback of background music. The code is as follows:

$("html").one('touchstart',function(){
audio.play();
})

At this point, the automatic playback of background music is realized. This method is suitable for projects that have loading pages and need to click to enter h5...

The above is the detailed content of About the implementation of automatic playback effect of background music in h5. For more information, please follow other related articles on the PHP Chinese website!