语音播报队列封装及结合vue使用队列

发表于

为什么语音播报要加队列? 因为不加队列连续的语音会有重叠

最近做的一个项目有语音播报功能,测试的过程中发现有语音播报重叠的现象，于是就做了一个语音播报队列。队列是解决这类问题的常见方案，队列的应用在电商抢购处理超卖、抗压的场景中也经常使用！代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!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使用，代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
 * 语音播报
 */
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'

创建实例、设置初始数据，根据语音长度设置队列间隔时间

1
2
3
4
5
6
7
8
9
10
data() {
  return {
    yuYin: new YuYinClass(),
  }
}

mounted() {   
  this.yuYin.setQueueTime(4000);
  this.yuYin.start();
}

执行方法，添加播放内容

1
2
3
computed: {
  this.yuYin.push({ tex, tok: res.result });
}

终止任务

1
2
3
destroyed() {
  this.yuYin.stop();
},

代码亲测,PS：语音播报时间需要根据实际情况设置。建议播报相关任务、时间等单独提取统一管理。