zoukankan      html  css  js  c++  java
  • 前端页面实现报警器提示音效果

    原型图:


    图片.png
    图片.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>
    
  • 相关阅读:
    题解 P2810 【Catch the theives】
    2020.11.27 考试题解
    2020.11.25 考试题解
    题解 SP16254 【RMID2
    2020.11.24 考试题解
    2020.11.23 考试题解
    CSP-2020 T3 函数调用
    二维树状数组学习笔记
    题解 P4910 【帕秋莉的手环】
    Python实现向指定IP的目标机器拷贝文件
  • 原文地址:https://www.cnblogs.com/wangting888/p/7743942.html
Copyright © 2011-2022 走看看