就一句废话:为什么语音播报要加队列,因为不加队列连续的语音会有重叠的现象。
一. 不废话,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 语音播报
*/
class YuYinQueue {
constructor(size = 1000, queueTime = 3000) {
this.size = size;
this.queueTime = queueTime;
}
/**
* 指定播放
*/
play = () => {
let param = this.pop();
if (param) {
console.log('执行队列, param = ' + param);
}
};
/**
* 启动任务
*/
start = () => {
var _this = this;
this.queueName = setInterval(function () {
_this.play();
}, this.queueTime);
};
/**
* 停止任务
*/
stop = () => {
clearTimeout(this.queueName);
};
/**
* 向队列中添加数据
* @param data
*/
push = (data) => {
if (data === null) {
return false;
}
if (this.size != null && !isNaN(this.size)) {
if (this.list.length === this.size) {
this.pop();
}
}
this.list.unshift(data);
return true;
};
/**
* 获取队列中的数据并从队列中移除
* @returns {*}
*/
pop = () => {
if (this.list.length === 0) {
return null;
}
return this.list.pop();
};
/**
* 设置任务调度间隔时间
*/
setQueueTime = (queueTime) => {
this.queueTime = queueTime;
};
/**
* 队列大小
* @type {number}
*/
size = 0;
/**
* 队列
* @type {Array}
*/
list = [];
/**
* 队列执行循环间隔时间
* @type {number}
*/
queueTime = 0;
/**
* 执行队列名称
* @type {null}
*/
queueName = null;
}
let yuYin = new YuYinQueue();
yuYin.push('你好1');
yuYin.push('你好2');
yuYin.push('你好3');
yuYin.push('你好4');
yuYin.push('你好5');
window.onload = function () {
document.getElementById('start').onclick = function () {
yuYin.start();
};
document.getElementById('stop').onclick = function () {
yuYin.stop();
};
document.getElementById('add').onclick = function () {
yuYin.push('添加1');
}
}
</script>
</head>
<body>
<button id="start">点击启动任务</button>
<button id="stop">点击停止任务</button>
<button id="add">点击添加任务</button>
</body>
</html>
二. 不废话结合vue使用,代码如下
/**
* 语音播报
*/
export default class YuYinClass {
constructor(size = 1000, queueTime = 3000) {
this.size = size;
this.queueTime = queueTime;
}
/**
* 获取语音token
*/
getYuYinToken = () => {
return httpsGet('这个给后端要');
};
/**
* 指定播放
*/
play = () => {
let param = this.pop();
if (param) {
console.log('执行队列, param = ' + param);
}
};
/**
* 启动任务
*/
start = () => {
var _this = this;
this.queueName = setInterval(function() {
_this.play();
}, this.queueTime);
};
/**
* 停止任务
*/
stop = () => {
clearTimeout(this.queueName);
};
/**
* 向队列中添加数据
* @param data
*/
push = (data) => {
if (data === null) {
return false;
}
if (this.size != null && !isNaN(this.size)) {
if (this.list.length === this.size) {
this.pop();
}
}
this.list.unshift(data);
return true;
};
/**
* 获取队列中的数据并从队列中移除
* @returns {*}
*/
pop = () => {
if (this.list.length === 0) {
return null;
}
return this.list.pop();
};
/**
* 设置任务调度间隔时间
*/
setQueueTime = (queueTime) => {
this.queueTime = queueTime;
};
/**
* 设置队列大小
* @param size
*/
setSize = (size) => {
this.size = size;
};
/**
* 队列大小
* @type {number}
*/
size = 0;
/**
* 队列
* @type {Array}
*/
list = [];
/**
* 队列执行循环间隔时间
* @type {number}
*/
queueTime = 0;
/**
* 执行队列名称
* @type {null}
*/
queueName = null;
}
1. 导入
import YuYinClass from '@/api/YuYinClass';
2. 创建实例、设置初始数据,根据语音长度设置队列间隔时间
data() {
return {
yuYin: new YuYinClass(),
}
}
mounted() {
this.yuYin.setQueueTime(4000);
this.yuYin.start();
}
3. 执行方法,添加播放内容
computed: {
this.yuYin.push({ tex, tok: res.result });
}
4. 终止任务
destroyed() {
this.yuYin.stop();
},
代码亲测,不好使你揍我。