脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 报警器提示音

基于JavaScript实现报警器提示音效果

 更新时间：2017年10月27日 11:41:12   作者：祈澈姑娘  
这篇文章给大家分享分享一段代码基于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实现报警器提示音效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • js操作输入框提示信息且响应鼠标事件

    js操作输入框提示信息且响应鼠标事件

    注册网站的输入框就有默认提示值，当获取鼠标焦点的时候，默认值被删除，当用户没输入东西焦点离开的时候，又恢复默认提示值
    2014-03-03
  • js实现烟花特效

    js实现烟花特效

    这篇文章主要为大家详细介绍了js实现烟花效果，实现鼠标点击出现模拟烟花爆炸的特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS this关键字在ajax中使用出现问题解决方案

    JS this关键字在ajax中使用出现问题解决方案

    这篇文章主要介绍了JS this关键字在ajax中使用出现问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • js中的window.open返回object的错误的解决方法

    js中的window.open返回object的错误的解决方法

    系统中用javascript中的window.open后，页面返回了一个[object]。因为系统的原因，必需使用href="javascript:window.open()"这样的格式。所以只能通过以下办法解决。
    2009-08-08
  • 现代配置YAML对比JSON优势分析

    现代配置YAML对比JSON优势分析

    这篇文章主要为大家介绍了关于现代配置指南中YAML对比JSON的优势分析说明，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
    2022-02-02
  • 浅谈JS装饰器以及装饰器在TS中的使用方式

    浅谈JS装饰器以及装饰器在TS中的使用方式

    这篇文章主要带大家探讨一下JS装饰器以及装饰器在TS中的使用方式，文中有详细的代码示例，对装饰器不太了解的同学可以参考阅读本文学习了一下
    2023-07-07
  • js禁止document element对象选中文本实现代码

    js禁止document element对象选中文本实现代码

    禁止document element对象选中文本在某在情况下还是很有必要的接下来本文将使用js实现，感兴趣的各位可以参考下哈
    2013-03-03
  • Javascript如何实现对象扁平化实例详解

    Javascript如何实现对象扁平化实例详解

    这篇文章主要给大家介绍了关于Javascript如何实现对象扁平化的扁平化处理简而言之就是对对象中的对象提取出来,放在一个对象里面,形象的说就是把儿子的后代当成自己的儿子,下面相关资料,需要的朋友可以参考下
    2022-11-11
  • Cookie 注入是怎样产生的

    Cookie 注入是怎样产生的

    现在很多网站都加了防注入系统代码，你输入注入语句将无法注入~~感觉这样的防注入系统不错，但防注入系统没有注意到 Cookies 的问题！所以就有了Cookies注入~~
    2009-04-04
  • [JS源码]超长文章自动分页（客户端版）

    [JS源码]超长文章自动分页（客户端版）

    [JS源码]超长文章自动分页（客户端版）...
    2007-01-01

最新评论