html页面添加消息提示声音,uniapp页面播放消息提示音

最近做了一个项目,里面有一个客服模块,需要添加一个消息提示声音,实现过程如下:

首先需要在页面嵌入一个消息提示声音的audio标签,软后用js控制声音的播放,每次来消息的时候就触发一次,代码如下:

<!-- 聊天消息提示音 -->
<audio id="msgNoticeMusic" controls="controls" >
    <source src="/kefu_static/mp3/notice.mp3">
</audio>
<!-- 聊天消息提示音 -->

<script>
    console.log("播放音乐开始");
    $('#msgNoticeMusic')[0].play();
    console.log("播放音乐开始结束");
</script>

另外我的另外一端是用的uniapp,用户接收到消息也需要触发消息提示声音,代码如下:

<script>
    let noticeMp3 = uni.createInnerAudioContext();
    noticeMp3.src = "/static/mp3/notice.mp3";
    noticeMp3.play();
</script>

执行过程就是初始化一个音频播放对象,设置播放音频的路径,下面就执行播放音频的方法就好了,当然还有其他更多的控制,可以参考uniapp的官方文档

You May Also Like