基于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实现图片漂浮效果的方法
Mar 02 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jquery实现数字输入框
Feb 22 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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自动更新新闻DIY
2006/10/09 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
潜说js对象和数组
2011/05/25 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python如何重新加载模块
2020/07/29 Python
python利用opencv实现颜色检测
2021/02/23 Python
国窖1573广告词
2014/03/21 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
《从现在开始》教学反思
2016/02/16 职场文书