语音播报——用setTimeout实现轮询调用接口并播报语音功能 ╰半夏微凉° 2021-07-26 02:36 600阅读 0赞 ![在这里插入图片描述][20210510173414725.png] 应用场景:对于订单管理系统,如果有订单来了,希望能够及时提醒的话,语音播报是一个很好的方式 功能: 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的区别 #### ![在这里插入图片描述][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
还没有评论,来说两句吧...