Implementation of automatic audio playback of HTML5 page

Time:2021-9-16

Recently, there is a need to automatically play music resources when the mobile phone loads a page. Generally, this problem is solved, but it is quite difficult to ensure the consistent performance of various mobile phones, at least it takes a little trouble. There are three general ways to create an automatically played audio object:

The first is to create an audio tag on the page and write relevant attributes, such as autoplay =’autoplay ‘. Normally, after writing the resource address here, it can be played automatically after accessing the page. However, if the music resource address is uncertain and needs to be changed by JS, it needs to be implemented by JS.


(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 one is similar to the first one, except that all 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();
    })();

The third method: without any DOM tags, create an audio object using JS, and then use js to control various APIs of the audio object to realize 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();
    })();

Attachment: of the above three methodsdemo

In addition, a third-party library is added to realize the playback and control of audio resources. Sorted out some third-party libraries. The functions are not only playing music, but also some other functions. Study this by yourself.


howler.js: http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library
buzz.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 on the iPhone(detailed description)And some Android phones still can’t play automatically.

His playing condition is that there must be user behavior operation before playing.

Therefore, we need to consider how to simulate the user’s operation? Some methods are provided on the network to realize automatic playback, such as:

  • Create an image object, and then monitor whether the image is loaded. If it is loaded, execute audio playback to achieve the effect of automatic playback
  • A similar method is to create an iframe. The resource is directly the address of the audio resource. After the iframe is loaded, it can be played automatically
  • Bind a touchstart event to the document or body so that the user can trigger playback as long as he touches the page

The first two items mentioned above have basically no effect. As for Article 3, this is certainly no problem, but this method is not completely automatic playback, because it is entirely possible that the user will not play if he does not touch the page. However, it can be used in some scenarios, which should be distinguished.

Then I thought, can you monitor whether the mobile phone is moving or moving to play audio? I monitored devicemotion(detailed description)Events, found or not, at this time I have been messy, 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 the 5S mobile phone I tested doesn’t work… Similarly, there is no problem with other 5S. The specific reason has not been found out so far, so I silently ignored him.

In order to improve the experience of those that cannot be played automatically, a touchstart event is bound, so that even if they cannot be played automatically, they can be played at least on the touch page, which is an experience improvement.

Supplement: May 31, 2015Automatic playback of IOS wechat audio and video

The above is the details of the problem of automatic audio playback of HTML5 pages. For more information about automatic audio playback of HTML5, please pay attention to other relevant articles of developeppaer!