基于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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 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
B2K与车机的中波PK
2021/03/02 无线电
小偷PHP+Html+缓存
2006/11/25 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php实现等比例压缩图片
2018/07/26 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
angular json对象push到数组中的方法
2018/02/27 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
房地产广告词大全
2014/03/19 职场文书
2014年宣传工作总结
2014/11/18 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
行政处罚告知书
2015/07/01 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server