溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關使用JavaScript怎么實現聊天接收到消息語言自動提醒功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
思路
實時提醒
這個就比較明確了，就是在接收到消息的同時進行語音播放，大家可以根據自己的邏輯進行將代碼放到合適的地方。
定時提醒
這個主要首先判斷客戶是否存在未讀的消息，如果存在則語音提醒，如果不存在，則不進行提醒。故而要在HTML頁面寫一個定時器，每五分鐘訪問一次接口，查詢客服是否存在未讀消息，然后在后臺開發一個接口用于返回客戶是否存在未讀消息。
代碼實現
<!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 >
<!--用來存放item-->
<h2>JS實現聊天接收到消息語言自動提醒</h2>
<h4>(您有新的消息請注意查收)</h4>
<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怎么實現聊天接收到消息語言自動提醒功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
