基于JavaScript实现报警器提示音效果


Posted in Javascript onOctober 27, 2017

原型图:

基于JavaScript实现报警器提示音效果

项目需求:

服务器接受到报警后将消息推送到前台,(通过前端实时消息提示的效果-websocket长轮询),前台接受到消息后需要发出警报提示音,提醒用户。

原理:

很简单,使用html5里面的<audio>标签即可实现,在铃声的官网上选择一段报警的音频,放在代码里面即可。

代码片段:

<%@ 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实现报警器提示音效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 #Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 #Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 #Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 #Javascript
vue中v-model动态生成的实例详解
Oct 27 #Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 #Javascript
You might like
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
分享10段PHP常用代码
2015/11/11 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python简单的制作图片验证码实例
2017/05/31 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python 的topk算法实例
2020/04/02 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
班级德育工作实施方案
2014/02/21 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
我的理想演讲稿
2014/04/30 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2014年检验科工作总结
2014/11/22 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang