Troubleshoot mobile audio Auto-playback issues

<audio id= "audio" autoplay= ' AutoPlay ' loop= ' Loop ' >
    <source src= "Seeyou.mp3" type= "Audio/ogg" >
    <source src= "Seeyou.mp3" type= "Audio/mpeg" >
</audio>

When developing WebApp, sometimes you might want to add a bit of background music, and then we'll use HTML5 audio.

When you're done, we'll put the PC-side test to the perfect auto-play (of course, in the case of your browser support). Then take your phone and try it out, and you'll find that some phones can play automatically, and some can't. What is this for? This is because some mobile browsers have banned this auto-play feature. Access to the information can be known that the Safri on iOS has been explicitly indicated to wait for the user's interactive action before the media can play, that is, if you do not get the user's action to play the words will be Safri intercept.
See here generally a lot of people think this can solve:

var audio = document.getElementById (' audio '); Window.onload=function () {    audio.play ();}

In fact, you still do not interact with the browser, it is not possible.
So, do we have any other solutions? In fact, there is a fake solution:
In our general Open mobile website, our fingers will not inadvertently hit the screen, think of here, so we can add an event such as HTML or body:

$ (' HTML '). On (' Touchstart ', function () {Audio.play ();});

This will be OK. But we may have to add a button to control the music switch. This later found that I may not want to listen to this background music, just want to quietly browse the page, when I click the Close music button, I continue to browse the page, then the hand touched the screen, the sound is playing again, but I previously closed the music just to not want it to play, obviously this is not good, so feel to use one Let it run the event handler only once.

$ (' HTML '). One (' Touchstart ', function () {    audio.play ();});

Troubleshoot mobile audio Auto-playback issues