基于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 相关文章推荐
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
js+html实现点名系统功能
Nov 05 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+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP学习之正则表达式
2011/04/17 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
深入了解Python数据类型之列表
2016/06/24 Python
python求质数的3种方法
2018/09/28 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
节能环保标语
2014/06/12 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
同学毕业留言寄语
2015/02/27 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers