フロントエンドは、ページ上でオーディオを自動的に再生するメソッドを実装します。

前提

ページでアラーム音を自動的に再生する必要があるため、audio タグの属性をautoplaytrue に設定します。自動再生に失敗し、次のエラーが表示されることがわかります。

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

オーディオとビデオの自動再生を無効にする必要がある理由

Web ページの読み込みが完了した直後にオーディオ (またはオーディオトラックを含むビデオ) を再生すると、誤ってユーザーの邪魔をする可能性があります。メディアファイルの自動再生は非常に便利な機能ですが、使用には注意し、必要な場合にのみ使用する必要があります。ユーザーに制御を提供するために、ブラウザでは多くの場合、自動再生オーディオ機能を無効にするさまざまな方法が提供されています。Web Audio APIs この記事では、自動再生の使用方法と自動再生のブロックをエレガントに処理する方法の簡単な紹介を含め、さまざまなメディアとメディアの自動再生機能を紹介します。

自動再生機能

新しいポリシーによると、次の条件の少なくとも 1 つが満たされる場合、メディアコンテンツは自動的に再生されます。

音声がミュートされているか、音量が 0 に設定されています
ユーザーが Web ページを操作しました (クリック、タッチ、キーの押下など)。
サイトはホワイトリストに登録されています。これは、ユーザーが頻繁にメディアを操作するとブラウザが判断した場合に自動的に行われる場合もあれば、環境設定やその他のユーザーインターフェイス機能を通じて手動で行われる場合もあります。
自動再生ポリシーは<iframe>またはそのドキュメントに適用されます

そうしないと、再生がブロックされる可能性があります。再生がブロックされる正確な状況と、サイトをホワイトリストに登録する正確な方法はブラウザごとに異なりますが、上記のガイドラインに従うことが最善です。

詳細については、「Google Chrome と WebKit の自動再生ポリシー」を参照してください。

解決

オーディオに対して他の操作が行われる可能性があることを考慮して、2 番目のオプションを選択します。自動再生が失敗したことはどのようにしてわかりますか? 実際、自動再生が失敗してもイベントはトリガーされず、例外やコールバックもスローされません。そうなると、自動再生に頼ることはできません。代わりに、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
          });
      }
    },

読む：

MEIメディアエンゲージメントインデックス

chormeコアブラウジングでは、 MEI (Media Engagement Index) リストが設定されます。リストの長さは 1000 で、ユーザーが Web サイトの「忠実なユーザー」であるかどうかを測定するために使用されます。MEI ランキングが十分に高い場合は、自動的に再生できます。

MEI は、Web サイト上のメディアを消費する個人の傾向を測定します。Chrome の現在のアプローチは、ソースごとの重要なメディア再生イベントへのアクセスの割合です。

メディア (オーディオ/ビデオ) の消費は 7 秒を超える必要があります。
音声が存在する必要があり、ミュートにすることはできません。
ビデオのあるラベルがアクティブです。（個人的な感覚では、表示：なし、可視性：非表示などの設定はできないと思います）
ビデオサイズpx(単位) は200x140より大きくなければなりません。

このことから、Chrome によって計算されたメディアエンゲージメントスコアが、メディアが定期的に再生されるサイトで十分に高い場合、Chrome ではデスクトップでのメディアの自動再生が許可されます。

ユーザーの MEI は、chrome://media-engagement 内部ページで確認できます。