基于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 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
python 获取字符串MD5值方法
2018/05/29 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
通过代码实例了解Python sys模块
2020/09/14 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python调用飞书发送消息的示例
2020/11/10 Python
美国家具网站:Cymax
2016/09/17 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
《钱学森》听课反思
2014/03/01 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
法制主题班会教案
2015/08/13 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
python爬虫selenium模块详解
2021/03/30 Python
浅谈python数据类型及其操作
2021/05/25 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android