為什麼網站一進場，不能播放一個歡迎消費者的音樂呢？或者提供一部聲效果俱佳的歡迎影片？

這也是我們許多客戶想做卻沒有辦法提供的功能。今天這篇文章介紹一下，現今的網路瀏覽器的機制。

本文章目次

• 過去的回憶：網站背景音樂
• 現代的網路世界：禁止驚嚇使用者（Autoplay Policy）
• Autoplay Policy 機制如何運作
• 影音網站怎麼辦？
• 實務的作法
• 結論：讓使用者開心，才會用你的網站

過去的回憶：網站背景音樂

許多資深或從小開始玩網路、嘗試架設烘焙機、或早期網路玩家等等，熟悉的一件事就是網站背景音樂。例如古早手工編寫 HTML 的時代，大家常常會在網站上放置 midi 水晶音樂。或者無名時代，可以掛載流行音樂 mp3 當做小工具 (Widget)。骨灰級網路使用者回想起來肯定淚流滿面。

現代的網路世界：禁止驚嚇使用者（Autoplay Policy）

很可惜的，到了 2018 年左右，歐美的網路世界漸漸形成一種共識，這種會突然跳出聲音、或者在使用者沒有授權就自動調用喇叭播音樂的行為，開始被認為是個人權益的侵犯。而因為廣告自動播放有聲影片的網站越來越多，使用者常常找不到正在播放音樂的頁籤是哪一個，而不得不忍受重疊的背景音樂（一首音樂很悅耳，三首一起播放就會令人抓狂）。

所以各大主流瀏覽器如 Chrome, Safari, Firefox 逐漸引進了一種機制，叫做 Autoplay Policy，他制定了一系列播放影音的規定，假設使用者是第一次造訪某個網站：

• 如果影片是禁音或無聲音的，允許無聲自動播放

• 如果是有聲音的影音要自動播放，需滿足以下條件：

  • 使用者必須與網站進行互動過（點擊、滾動等等）

  • 桌面瀏覽器上，使用者必須滿足一個互動指標的閾值，又叫做「媒體參與指數 (MEI) 」，例如已多次互動過，或者手動開啟過聲音，這會被轉換成一個互動分數

  • 使用者已經將這個網站加入至手機主螢幕，或者安裝 PWA 應用。

• 如果影片是在 iframe 中播放的，網頁可以將目前的自動播放權限下放給 iframe（用於處理類似 Youtube 這樣得嵌入式影片）

Autoplay Policy 機制如何運作

簡單來說，當你首次進入一個網站。如果網站自動播放了一首音樂或是有聲音的影片，而你根本尚未與網站互動過，那麼瀏覽器會強制停止播放，程式會收到一個 Error 警告。工程師可以用這個 Error 警告顯示提示訊息告訴使用者「您尚未互動過，所以無法播放，請您自行打開聲音選項」。所以，過往的打開網站就被聲音嚇到的日子不會在出現了。

如果您真的想要聽到聲音，唯一的作法就是要對網站做互動操作，例如點擊、滾動、手動打開影片上的聲音或是手動播放音樂。一旦做了這些操作，且滿足了互動閾值，下次進到網站時，就會自動播放了。

以 Chrome 瀏覽器來說，他的閾值（媒體參與指數 (MEI)）是衡量個人在網站上使用媒體的傾向。 Chrome 的方法是計算每個來源的重要媒體播放事件的存取比率：

• 媒體（音訊/視訊）的消耗必須大於 7 秒。

• 音訊必須存在且未靜音。

• 包含影片的頁籤處於使用狀態。

• 視訊大小（以像素為單位）必須大於200x140。

等等，每家瀏覽器的能都會有部分差異。

影音網站怎麼辦？

您可能會問：那 Youtube 那些網站，為什麼能自動播放音樂？這是因為基本上您在使用網路的過程中，一定早就與 Youtube 的網域互動過，例如從別的網站的嵌入頁面觀看過 Youtube 頁面，所以大多數影音網站的互動閾值早就超過了。

另外，這些網站也會很聰明的做一些手法，例如 Youtube 通常不會在你打開頁面時就自動播放，而是要等到您從其他頁籤轉回來看到影片後，才開始播放，這時候你可能早就做過其他互動了，所以產生了無縫播放聲音的感覺。

實務的作法

由於以上機制的存在，現在的網站設計，更建議要把影音播放提供給使用者自主操作。例如明顯的提供一個手動播放按鈕，當自動播放被政策擋住時，使用者依然有權力自己啟動影音。

或者單純的將影片靜音播放，當成是動畫展示，以避免驚嚇使用者，這都是較為現代化的處理方式。例如下圖是我們的影片展示（金融網站設計），採用靜音的方式無縫播放，帶來流暢的體驗。

結論：讓使用者開心，才會用你的網站

現代的網站琳琅滿目，充滿視覺特效與廣告，因此，三不五時彈出干擾性的聲響，可能會讓使用者提早關掉你的網站，反而造成損失。將主導權轉回消費者身上，讓他們自己決定何時播放您的影片與聲音，更能讓使用者感受到被尊重，進而繼續瀏覽網站並消費。

如果您要做一個圖文與影音並茂的網站，夏木樂專精於超大型影音上傳管理 (超過 4G)、串流音樂播放器 與影音防盜機制等等現代化影音平台製作技術，歡迎聯繫我們取得最佳建議。