应用场景：对于订单管理系统，如果有订单来了，希望能够及时提醒的话，语音播报是一个很好的方式

功能：

1. 勾选语音播报，则会间隔15s去调用接口，如果接口返回数据则进行音频的播报
2. 如果不勾选语音播报或者取消语音播报，则停止语音播放并清理定时器

html代码

音频我是用的本地路径，需要改为自己的路径。

<a style="position:relative;display:flex;align-items:center;">
    <span>语音播报</span>
    <input type="checkbox" id="audio" style="width:20px;height:20px; z-index: 1;margin-left:10px;" />
    <audio controls="controls" style="width:0px;height:0px;">
        <source src="~/yisha/audio/remind.mp3" type="audio/mpeg" muted preload="auto" id="music" />
    </audio>
</a>

js代码

功能：监听input的点击事件，如果选中，则调用接口，如果取消选中，则清空定时器

input监听选中和取消选中功能

//input组件的id为audio，通过原型js的on监听方法，监听 input propertychange，可以实时监听点击事件
$("#audio").on('input propertychange', () => {
	var flag = $("#audio").prop("checked");//获取input的checked属性，需要用prop，不要用attr
})

attr与prop的区别

完整代码

$(document).ready(() => {//页面加载完成后再进行监听
  $("#audio").on('input propertychange', () => {
       var flag = $("#audio").prop("checked");
       if (flag == true) {
           clearInterval(audioTimer);//防止定时器重复
           //由于如果直接通过setInterval进行接口的调用，则会首次延时15000，因此我开始就直接调用接口，然后再设置定时器，进行接口调用的轮询
           $.get("/Home/HasOrderWaitting").then(res => {
               if (res) {
               //接口返回数据后，如何让音频播放：这个比较重要
                   var audio = document.querySelector("audio");
                   audio.currentTime = 0;
                   audio.muted = false;
                   audio.play();
               }
           });
           audioTimer = setInterval(() => {
               $.get("/Home/HasOrderWaitting").then(res=> {
                   if (res) {
                       var audio = document.querySelector("audio");
                       audio.currentTime = 0;
                       audio.muted = false;
                       audio.play();
                   }
               });
           }, 15000)
       } else {
           var audio = document.querySelector("audio");
           audio.currentTime = 0;
           audio.muted = true;
           audio.pause();
           clearInterval(audioTimer);
       }
   })
})

接口返回数据后，如何让音频播放？——这个比较重要

var audio = document.querySelector("audio");
audio.currentTime = 0;
audio.muted = false;
audio.play();

该页面关闭时需要清理定时器

$(window).on('beforeunload', () => {
    //console.log("谷歌浏览器关闭");
    clearInterval(audioTimer);
});
window.onbeforeload = () => {
    //console.log("其他浏览器关闭之前");
    clearInterval(audioTimer);
}

这个地方也是比较重要的，页面跳转或者浏览器地址改变时，需要清理定时器

注意：以下操作触发beforeunload，onbeforeunload

1. 关闭浏览器窗口
2. 通过地址栏或收藏夹前往其他页面的时候
3. 点击返回，前进，刷新，主页其中一个的时候
4. 点击 一个前往其他页面的url连接的时候
5. 调用以下任意一个事件的时候：click,document.write()方法（输出内容），document.open() 打开一个新的空白文档，document.close()方法可关闭一个由open()方法打开的输出流，并显示选定的数据。
   ，window close ()，form.submit.
6. 当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。
7. 重新赋予location.href的值的时候。
8. 通过input type=”submit”按钮提交一个具有指定action的表单的时候。
9. 可以用在以下元素：body, frameset, window

// 关闭窗口时弹出确认提示
$(window).bind('beforeunload', function(){
   // 只有在标识变量is_confirm不为false时，才弹出确认提示
   if(window.is_confirm !== false){     
          return '您可能有数据没有保存';
   }
});
// 提交表单时，不弹出确认提示框
$('form').bind('submit', function(){   
         is_confirm = true; 
});
//页面内的跳转操作均不弹出确认窗口
$(window).bind('mouseover mouseleave', function(event){
   is_confirm = event.type == 'mouseleave';
});
(function(){   
    // 关闭窗口时弹出确认提示   
   $(window).bind('beforeunload', function(){     
  // 只有在标识变量is_confirm不为false时，才弹出确认提示     
   if(window.is_confirm !== false)     
         return '您可能有数据没有保存'; 
   }) 
 // mouseleave mouseover事件也可以注册在body、外层容器等元素上 
  .bind('mouseover mouseleave', function(event){   
   　　is_confirm = event.type == 'mouseleave';   
   });
})();

<script type="text/javascript">
var changeFlag=false;
//标识文本框值是否改变，为true，标识已变 
$(document).ready(function(){
//文本框值改变即触发 
$("input[type='text']").change(function(){
changeFlag=true; 
}); 
//文本域改变即触发
$("textarea").change(function(){
changeFlag=true; 
}); 
});

//离开页面时保存文档 
window.onbeforeunload = function() {
　　if(changeFlag ==true){
　　　　//如果changeFlag的值为true则提示 
　　if(confirm("页面值已经修改，是否要保存？")){
　　　　//处理信息保存...
　　　　　　alert("即将执行保存操作...");
　　}else{
　　　　//不保存数据...
　　　　alert("不保存信息...");
　　}
}