本文實例講述了JS(jQuery)實現聊天接收到消息語言自動提醒功能。分享給大家供大家參考，具體如下：
綜述
最近在開發一個網頁端的客服系統，需求要求聊天雙方接收到消息能有語音提醒，并且客服端如果存在未讀消息要求每隔五分鐘給客服語音提醒一下。客服聊天系統使用PHP的Workerman框架進行開發，由于語音提醒實現的功能一樣，故而在本篇博文中從簡描述，只進行定時循環提醒的功能記錄，不說實時的那個語音提醒，因為思路都是一樣的，主要是看如何實現自動播放語音功能。
思路
實時提醒
這個就比較明確了，就是在接收到消息的同時進行語音播放，大家可以根據自己的邏輯進行將代碼放到合適的地方。
定時提醒
這個主要首先判斷客戶是否存在未讀的消息，如果存在則語音提醒，如果不存在，則不進行提醒。故而要在HTML頁面寫一個定時器，每五分鐘訪問一次接口，查詢客服是否存在未讀消息，然后在后臺開發一個接口用于返回客戶是否存在未讀消息。
代碼實現
<!--=======================================--><!--Created by ZHIHUA·WEI.--><!--Author: Wei ZhiHua--><!--Date: 2019/01/09--><!--Time: 下午 17:26--><!--Project: ZHIHUA·WEI--><!--Power:JS實現聊天接收到消息語言自動提醒--><!--=======================================--><!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>JS實現聊天接收到消息語言自動提醒(您有新的消息請注意查收)</title> <!--引入CSS、JS--> <script type="text/javascript" src="public/common/js/jquery-1.8.1.min.js"></script></head><style> #audio_click { margin-top: 32px; height: 40px; } #audio_click a { text-decoration: none; background: #2f435e; color: #f2f2f2; padding: 10px 30px 10px 30px; font-size: 16px; font-family: 微軟雅黑, 宋體, Arial, Helvetica, Verdana, sans-serif; font-weight: bold; border-radius: 3px; -webkit-transition: all linear 0.30s; -moz-transition: all linear 0.30s; transition: all linear 0.30s; } #audio_click a:hover { background: #385f9e; }</style><body><!--dom結構部分--><div style="width: 100%;text-align: center"> <!--用來存放item--> <h1>JS實現聊天接收到消息語言自動提醒</h1> <h3>(您有新的消息請注意查收)</h3> <div id="audio_click"> <a id="btn_audio" href="#" rel="external nofollow" >播放語音</a> </div> <div id="audio_play"></div></div></body><script> $(function () { var html = ''; html += '<audio id="audioPlay">'; //格式ogg音頻地址 html += '<source src="/public/static/layui/newmsg.ogg" type="audio/ogg">'; //格式mp3音頻地址 html += '<source src="/public/static/layui/newmsg.mp3" type="audio/mpeg">'; //格式wav音頻地址 html += '<source src="/public/static/layui/newmsg.wav" type="audio/wav">'; html += '</audio>'; //將代碼寫入到頁面中 $(html).appendTo("#audio_play"); //輪詢ajax檢測未讀消息，每五分鐘 var setTime = setInterval(function () { $.ajax({ type: "post", url: "{:url('index/getNoReadMsg')}", //查詢客服是否有未讀消息 dataType: "json", success: function (ret) { if (ret.code == 1) { //有則進行播放語音提醒 $('#audioPlay')[0].play(); } } }); }, 300000); }); $("#btn_audio").click(function () { //這就代碼就是播放語音的關鍵代碼 $('#audioPlay')[0].play(); });</script></html>下載
本源碼包文件我已經上傳到資源庫中，有需要的童鞋可以自行下載，里面包含代碼和音頻文件。
完整實例代碼點擊此處本站下載。
之后將代碼中相應的資源路徑修改之后即可使用。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
