HTML5 audio 使用 autoplay 仍然無法自動撥放
Temperature: 0 °C
背景音樂，是早期網站系統經常性使用的一種技術。
在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/
#故事 #html5 #audio #autoplay #背景音樂
https://innstory.com/story-HTML5_audio_使用_autoplay_仍然無法自動撥放-2877
寫程式筆記
