react 專案 使用react-audio-player,避免chrome無法自動開啟聲音問題

愛吃排骨發表於2020-09-27

在做一些資料進行推送告警的時候,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()  //重新載入

 

相關文章