原型图:
项目需求:
服务器接受到报警后将消息推送到前台,(通过前端实时消息提示的效果-websocket长轮询),前台接受到消息后需要发出警报提示音,提醒用户。
原理:
很简单,使用html5里面的b97864c2e0ef2353a16c4d64c7734e92标签即可实现,在铃声的官网上选择一段报警的音频,放在代码里面即可。
代码片段:
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>insert title here</title>
</head>
<body>
<audio autoplay="autoplay" id="auto" src=""></audio>
<input type="button" value="点击播放" onclick="playsound('http://data.huiyi8.com/2017/gha/03/17/1702.mp3')">
</body>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function(){
function playsound(src) {
var auto = $("#auto");
auto.attr("src",src);
}
})
</script>
</html>
</script>
</html>
总结
以上就是javascript报警器提示音效果的实现案例的详细内容。