基于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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
浅析vue-router实现原理及两种模式
Feb 11 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从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
Vue自定义指令详解
2017/07/28 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
小学教师培训感言
2014/02/11 职场文书
银行职员自我鉴定
2014/04/20 职场文书
自主招生学校推荐信
2014/09/26 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers