基于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 IE和FF兼容性问题汇总
Feb 09 Javascript
javascript中的new使用
Mar 20 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
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实现下载文件的两种方法
2013/07/05 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
详解jQuery中的事件
2016/12/14 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python不同系统中打开方法
2020/06/23 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
体育教师求职信
2014/06/30 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
老乡会致辞
2015/07/28 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
六五普法心得体会2016
2016/01/21 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书