Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge about how to make audio play automatically in the HTML5 page. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

There are three general ways to create autoplay audio objects:

The first: create an audio tag on the page and write down the relevant attributes, such as: autoplay='autoplay', normally, after the resource address is written here, it can be played automatically after visiting the page. But if the address of the music resource is uncertain and the js needs to be changed, you need to use JS to implement it.

(function () {var audio = document.getElementById ('myAudio1'); audio1 = audio; audio.src = source; audio.loop = true; audio.autoplay = true; audio.play (); audio.addEventListener (' canplay', canPlay, false);}) ()

The second is similar to the first, except that all the tags are inserted into the page after JS is created. 、

(function () {var audio = document.createElement ("AUDIO"); audio2 = audio; audio.setAttribute ("src", source); audio.setAttribute ("loop", 'true'); audio.setAttribute ("controls",' controls'); audio.setAttribute ("autoplay", 'true'); audio.setAttribute ("id",' myAudio2') Audio.addEventListener ('canplay', canPlay, false); document.getElementById (' example2') .appendChild (audio); audio.play ();}) ()

Third: without any dom tags, use JS to create an audio object, and then use JS to control various api of audio objects to achieve resource replacement and automatic playback.

(function () {var audio = new Audio (); audio3 = audio; audio.src = source; audio.loop = true; audio.id = 'myAudio3'; audio.autoplay = true; audio.addEventListener (' canplay', canPlay, false); audio.play ();}) ()

Attached: demo of the above three methods

In addition, a third-party library is added to realize the playback and control of audio resources. Sort out some third-party libraries, the function is not only to play music, but also some other functions, this own research.

Howler.js: http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Librarybuzz.js: http://buzz.jaysalvat.com/audio.js: http://kolber.github.io/audiojs/jPlayer.js: http://jplayer.org/

After using the above method, it is found that the Iphone mobile phone (detailed description) and some android mobile phones still can not play automatically.

His playback condition is that there must be user action before playing.

So you need to consider, in what way can you simulate the operation of the user? Some ways are provided on the network to realize automatic playback, such as:

Create an Image object, and then listen to whether the Image is loaded, and if so, perform audio playback to achieve the automatic playback effect.

A similar method is to create an iframe. The resource is directly the address of the audio resource, which can be played automatically after the iframe is loaded.

Bind a touchstart event to document or body, so that users can trigger playback as soon as they touch the page

My test found that the first two items mentioned above basically had no effect. As for the third item, there is certainly no problem with this, but this way is not completely automatic playback, because it is entirely possible that the user will not touch the page, then it will not be played. But in some scenarios, it can be used, and this is to distinguish between scenarios.

Then I thought, can I monitor whether the phone is moving or moving to play audio? I monitored the devicemotion (detailed description) incident and found that it still didn't work. At this time, I was already in a mess and had a dead heart.

Finally, I used to create audio tags on the page, use JS to adjust audio-related properties and values, and then control audio playback.

Basically, this method can show the same effect on different mobile phones, but not on a 5S phone I tested. Similarly, there is no problem with the other 5S, and I silently ignored him without finding out the specific reasons up to now.

In order to improve some experiences that cannot be played automatically, another touchstart event is bound, so that even if it cannot be played automatically, at least it can be played on the touch page, which can be regarded as an experience improvement.

These are all the contents of the article "how to make Audio play automatically in the HTML5 Page". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.