html5+thymeleaf+js （定时器+audio标签）实现定时弹框效果并播放声音

最讨厌搞前端却又想转前端的卑微后端。

需求：判断十秒内数据库中是否产生了新的数据，如果产生了新的数据，那么我需要将数据展示到弹框上。前端定时器每10s执行一次，获取到数据弹框就展示出来同时播报声音。弹框持续5s后自动关闭。

根据需求可以判断我们需要用到 定时器 还有audio标签。

注意thymeleaf的写法，一开始引用声音始终不对，多亏了下面这位大大的博客

https://www.136.la/tech/show-1452595.html

引入一个mp3文件到static/audio文件夹下

音频部分
<audio id="audio1" muted>
    <source th:src="@{/audio/14044.mp3}" type="audio/mpeg" />
    您的浏览器不支持音频播放。
</audio>

弹框部分

 js部分

$(function() {
    //播放器控制
    var audio = document.getElementById('audio1');
    // 设置音量60%
    audio.volume = 0.6;
    function bofang(){
        audio.muted = false;
        //请求数据
        var dataTotal = 0;
        var alarmDatas = [];
        $.ajax({//ajax访问后台
            type: "post",
            url: "/system/index/positionAlarmData",
            dataType:"json",
            async:false,
            success:function(result){
                dataTotal = result.total;
                alarmDatas = result.rows;
            }
        });
        if(dataTotal > 0){
            var divEle = document.querySelector('.bottomAlarm');
            //清空
            $("#alarmContent").html('');

            var test = document.createElement("span");
            test.innerHTML = '1、'+ alarmDatas[0].powerName + ',' + alarmDatas[0].username;
            var alarmContent = document.getElementById('alarmContent');
            alarmContent.appendChild(test);
            divEle.style.visibility = 'visible';
            setTimeout(function () {
                divEle.style.visibility = 'hidden';
            },5000);
            audio.play(); //播放
        }
    }
    bofang();
    window.setInterval(bofang,10000);
});

后台：

拿当前时间和数据的时间比较相差几秒
where 1=1
and UNIX_TIMESTAMP(NOW())- UNIX_TIMESTAMP(pa_createtime) < 10