网页来消息、短信、通知可用的播放铃声js代码
通常在来消息或者来通知时,打开网页需要一段声音的提醒,这也会使得很多同学第一时间上百度搜索,其实很简单,这里以本博客聊天插件为例,群聊和私聊的声音会有所不同,其实就是3行代码搞定
通常在来消息或者来通知时,打开网页需要一段声音的提醒,这也会使得很多同学第一时间上百度搜索,其实很简单,这里以本博客聊天插件为例,群聊和私聊的声音会有所不同,其实就是3行代码搞定
定义audio 元素的2种写法
写法一:通过js添加到网页body的代码
<script type="text/javascript">
$('<audio id="chatAudio"><source src="https://zz1.com.cn/assets/addons/ichat/images/notify.mp3" type="audio/mp3"></audio>').appendTo('body');
$('<audio id="FriendAudio"><source src="https://zz1.com.cn/assets/addons/ichat/images/friend.mp3" type="audio/mp3"></audio>').appendTo('body');
</script>
写法二:直接定义在html标签中;
<audio id="chatAudio" style="display:none;">
<source src="https://zz1.com.cn/assets/addons/ichat/images/notify.mp3" type="audio/mp3">
</audio>
以上代码二选一,代码需要放在公共html模板文件或公共js文件中
那么定义完声音元素后,就是如何播放了;
播放声音的js
$('#chatAudio')[0].play();//播放声音
这段js你直接放在页面里,打开页面应该就能听到声音的;
通常我们的做法是,如果来消息、来通知,放在有条件的js里。
赶快拿去测试吧。
9月6日更新:
上面的代码在谷歌浏览器下可能会失效,博主在网上搜索了一圈,找到这段代码,在聊天室里已测试可用;
function chatAudio() {
(function (argument) {
// 音频文件
var src = "__ADDON__/images/notify.mp3";
// 初始化Aduio
var audio = new Audio();
var playPromise;
audio.src = src;
playPromise = audio.play();
if (playPromise) {
playPromise.then(() => {
// 音频加载成功
// 音频的播放需要耗时
setTimeout(()=>{console.log("done.");}, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
}).catch((e) => {});
}
})();
}
src路径请替换成你的音乐地址,直接调用 chatAudio() 即可听到声音。
您的一次评论就是对本站点的小小支持.
文章评论(4)
谷歌浏览器下播放消息声音的代码已更新,你在试一下吧。
@阳阳好的,我试试。
博主,这段js代码在谷歌浏览器下似乎不行诶
@没企图的人是的,我也发现这个问题了,谷歌浏览器下我还在找其他解决办法;