关于移动端audio自动播放问题

项目的需求是：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.音乐名不能出现中文，不然无法播放