Automatic playback function on background music in HTML5

The automatic playback attributes of music, here are also introduced:

 <UDIO Controls = Controls Autoplay = Autoplay> <Source SRC = Song.ogg Type = Audio /OGG /> <Source SRC = Song.mp3 Type /MPEG /> YOUR BROWS er ​​does not support the audio element. </Audio>

The Autoplay attribute stipulates that once the audio will be played immediately.

If the attribute is set, the audio will be automatically played.

However, in actual use, you often encounter the phenomenon that cannot be played automatically, mainly because some browsers or mobile phones will prevent or do not support the attribute of Autoplay. Here I will introduce the method I use.

First of all: code in HTML is as follows

 <usio ID = Music1 Controls = Controls Autoplay = Autoplay Preload ID = Music1 Hidden> <Source SRC = Music/Bgmusic.mp3/> </Audio> <! mg ID = btn class = active SRC = IMG /Music.png Alt = /> <!-Here is a switch that can control background music playback->

Use the following code in the js file

 Var Audio = Document.GetelementByid ('Music1'); $ (#BTN) .Bind (TouchStart, Function BF () {if (Audio! == NULL) {// Detection whether to play. AUDIO.PAUSED Player Return to false./alert (Audio.paused) ;IF (Audio.paused) {Audio.play (); //autio.play () This is play $ (#btn) .addclass (Active). } Else {Audio.pause (); // This is the suspension of $ (#btn) .removeClass (active)}}})

When most of the Android machines here can basically be automatically played, but Apple mobile phones can’t work at this time.

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

 $ (html) .one ('TouchStart', Function () {Audio.play ();})

When I arrived here, the background music is automatically played. This method is suitable for loading pages, and you need to click on the project of H5 ...

The above is the automatic playback function of the background music introduced by the editor to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!