浏览器限制html5 audio.play()自动播放的问题

项目前景

实现一个消息即时通讯的功能，后台通过websocket发消息给前端，前端获取到新消息后，使用audio.play()播放叮咚声音 . 代码如下：

         var audio = document.createElement("audio"); // 创建播放标签

         audio.src = newsAudio

        function play() {

               audio.play()

        }

 

遇到的问题

问题来了,由于浏览器限制音频自动播放，直接调用此方法会报错。报错信息如下：

NotAllowedError: play() failed because the user didn't interact with the document first

 

解决方法

在进入页面时，先弹出提示窗让用户确认是否播放声音，用户点击页面让浏览器发出第一个叮咚声音后【因为浏览器规定必须要用户主动触发事件！】，后续再调用play()方法调用声音就能正常运行了！！！