前端实现消息声音提醒功能

• 浏览器设置
• 代码部分

众所周知，由于浏览器的限制，页面并不能直接自动播放声音，需要开启权限。我们在B/S架构中为了实现声音的自动播放需要打开浏览器的限制。

浏览器设置

打开chrome浏览器，在地址栏输入如下地址:

chrome://flags/#autoplay-policy

在下面选项中找到如下配置项:

Global media controls control Cast start/stop

修改为Enable

代码部分

<audio preload="auto|metadata|none" hidden="hidden" controls="controls" id='messageAudio'>

        <source src="./audio.mp3"/>

</audio> 

<script>
/*
    
    preload：音频被加载的方式
    hidden：是否隐藏
    controls：展示播放暂停按钮
    
    创建好后通过js实现播放、暂停、停止功能
*/
    let messageAudio = document.getElementById("messageAudio"); 

    messageAudio.play(); // 播放

    messageAudio.pause(); messageAudio.currentTime = 0; // 停止

    messageAudio.pause(); // 暂停
</script>