基于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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
webpack打包js的方法
Mar 12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 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之字符串变相相减的代码
2007/03/19 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python批量发送post请求的实现代码
2018/05/05 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
大型活动组织方案
2014/05/10 职场文书
高三英语复习计划
2015/01/19 职场文书
学校计划生育责任书
2015/05/09 职场文书
实施意见格式范本
2015/06/05 职场文书
企业文化学习心得体会
2016/01/21 职场文书
TS 类型兼容教程示例详解
2022/09/23 Javascript