专栏首页编程微刊前端页面实现报警器提示音效果

前端页面实现报警器提示音效果

原型图:

图片.png

项目需求:服务器接受到报警后将消息推送到前台,(通过前端实时消息提示的效果-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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 新功能:个人小程序直接打开公众号链接

    在此之前,想要从小程序里面跳转一个链接,要使用web-view才可以,而且个人 <web-view src="https://www.baidu.com/">...

    王小婷
  • Github提交更新的代码

    项目已经上传到github,现在修改了文件里面的某些代码,(修改了按钮的颜色,改成了蓝色)要把修改部分的代码提交上去,那么如何覆盖Github上的同一文件代码呢...

    王小婷
  • 基于mpvue的小程序项目搭建的步骤步骤1. 检查下 Node.js 是否安装成功

    王小婷
  • MongoDB分片迁移原理与源码(4)

    在from shard将迁移结果提交到config服务器成功后,from shard就会执行删除原数据的操作;如果迁移的参数"_waitForDelete"为f...

    云计算与数据库
  • Spring学习(2):Spring Bean管理(上)

    在前面使用了Spring的ApplicationContext,并通过它的getBean方法获取Spring的配置文件applicationContext.xm...

    编程思录
  • 书单 | 从0入门数据分析师的个人成长知识体系

    数据分析最近很多朋友问我,怎么样才能成为一名数据分析师呢,我没有基础,能不能做数据分析师呢? 正常智力的人,想要从菜鸟成为一名数据分析师,都是可行的,只不过,数...

    小莹莹
  • 使用React和Node.js制作音乐类App的一次总结

    Peter谭金杰
  • 数据:逍遥游

    对程序员来说,数据是我们时刻都在打交道的东西。我们的代码如同一台机器,把进入的数据转换或者映射成出来的数据。数学上,不过是:y = f(x) 而已。数据就像庄子...

    tyrchen
  • 创意满分!Pornhub推出可折叠成VR眼镜的母亲节贺卡

    镁客网
  • LeetCode 162. Find Peak Element

    题目大意:在一个数组中寻找一个峰值,题目的最后一句话是一个关键,如果没有这句话,我想大多数首先想到的就是一个一个的判断,这样的话算法复杂度是O(n),实际上本题...

    大学里的混子

扫码关注云+社区

领取腾讯云代金券