Loading...

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

Temperature: 0 °C

ChungChung
author_tools

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

在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屬性。

以上紀錄~

HTML5 audio 使用 autoplay 仍然無法自動撥放
照片出處 https://www.pexels.com/zh-tw/photo/3587496/
 

#故事  #html5  #audio  #autoplay  #背景音樂  
https://innstory.com/story-HTML5_audio_使用_autoplay_仍然無法自動撥放-2877
寫程式筆記

Prev
 我不要睡覺我要關眼睛關嘴巴

Next
不給糖就搗蛋 

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

SONY XPERIA 強制重新啟動..

SONY XPERIA 強制...

現在的心情有點小複雜.... 我習慣在開了一整天的電腦要關機休息時.... 在等待關機及臨睡前......

添購新設備Synology DiskStation DS1520+

添購新設備Synology ...

處理器型號 Intel Celeron J5 CPU 數量 處理器架構 bit 處理器時脈 core...

參加Startup Hackfest

參加Startup Hack...

參加Startup Hackfest

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format