前端实现页面自动播放音频方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端实现页面自动播放音频方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前提

需要页面自动播放一段报警声音，将audio标签的autoplay属性设置为true，发现自动播放失败，并出现如下报错：

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

为什么要禁止自动播放音频与视频

网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。在这篇文章中，我们将介绍各种媒体和 Web Audio APIs 的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。

Autoplay 功能

据新政策，媒体内容将在满足以下至少一个的条件下自动播放：

音频被静音或其音量设置为 0
用户和网页已有交互行为（包括点击、触摸、按下某个键等等）
网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
自动播放策略应用到<iframe>或者其文档上

否则，播放可能会被阻止。导致播放被阻塞的确切情况以及将网站列入白名单的具体方法因浏览器而异，但最好是遵循以上的原则。

详情，请参阅 Google Chrome 和 WebKit 的自动播放政策。

解决方案

考虑到音频上可能还会有其他操作，选择第二种方案。如何知道自动播放失败了呢？其实自动播放失败时不会触发任何事件，也没有抛出异常或回调。那么便不能依赖autoplay。而是使用play函数模拟自动播放，play函数执行时会返回一个promise，可以根据promise来判断当前的播放是成功了还是失败了，并且在失败后做出相应的提示。

    // 页面加载事件中执行 this.playWarn()


    // 提示音弹窗，需要用户手动点一次才可以让浏览器播放音频
    applyPlayConfirm() {
      const audio = document.querySelector("audio");
      this.$confirm("请开启本次报警声音提醒", "提示", {
        type: "info",
        showClose: false,
        showCancelButton: false,
        closeOnPressEscape: false,
        closeOnClickModal: false,
        confirmButtonText: "确定",
        callback: () => {
          // 用户点击过后 即可播放
          audio.play();
        },
      });
    },

    // 申请播放音频，只需用户点击页面任意位置
    playWarn() {
      const audio = document.querySelector("audio");
      let startPlayPromise = audio.play();
      if (startPlayPromise !== undefined) {
        startPlayPromise
          .catch((error) => {
            if (error.name == "NotAllowedError") {
              this.applyPlayConfirm();
            } else {
              // Handle a load or playback error
            }
          })
          .then(() => {
            // Start whatever you need to do only after playback
          });
      }
    },