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

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

功能：

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

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

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

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

html5 轮询自动刷新数据,后台调用exe，前端定时轮询调用结果
前提使用asp.net core 2.1 前端使用vue ui使用element-ui 前端发送请求用Axios 新建asp.net core程序 1.jpg 修改Index.html @{ Lay ...
JavaScript中setTimeout实现轮询 (vs setInterval)
setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数是一次. setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达 ...
java 轮询请求接口_js调用轮询接口
##### 项目中遇到需要很多个需要轮询处理的接口,然后简单的封装了下,做个记录,以后用到类似的直接copy ##### // polling-utils.js /** * @descripting ...
js setInterval+setTimeout定时器轮询+终止轮询
常见的轮询方式: window.timer = setInterval(()=>{this.promiseFun()},1000) 大家一般都会使用setInterval,但要注意单纯使用它可能 ...
java 轮询请求接口_Android RxJava 实际应用讲解：（无条件）网络请求轮询
前言 Rxjava,由于其基于事件流的链式调用.逻辑简洁 & 使用简单的特点,深受各大 Android开发者的欢迎. Github截图 RxJava如此受欢迎的原因,在于其提供了丰富 & ...
spring-cloud-kubernetes的服务发现和轮询实战(含熔断)
本文是<spring-cloud-kubernetes实战系列>的第四篇,主要内容是在kubernetes上部署两个应用:Web-Service和Account-Service,通过spr ...
java 实现http长轮询,webim使用http长轮询如何保证消息的绝对实时性
一.webim如何实现消息推送 webim通常有三种方式实现推送通道: 1)WebSocket 2)FlashSocket 3)http轮询其中1)和2)是用Tcp长连接实现的,其消息的实时性很好理 ...
4.1.3 消费者轮询的流程
4.1.3 消费者轮询的流程按照消费者应用程序的示例,消费者订阅主题的下一步是"轮询".前面分析的准备t作(确保协调者存在,确保分配分区,更新拉取偏移量)都内置在轮询操作里,所以 ...
PayPal,Stripe,Square轮询支付系统
轮询展示展示我们轮询的页面轮询套餐根据不同的用户和需求,可以选择不同的套餐普通版 1500元 1年 1个用户支持Paypal/Stripe 不限制A站个数不限制B站个数不限制提交模式订 ...

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

html代码

js代码

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

attr与prop的区别

完整代码

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

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

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

最新文章

热门文章