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

<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>

<script>window.onload = function() {suportNotify()}// 判断浏览器是否支持Web Notifications APIfunction 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>