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