Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

来源:https://www.cnblogs.com/xsong/archive/2018/12/03/10057555.html
-Advertisement-
Play Games

最近在開發一個網站時,有個需要是 如果有新預警信息要在網頁中播放提示音。頁面打開會請求是否有新信息,有則播放提示音。在Chrome的最新瀏覽器中,播放會報錯,控制台顯示Uncaught (in promise) DOMException: play() failed because the user ...


最近在開發一個網站時,有個需要是 如果有新預警信息要在網頁中播放提示音。頁面打開會請求是否有新信息,有則播放提示音。在Chrome的最新瀏覽器中,播放會報錯,控制台顯示Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.搜索發現Chrome 66為了避免標簽產生隨機噪音禁止沒有交互前使用js進行播放。最後解決方案為 在chrome地址欄輸入chrome://flags/。設置Autoplay policy為No user gesture is required。目前想到的解決方案只有這個了,如果有大神有更好的方案歡迎評論。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 12.3事件對象 1.每個元素身上的事件都是天生自帶的,不需要我們去定義,只需要我們給這個事件綁定一個方法, 2.事件綁定的寫法 1.div.onclick=function(){} DOM 0級事件綁定 2.div.addEventListener()或div.attachEvent() DOM2 ...
  • 內置類型 JS 中分為七種內置類型,七種內置類型又分為兩大類型:基本類型和對象(Object)。 基本類型有六種: ,`undefined boolean number string symbol`。 其中 JS 的數字類型是浮點類型的,沒有整型。並且浮點類型基於 IEEE 754標準實現,在使用中 ...
  • 參考資料:CSDN-真實的上傳進度條 ...
  • 聲明 本系列文章內容全部梳理自以下幾個來源: 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/JavaScript" 作為一個前端小白,入門跟著這幾個來源學習,感謝作者的分享,在其基 ...
  • React Router是一個基於React之上的強大路由庫,可以讓你嚮應用中快速的添加視圖和數據流,同時保持頁面與URL間的同步。 1.安裝: 2.問題說明: 剛開始的時候由於沒有註意到版本信息,導致出現了一些錯誤,現在記錄如下: 這是我package.js中的版本信息, 說明1:react-ro ...
  • "前言" 繼上一次webpack的基礎配置分享之後,本次將分享一些工作中項目常用的配置插件、也會包含一些自己瞭解過覺得不錯的插件,如有分析不到位的,歡迎糾錯, 嗯,這些東西文檔都有,大佬可繞過 。 Wepack4之後廢棄了很多的插件,這裡只會講解webpack4還支持的( ),已經廢棄的將不再闡述。 ...
  • 初來乍到,算是一個博客園的新人,受了園裡許多前輩的啟發正在一點點定製自己的小空間。 也希望我的文章能夠成為大家DIY的啟發,就算是拋磚引玉了。效果可以直接在我的博客中看到,所以不另外貼圖了。 引入js文件與css文件 引入js文件需要先申請js許可權,語言誠懇一點幾個小時(?)就可以拿到許可權了。 引入 ...
  • 上一篇寫的是左右寬高固定,中間自適應,根據上一篇的內容,總結了下上下寬高固定,中間自適應的幾種佈局方式,話不多說,直接上代碼。 下邊圖片是代碼運行的效果圖,大家可以運行代碼試試看。 自己總結的,有不對的地方歡迎大家指正! ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...