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()  //重新加载

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页