基于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改变文章字体大小的实例代码
Nov 27 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
深入探讨前端框架react
Dec 09 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 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 auth_http类库进行身份效验
2009/03/19 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
ext 代码生成器
2009/08/07 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python编程实现正则删除命令功能
2017/08/30 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
旅游专业职业生涯规划范文
2014/01/13 职场文书
五一劳动节活动记录
2014/03/23 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
母亲节演讲稿
2014/05/27 职场文书
运动会加油稿100字
2014/09/19 职场文书