innstory

HTML5 audio 使用 autoplay 仍然無法自動撥放

背景音樂，是早期網站系統經常性使用的一種技術。

在MIDI流行的年代，我們會在HTML上使用embed標籤並賦予autostart屬性。

這樣的方式會讓瀏覽網站的使用者在開網頁的同時自動播放音樂，得到意外的驚喜，畢竟音樂也是能觸發情緒的一種媒介。

但隨著各種影音格式產出，例如mp3、mp4，能夠撥放的影音越來越多元，加上每個製作網站的作者對音樂的喜好不一。

所以常常意外的驚喜在不合時宜的時間會演變成不受歡迎的驚喜，例如夜深人靜時我開一個網站然後喇叭沒關，從喇叭傳來重金屬搖滾樂....。

因為會有這樣的突發狀況產生，所以在目前，這種無需用戶特別請求開始播放即可開始播放音頻的任何功能。

包括使用 HTML 屬性自動播放媒體以及 JavaScript 代碼的用戶在處理用戶輸入的上下文之外開始播放。

這種行為都被視為自動播放行為，都會受瀏覽器的自動播放阻止策略的約束。

當然也是有例外的，請參考以下HTML5範例。

HTML5所使用的自動播放標籤如下：

＜audio controls=＂controls＂ autoplay＞

＜source src=＂music.ogg＂ type=＂audio/ogg＂＞

＜source src=＂music.mp3＂ type=＂audio/mpeg＂＞

Your browser does not support the audio element.

＜/audio＞

但上述這樣的方式並無法得到瀏覽器的認同，所以會受瀏覽器的自動播放阻止策略的約束，也就是說無法執行自動撥放。

但若加上muted屬性那麼狀況就不一樣了，如下：

＜audio controls=＂controls＂ autoplay playsinline muted＞

＜source src=＂music.ogg＂ type=＂audio/ogg＂＞

＜source src=＂music.mp3＂ type=＂audio/mpeg＂＞

Your browser does not support the audio element.

＜/audio＞

加入muted屬性，以及playsinline在 Safari 中自動播放所需的屬性。

這時影音將可以執行自動播放但會是靜音，使用者則可以通過單擊控件中的取消靜音按鈕來重新啟用音頻。

以這樣的方式來達到自動播放的目的也可以避免不受歡迎的驚喜。

另外如果想要達到自動循環播放也可以加上loop屬性。

以上紀錄~


照片出處 https://www.pexels.com/zh-tw/photo/3587496/