网页来消息、短信、通知可用的播放铃声js代码

2018年09月04日 255 次阅读 4 条评论 1 人点赞

通常在来消息或者来通知时，打开网页需要一段声音的提醒，这也会使得很多同学第一时间上百度搜索，其实很简单，这里以本博客聊天插件为例，群聊和私聊的声音会有所不同，其实就是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标签中；

<html>
<head>
</head>
<body>
<audio id="chatAudio" style="display:none">
<source src="https://zz1.com.cn/assets/addons/ichat/images/notify.mp3" type="audio/mp3">
</audio>
</body>
</html>

以上代码二选一，代码需要放在公共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.0 国际许可协议进行许可