项目的需求是:Input输入数据后自动回车调用接口,当接口返回错误信息时,app页面除了会弹出一个弹窗外还要同时发出警报声
遇到的问题:在web上调试可以发出滴滴的声音,但是文件打包后,手机端打开后没有声音。
原因:百度到也就以下几种:
1.src的地址写错
2.移动端的限制,一定要用户交互才能触发audio。
尝试1:我写了一个Button按钮,按下Button就实现了用户交互,尝试是否可以触发,代码如下:
<div style={{ height: '100%', width: '100%' }}>
<Button onClick={() => { this.ceshi() }}>12132</Button>
<audio autoPlay="autoplay" id="auto" src="" volume=""></audio>
<div>
ceshi =()=>{
let auto = document.getElementById('auto')
auto.src = 'http://data.huiyi8.com/2017/gha/03/17/1702.mp3'
auto.volume =1
auto.load()
auto.play()
}
结果是app运行时点击按钮会触发audio,播放声音。也就确定的确是要用户交互才能触发audio
最终 解决方案:
1.用户交互除了可以使用touchstart事件(当手指触摸屏幕会触发),具体实现百度一搜一大把
2.还可以使用回车事件,主要记录的就是这个回车事件:
思路:(因为我的项目是需要回车事件,回车也是一种用户交互行为)
监听回车事件,当用户点击回车的时候,写audio事件,先触发audio,让警报生声音静音 volume =0;后续接口返回值就会正常报警。
3.音乐名不能出现中文,不然无法播放