语音播报——用setTimeout实现轮询调用接口并播报语音功能

╰半夏微凉° 2021-07-26 02:36 640阅读 0赞

![在这里插入图片描述][20210510173414725.png]  
应用场景：对于订单管理系统，如果有订单来了，希望能够及时提醒的话，语音播报是一个很好的方式

功能：

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

## html代码 ##

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

## 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的区别 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

#### 完整代码 ####

$(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("不保存信息...");
    　　}
    }

[20210510173414725.png]: /images/20210725/2fbd0645c69a4772b26995aa8d5fd152.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/06d0c3fbeff14e18ac151f39cec02f56.png