HTML5 implements automatic playback of background music

Autoplay attribute:

(Recommended tutorial: html5 video tutorial)

<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 as soon as the audio is ready Start playing. 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 still don’t work 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.

Related recommendations: h5

The above is the detailed content of HTML5 implements automatic playback of background music. For more information, please follow other related articles on the PHP Chinese website!