Audio and video automatic playback solution

1. Use background

The company project needed to use the audio autoplay feature, and the autoplay attribute came to mind first.

The easiest way to make content auto-play is to add the autoplay attribute to the element and set the autoplay attribute to true. When the autoplay attribute is true, the media element will automatically start playing as soon as possible after:

  • The page allows autoplay
  • Media elements are created during page loading
  • Assume that the network performance or bandwidth does not change significantly, and sufficient media streams have been received and started to play. Continue playing until the media ends without interruption.

However, in the actual operation, it is found that the automatic playback fails and the following error occurs

Uncaught (in promise) DOMException: Play () failed because the user didn't interact with the document first.

This problem bothered me for a long time, and the process of solving it was very bumpy, so I decided to record the solution. The following is some information I found in the process of solving the problem and the solution to the problem.

Why do you want to prohibit automatic audio and video playback

Playing audio (or video with an audio track) immediately after a web page has loaded can accidentally disturb users. While autoplaying media files is a useful feature, it should be used sparingly and only when needed. To give the user control, browsers often provide ways to disable autoplay audio. In this article, we’ll cover the autoplay features of various media and Web Audio APIs, including a brief introduction to how to use autoplay and how to gracefully handle blocking autoplay.

The following network features and apis may be affected by autoplay blocking:

  • The HTML and element
  • The Web Audio API

3. Automatic play policy for the Audio TAB in Chrome

Chrome’s autoplay policy is simple:

  • Always allow mute auto play

  • A top-level framework can delegate autoplay permissions to its IFrame to allow autoplay

  • Automatic sound playback is allowed in the following cases

    • Users already interact with web pages, including clicking, touching, pressing a key, and so on. (Use pop-ups to direct the user to click the page button)
    • On the desktop version of Chrome, the user’s media Engagement index threshold has been exceeded, meaning that the user has played audio videos before. (The Index of Media Engagement is described below.)
    • Users have added the site to the home screen on their mobile device or installed it on their desktopPWA.

Because I am in the PC side development, so only according to the above conditions summed up several solutions:

  1. Setting audio to true gave muted play, but this didn’t give me the fraternal need
  2. useiframe.<iframe src = "xxxxx.mp3" allow = "autoplay"/>
  3. Using the audio tag, willautoplaySet to true to interact with the page when playback fails (popup leads the user to click) to implement automatic playback

Iv. Solutions

The project also needs to realize other functions on audio, so it is more convenient to use the third scheme.

Now that the third option is chosen, how do you check for auto-play failures? In fact, no event is triggered when autoplay fails. No exceptions are thrown or callbacks can be set, and there’s not even a tag on the media element to tell you if autoplay is working. Instead of just relying on autoplay, we can use the Play method toplay. When the play method is executed, it returns a promise. We can use the promise to determine whether the current play is successful or failed, and make corresponding solutions after the failure

document.querySelector("audio").play();
let startPlayPromise = audioElem.play();
​
if(startPlayPromise ! = =undefined) {
  startPlayPromise.catch(error= > {
    if (error.name === "NotAllowedError") {
      // A popup directs the user to interact with the page with a simple button
      // Bind a callback function with the play() method to the button, as in the case of the element-Plus component
      ElMessageBox.alert('Audio is currently playing automatically'.'tip', {
        confirmButtonText: 'confirm'.callback: () = >{ audioElem.play(); }})}else {
      // Handle a load or playback error
    }
  }).then(() = > {
    // Start whatever you need to do only after playback
    // has begun.
  });
}
​
Copy the code

V. Go one step further

What if the product sees this popup and is very upset, and insists that we implement autoplay as little as possible without the user being aware of the need for interaction?

If I bind the interaction event to the document element in advance, I can interact with the page without the user being aware of it.

/ / click
document.addEventListener('click'.() = > {
    document.querySelector("audio").play();
});
​
// Listen for mouse movement events
document.addEventListener('mousemove'.() = > {
    document.querySelector("audio").play();
});
Copy the code

Vi. MEI Media Engagement Index

In the browsing with Chorme as the kernel, the MEI (Media Engagement Index) list is set. The list length is 1000, which is used to measure whether a user is a “loyal user” of the website. When MEI ranking is high enough, it can play automatically.

MEI measures the propensity of individuals to consume media on websites. Chrome’s current approach is the ratio of visits per source to important media play events:

  • Media (audio/video) consumption must be greater than 7 seconds.
  • The audio must be present and unmuted.
  • The TAB with the video is active. (Display: None, visibility: hidden, etc.)
  • Video size (topxMust be greater than200x140.

As a result, Chrome calculates a media engagement score that is high enough on sites that regularly play media to allow media to play automatically on the desktop.

You can find a user’s MEI on the Chrome ://media-engagement internal page.