播放提示音+页面右下角提示框

<script>
window.onload = function() {
    suportNotify()
}
// 判断浏览器是否支持Web Notifications API
function suportNotify() {
    if (window.Notification) {
        // 支持
        console.log("支持" + "Web Notifications API");
        // 如果支持Web Notifications API，再判断浏览器是否支持弹出实例
        //showMess()
    } else {
        // 不支持
        alert("不支持 Web Notifications API");
    }
}

// 判断浏览器是否支持弹出实例
function showMess(messAge,priority) {
    var imagePath;
    if(priority<=2){//警告
        imagePath="${ctx}/pages/resourceperformance/images/blue.png";
    }else if(priority>2&&priority<=4){//严重
        imagePath="${ctx}/pages/resourceperformance/images/blue2.png";
    }else{//灾难
        imagePath="${ctx}/pages/resourceperformance/images/red.png";
    }
    
    // 如果支持window.Notification 并且 许可不是拒绝状态
    if (window.Notification && Notification.permission !== "denied") {
        // Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示
        Notification.requestPermission(function(status) {
            // 如果状态是同意
            if (status === "granted") {
                var m = new Notification('收到告警信息', {
                    body : messAge,
                    icon:imagePath
                });
                m.onclick = function() {// 点击当前消息提示框后，跳转到当前页面
                    alert("原则上应该跳到告警页");
                }
            } else {
                alert('当前浏览器不支持弹出消息')
            }
        });
    }
}

function playAudio(priority){
    if(priority<=2){//警告
        $("#playMusic").append("<audio  autoplay='autoplay'  src='${ctx}/common/audio/8378.wav' type='audio/wav'></audio>");
    }else if(priority>2&&priority<=4){//严重
        $("#playMusic").append("<audio  autoplay='autoplay'  src='${ctx}/common/audio/6178.wav' type='audio/wav'></audio>");
    }else{//灾难
        $("#playMusic").append("<audio autoplay='autoplay'  src='${ctx}/common/audio/5906.wav' type='audio/wav'></audio>");
    }
}
$(function(){
    flushAlert();
    setInterval("flushAlert()",30000);
    setInterval("cleanAudio()",70000);
})

function cleanAudio(){
    $("#playMusic").empty();//清空声音标签
}
function flushAlert(){
    $.post("${ctx}/alarm/getAlert.do",function(date){
        for (var k = 0; k < date.length; k++) {
            console.info(date[k]);
            var messInfo="是否知悉";
            messInfo+=date[k].acknowledged;
            messInfo+="
告警状态:	"+date[k].alarmStatus;
            messInfo+="
告警信息:	"+date[k].description;
            messInfo+="
最后触发时间:	"+date[k].eventClock;
            messInfo+="
所在群组:	"+date[k].groupsName;
            messInfo+="
主机名称:	"+date[k].hostName;
            messInfo+="
主机IP:	"+date[k].hostip;
            messInfo+="
最后修改:	"+date[k].lastchange;
            messInfo+="
告警级别:	"+date[k].priority;
            messInfo+="
告警级别:	"+date[k].priority;
            showMess(messInfo,date[k].priority);
            playAudio(date[k].priority);
        }
        $("audio").each(function(i,music){//防止浏览器屏蔽播放
            console.info(music);
             if (music.paused) { //判读是否播放 
                 //console.log(music.paused);
                 music.paused=false;
                 music.play(); //没有就播放 
             }  
        });
    });
}
</script>
<%
    UserSession userSession = (UserSession)session.getAttribute(AppConst.USER_SESSION_ID);
    if(userSession == null){
        userSession = new UserSession();
    }
%>
<div id="playMusic"></div>

相关阅读:
NOIP2018游记
 NOIP2018T1DAY1——Road（并查集做法？？）
UVA11021 Tribles——概率dp
捡石头——（期望递推）
USACO2008mar-gold牛跑步（第k短路：A-star）
Java中的异常处理
 Java学习手册
 各种应用层注入手段整理【转载】
正则表达式学习
 Run-Time Check Failure #0，The value of ESP was not properly saved 错误解决
原文地址：https://www.cnblogs.com/zhanchaohan/p/10791364.html