Troubleshooting Browser Audio Autoplay Restrictions and the Media Engagement Index

Background

A client reported that the alarm sound on a large‑screen web application no longer plays automatically when an alert occurs. The expected behavior is that the audio should start without any user interaction.

Reproduction Steps

When the page is opened directly, the audio does not autoplay.

When navigating to the page from another page, the sound plays automatically.

The article includes screenshots illustrating the problem.

Error Investigation

Opening the browser console reveals a NotAllowedError , indicating that playback was blocked because the user has not interacted with the document first.

Reference: Chrome autoplay policy

Attempted Fixes

Adding a click handler to the body and triggering a click programmatically was tested, but browsers (e.g., Chrome) still block the playback.

Reference to Other Sites

Testing on a popular video platform (Douyin) showed that pages with a high Media Engagement Index (MEI) can autoplay audio without user interaction.

To inspect the MEI, navigate to about://media-engagement in Chrome; a high score allows autoplay.

Solution

The recommended approach is to attempt playback and handle failures gracefully. If a NotAllowedError occurs, show a notification prompting the user to click and enable audio.

this.alarmAudio = new Audio(require("@/assets/sound/alarm.mp3"));
this.alarmAudio.play()
  .then(() => {
    this.notifyId && this.notifyId.close();
  })
  .catch(error => {
    if (error instanceof DOMException && error.name === "NotAllowedError") {
      if (this.notifyId) return;
      this.notifyId = Notification({
        title: "",
        duration: 0,
        position: "bottom-left",
        dangerouslyUseHTMLString: true,
        onClick: this.onAudioNotifyConfirm,
        showClose: false,
        customClass: "audio-notify-confirm",
        message: "
Due to browser restrictions,
click to enable sound
"
      });
    }
  });

This notification appears when playback is blocked, allowing the user to click and trigger the audio.

Summary

Never assume audio/video will play automatically; always add .catch() handling and provide user‑friendly prompts.

Autoplay depends on the Media Engagement Index; a high MEI permits automatic playback, otherwise user interaction is required.

Opening a new window from an existing page can bypass the restriction, but refreshing the page resets the MEI, so design accordingly.