資訊專欄INFORMATION COLUMN
摘要：但是，新版的瀏覽器禁止了自動(dòng)播放音頻的功能，見(jiàn)鬼了。當(dāng)然，這不是特例，像全屏操作，瀏覽器也是禁止腳本操作的。具體實(shí)現(xiàn)靜音自動(dòng)播放循環(huán)播放如果是輪詢，這個(gè)時(shí)間必須大于音頻的長(zhǎng)度。
前言
也許很多前端遇到過(guò)這個(gè)需求：消息提醒。
一般來(lái)說(shuō)，可以簡(jiǎn)單的實(shí)現(xiàn)絕不會(huì)用復(fù)雜的方式，audio標(biāo)簽提供了這個(gè)功能。
但是，新版的chrome瀏覽器禁止了js自動(dòng)播放音頻的功能，見(jiàn)鬼了。
這是最簡(jiǎn)單的音頻播放腳本，但是在chrome下，拋出異常：Uncaught (in promise) DOMException，原因是這種操作必須由用戶發(fā)起。當(dāng)然，這不是特例，像F11全屏操作，瀏覽器也是禁止腳本操作的。
但是我們有這個(gè)需求，怎么破？
能否不操作play呢？
chrome不僅禁止了腳本自動(dòng)調(diào)用play，還禁止了audio的autoplay屬性。
但是，如果音頻是靜音狀態(tài)，autoplay屬性還是可以生效的。意思是，你可以播放，但是不能干擾用戶的視聽(tīng)。
這就給我們提供了一個(gè)hack的方法：
默認(rèn)開(kāi)啟音頻的靜音播放，而且是循環(huán)播放，當(dāng)我們需要提醒用戶的時(shí)候，把聲音打開(kāi)，播放時(shí)間設(shè)置為0秒，播放完畢，關(guān)掉聲音，繼續(xù)循環(huán)。
是的，音頻一直在播放，但是用戶聽(tīng)不見(jiàn)。只有我們想讓用戶聽(tīng)見(jiàn)的時(shí)候才能聽(tīng)見(jiàn)，客觀上也能實(shí)現(xiàn)需求。
結(jié)語(yǔ)
這個(gè)方法經(jīng)過(guò)在chrome上的實(shí)測(cè)，可以使用。
但是其他瀏覽器未做測(cè)試，據(jù)說(shuō)有的瀏覽器，似乎是IE不支持muted屬性，限于操作系統(tǒng)，沒(méi)做測(cè)試，如果在IE運(yùn)行有問(wèn)題，可以給我提個(gè)醒。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102228.html
摘要：一什么是瀏覽器兼容問(wèn)題所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。 一、什么是瀏覽器兼容問(wèn)題 所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無(wú)論用戶用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都...
摘要：基本用法屬性目前只支持你可以看出他們?cè)诶锉憩F(xiàn)的差異關(guān)于標(biāo)簽支持的音頻類型，可以參考常用屬性音頻流文件就緒后是否自動(dòng)播放無(wú)需預(yù)加載只需要加載元數(shù)據(jù)，例如音頻時(shí)長(zhǎng)，文件大小等。 我覺(jué)得DOM就好像是元素周期表里的元素，JS就好像是實(shí)驗(yàn)器材，通過(guò)各種化學(xué)反應(yīng)，產(chǎn)生各種魔術(shù)。 showImg(https://segmentfault.com/img/bVO9vK?w=1440&h=814); ...
閱讀 1716·2021-10-12 10:11
閱讀 3837·2021-09-03 10:35
閱讀 1498·2019-08-30 15:55
閱讀 2204·2019-08-30 15:54
閱讀 1045·2019-08-30 13:07
閱讀 1112·2019-08-30 11:09
閱讀 630·2019-08-29 13:21
閱讀 2716·2019-08-29 11:32
