chrome瀏覽器下audio自動播放的hack

Little_XM 發布于2019-08-23 15:33 / 1963人閱讀

摘要：但是，新版的瀏覽器禁止了自動播放音頻的功能，見鬼了。當然，這不是特例，像全屏操作，瀏覽器也是禁止腳本操作的。具體實現靜音自動播放循環播放如果是輪詢，這個時間必須大于音頻的長度。

前言

也許很多前端遇到過這個需求：消息提醒。
一般來說，可以簡單的實現絕不會用復雜的方式，audio標簽提供了這個功能。
但是，新版的chrome瀏覽器禁止了js自動播放音頻的功能，見鬼了。

音頻播放

這是最簡單的音頻播放腳本，但是在chrome下，拋出異常：Uncaught (in promise) DOMException，原因是這種操作必須由用戶發起。當然，這不是特例，像F11全屏操作，瀏覽器也是禁止腳本操作的。
但是我們有這個需求，怎么破？

絕不屈服的腦洞

能否不操作play呢？
chrome不僅禁止了腳本自動調用play，還禁止了audio的autoplay屬性。
但是，如果音頻是靜音狀態，autoplay屬性還是可以生效的。意思是，你可以播放，但是不能干擾用戶的視聽。
這就給我們提供了一個hack的方法：
默認開啟音頻的靜音播放，而且是循環播放，當我們需要提醒用戶的時候，把聲音打開，播放時間設置為0秒，播放完畢，關掉聲音，繼續循環。
是的，音頻一直在播放，但是用戶聽不見。只有我們想讓用戶聽見的時候才能聽見，客觀上也能實現需求。

具體實現

結語

這個方法經過在chrome上的實測，可以使用。
但是其他瀏覽器未做測試，據說有的瀏覽器，似乎是IE不支持muted屬性，限于操作系統，沒做測試，如果在IE運行有問題，可以給我提個醒。

云服務器 GPU云服務器抖音自動播放下一個視頻 webrtc audio播放 webrtc切換audio播放設備 webrtc+chrome+播放

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102228.html

瀏覽器兼容問題

摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。條件注釋最初于微軟的瀏覽器中出現，并且直至均支持。一、什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統，都...

wenshi11019 2019-08-26 13:57 評論0 收藏0
Audio: 如果你愿意一層一層剝開我的心

摘要：基本用法屬性目前只支持你可以看出他們在里表現的差異關于標簽支持的音頻類型，可以參考常用屬性音頻流文件就緒后是否自動播放無需預加載只需要加載元數據，例如音頻時長，文件大小等。我覺得DOM就好像是元素周期表里的元素，JS就好像是實驗器材，通過各種化學反應，產生各種魔術。 showImg(https://segmentfault.com/img/bVO9vK?w=1440&h=814); ...

wangjuntytl 2019-08-20 17:14 評論0 收藏0