基于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中的History历史对象
Jan 16 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
如何在Vue中抽离接口配置文件
Oct 31 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验证码类分享
2014/11/18 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
pandas 选择某几列的方法
2018/07/03 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
如何现实servlet的单线程模式
2014/08/05 面试题
syb养殖创业计划书
2014/01/09 职场文书
村委会贫困证明
2014/01/14 职场文书
升旗仪式主持词
2014/03/19 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
小鞋子观后感
2015/06/05 职场文书
入队仪式主持词
2015/07/04 职场文书