基于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判断用户是否上网(连接网络)
Dec 23 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
AngularJS表单验证功能分析
May 26 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
Openlayers绘制聚合标注
Sep 28 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中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python获取糗百图片代码实例
2013/12/18 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
Collection和Collections的区别
2016/05/02 面试题
个人求职信范文分享
2013/12/13 职场文书
竞聘上岗演讲
2014/05/19 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
小学中等生评语
2014/12/29 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年公务员工作总结
2015/04/24 职场文书
监守自盗观后感
2015/06/10 职场文书
人民币符号
2022/02/17 杂记