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

最新推荐文章于 2023-07-10 17:39:35 发布

敬畏智心

最新推荐文章于 2023-07-10 17:39:35 发布

阅读量686

点赞数 3

分类专栏：前端 js vue 语音播报

本文链接：https://blog.csdn.net/ranmudaofa/article/details/95191135

版权

js 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

就一句废话：为什么语音播报要加队列，因为不加队列连续的语音会有重叠的现象。

一. 不废话,代码如下：

<!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();
},

代码亲测，不好使你揍我。

敬畏智心

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
语音播报队列封装demo及结合vue使用队列

就一句废话：为什么语音播报要加队列，因为不加队列连续的语音会有重叠的现象。一. 不废话,代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script>...
复制链接

扫一扫