基于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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
php对象工厂类完整示例
2018/08/09 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
Express的路由详解
2015/12/10 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
js生成word中图片处理方法
2018/01/06 Javascript
vue写一个组件
2018/04/09 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python实现合并字典的方法
2015/07/07 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python实现感知机模型的示例
2020/09/30 Python
几款好用的python工具库(小结)
2020/10/20 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
酒店副总岗位职责
2013/12/24 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
学习十八大标语
2014/10/09 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
小学班长竞选稿
2015/11/20 职场文书
小学音乐课教学反思
2016/02/18 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL