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

2018年09月04日 2,007 次阅读 12 条评论 72 人点赞

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

讲梦想、讲奋斗可以,前提是钱要给够。

文章评论(12

  • 阳阳博主

    谷歌浏览器下播放消息声音的代码已更新,你在试一下吧。

    #22018-09-06 17:06
  • 没企图的人Lv 2

    博主,这段js代码在谷歌浏览器下似乎不行诶

    #12018-09-06 16:33
    • 阳阳博主

      @没企图的人是的,我也发现这个问题了,谷歌浏览器下我还在找其他解决办法;

      2018-09-06 16:40
    • 逻辑Lv 1

      @阳阳我试了 为啥还不行呢?

      2019-09-24 10:19
    • 阳阳博主

      @逻辑那一段代码不行?

      2019-09-24 10:20
    • 逻辑Lv 1

      @阳阳 我试了这个还是不行 没有声音 另外我想问在手机端ios 可以吗?

      2019-09-24 10:23
    • 阳阳博主

      @逻辑什么浏览器?有没有报错误提示?

      2019-09-24 10:24
    • 逻辑Lv 1

      @阳阳谷歌 有报错就好了关键是没有报错,后面我想移植到手机端,网上找了各种资源,都无法实现

      2019-09-24 10:26
    • 阳阳博主

      @逻辑移动端没有实测,这个需要你找下方案了

      2019-09-24 10:32
    • 逻辑Lv 1

      @阳阳谢谢,楼主

      2019-09-24 10:32
  • 接收回复邮件通知
    非注册会员初次评论需要审核,审核时间(09:00-18:00),请耐心等待...