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

原來種九層塔並不需要種子啊~

原來種九層塔並不需要種子啊~...

5 我真的很愛九層塔的香味~ 在台灣,從小吃鹹酥雞到家庭料理九層塔煎蛋都少不了這一味。 當然更別說是...

分享高雄青年路懸日 大砲快門按不停 | 綜合 | 聯合影音

分享高雄青年路懸日 大砲快門...

一年中總會有幾天的高雄青年路上無比美景~真的好有感覺啊.....

分享【全部免費!】網頁設計師必備,25 種質感字體讓你的作品與眾

分享【全部免費!】網頁設計師...

從事網站建置工作已經多年,這方面的資訊卻是永遠都學不完啊~ 雖然有東西學是好事,但也挺累的........

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