解决苹果浏览器ios音频播放audio.play()失败

其实不止是苹果手机safari浏览器会播放失败，谷歌，QQ等也会，但夸克好像不存在这个问题，这是浏览器出于对用户的一种保护，禁止一进入页面就播放声音，必须用户先与页面交互，才能播放。如果JS有用户未交互直接播放音乐的行为，那么后面即使用户有了交互行为，play()方法好像也都会失效，解决办法就是让用户自己去触发。我做了两种场景的音频播放。

1，一进入页面，直接播放音乐，没有音频控制条，相当于背景音乐。

2，对话聊天，来消息时的提示音。

第一种场景解决办法，添加touchstart事件，用户一触发事件就使用play()播放，

  document.addEventListener('touchstart',()=>{

        document.getElementById('music').play()

    })

对于动态添加音乐标签的，应该也适用。

第二种场景解决办法，同样添加touchstart事件，用户一触发事件就使用play()播放，但是是消息提示音，所以不能一进来就放出声音，要及时暂停。

 document.addEventListener('touchstart',()=>{

        document.getElementById('noticeMusic').play()

            let timer = setTimeout(()=>{

                document.getElementById('noticeMusic').pause()

                clearTimeout(timer)

            },1)

  })

后续继续使用play()就能播放成功了。

对于PC端浏览器，一般自动播放没问题，即使用户没有交互，不一般的情况就是浏览器对该网页的声音播放做了限制，对于谷歌浏览器，目前就是三个选项，自动，允许，静音，这是用户可以自己设置的。自动，就是用户有了交互行为，才可以播放音频。允许，就是一般情况。静音，放了，但没完全放，没声。手机端浏览器没得设置声音这些玩意儿，都是默认值，所以不能自动播放。