react 專案 使用react-audio-player,避免chrome無法自動開啟聲音問題
在做一些資料進行推送告警的時候,chrome瀏覽器安全限制會遮蔽聲音響應,解決辦法可以使用 react-audio-player 外掛
1.安裝
npm install --save react-audio-player
2.使用
import ReactAudioPlayer from 'react-audio-player';
import sounds from '@/assets/audio/alarm.mp3'
let audiosDom; //音訊
const audioRef = useRef(null)
<ReactAudioPlayer
src={sounds}
autoPlay={false}
ref={audioRef}
/>
3. 播放
audioRef.current.audioEl.current.play()
4.過載,暫停
audiosDom = audios.current
audiosDom.pause() //停止(暫停)
audiosDom.load() //重新載入
相關文章
- Chrome 自動升級後,本地專案都無法訪問Chrome
- linux 下chrome 聲音問題LinuxChrome
- Chrome 66禁止聲音自動播放之後Chrome
- 手動下載 Chrome,解決 puppeteer 無法使用問題Chrome
- MyEclipse轉換Eclipse專案無法啟動問題(轉)Eclipse
- 新版Chrome http訪問無法開啟攝像頭ChromeHTTP
- 解決ASM無法啟動問題ASM
- mac下mysql無法啟動問題MacMySql
- 奇聲音響自動關閉的問題解決了
- 求助:supervisor無法啟動beego專案Go
- Oracle Haip無法啟動問題學習OracleAI
- ASM無法啟動的問題分析(一)ASM
- ASM無法啟動的問題分析(二)ASM
- LnixuAS3Mysql無法啟動問題S3MySql
- ASM無法自動載入磁碟組問題ASM
- 【ASM】ASM啟動無法找到spfile問題原因ASM
- 某個Eclipse無法啟動的問題Eclipse
- MacBook 播放器無聲音 (排除硬體問題)Mac播放器
- 解決無法自動掛載U盤問題
- 解決重灌系統後重新下載eclipse無法開啟之前專案的問題Eclipse
- pm2開機自啟動專案
- VMWARE啟動虛機報錯無法開啟檔案
- mongoDB非正常關閉後無法啟動問題MongoDB
- 解決ORACLE無法啟動安裝的問題Oracle
- 關於listener無法啟動的問題解決
- Windows 10 自帶App無法使用,開啟閃退WindowsAPP
- chrome瀏覽器win10無法啟動怎麼辦_chrome瀏覽器win10無法啟動如何解決Chrome瀏覽器Win10
- Maven專案無法引入 Maven Dependencies Libraries 問題Maven
- 避免問題依舊的新專案 (轉)
- 避免問題依舊的新專案(轉)
- win10自動修復重啟,無法開機Win10
- Chrome 關閉網頁聲音Chrome網頁
- Spy Accodition在Firefox無法自動伸展的問題Firefox
- Workstation服務無法啟動導致無法訪問檔案伺服器伺服器
- 求助!使用vagrant啟動時無法掛載檔案
- mysql因為事務日誌問題無法啟動MySql
- Oracle日常問題處理-資料庫無法啟動Oracle資料庫
- Oracle日常問題-資料庫無法啟動(案例二)Oracle資料庫