devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

项目：对话系统。TTS和ASR流前端工程问题总结_vue asr+tts

作者：人工智能uu | 2024-08-21 06:14:50

赞

踩

vue asr+tts

前言

demo模拟线上客户通话，实现tts播报和asr语音转文本，最终将tts和asr播放的文本进行存储或下载。

相关知识：

        （1）网页媒体权限授权

        （2）ArrayBuffer、TypeBuffer 截断、拼接

        （3）音频流式文件播放方式

        （4）ASR、TTS

工程相关：vue2

一、网页授权媒体

这个之前有写过

  1. //  方法就一个
  2.     openMedia() {
  3.       const that = this;
  4.       const gotMediaStream = () => {
  5.         that.getMedia = true;
  6.         //这里是开始websocket的方法
  7.         that.useWebSocket();
  8.       };
  9.       const handleError = (err) => {
  10.         // console.log("navigator catch error", err);
  11.         that.$message.error("未获录音权限");
  12.       };
  13.       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  14.         // console.log("getusermedia is not supported!");
  15.         that.$message.error("无录音权限");
  16.       } else {
  17.         const constrants = {
  18.           audio: {
  19.             volume: { min: 0.0, max: 1.0 },
  20.             noiseSuppression: false,
  21.             echoCancellation: false,
  22.           },
  23.         };
  24.         navigator.mediaDevices
  25.           .getUserMedia(constrants)
  26.           .then(gotMediaStream)
  27.           .catch(handleError);
  28.       }
  29.     },
  30.     // 初始化的websocket
  31.     useWebSocket() {
  32.       const that = this;
  33.       asrWs = new WebSocket(process.env.VUE_APP_WS_URL);
  34.       asrWs.binaryType = "arraybuffer"; // 传输的是 ArrayBuffer 类型的数据
  35.       asrWs.onopen = function () {
  36.         if (asrWs.readyState === 1) {
  37.           // 开启体验和心跳 但是未开始录音
  38.           // that.experienceStatus = true;
  39.           that.heartStart();
  40.         }
  41.       };
  42.       asrWs.onmessage = function (msg) {
  43.        //这里就是相关的业务逻辑了
  44.         that.heartStart();
  45.       };
  46.       asrWs.onclose = function (err) {
  47.         console.log(err);
  48.       };
  49.  
  50.       asrWs.onerror = function (err) {
  51.         that.heartStart();
  52.       };
  53.     },

 修改了一些配置，这个配置解决录音音量较小的问题。

  1.         navigator.mediaDevices
  2.           .getUserMedia({audio:true })
  3.           .then(gotMediaStream)
  4.           .catch(handleError);

二、ArrayBuffer、TypeBuffer 截断、拼接

首先，这个 ArrayBuffer 类型化数组，类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式的背景下诞生的。

ArrayBuffer

  1. var bf = new ArrayBuffer(40); // 生成了字节长度为40的内存区域
  2. //通过提供的 byteLength 属性返回分配字节的长度
  3. console.log(bf.byteLength);  // 40
  4. /*
  5.     值得注意的是如果要分配的内存区域很大，有可能分配失败（因为没有那么多的连续空余内存），所以有必要检查是否分配成功。
  6. */

ArrayBuffer对象有一个slice方法，允许将内存区域的一部分，拷贝生成一个新的ArrayBuffer对象。 

  1. const bf = new ArrayBuffer(40);
  2. const newBf = bf.slice(0, 10); // 从0 - 9 不包括 10

上面代码拷贝buffer对象的前10个字节，生成一个新的ArrayBuffer对象。slice方法其实包含两步，第一步是先分配一段新内存，第二步是将原来那个ArrayBuffer对象拷贝过去。
slice方法接受两个参数，第一个参数表示拷贝开始的字节序号，第二个参数表示拷贝截止的字节序号。如果省略第二个参数，则默认到原ArrayBuffer对象的结尾。
除了slice方法，ArrayBuffer对象不提供任何直接读写内存的方法，只允许在其上方建立视图，然后通过视图读写。

TypeBuffer  

Int8Array：8位有符号整数，长度1个字节。
Uint8Array：8位无符号整数，长度1个字节。
Int16Array：16位有符号整数，长度2个字节。
Uint16Array：16位无符号整数，长度2个字节。
Int32Array：32位有符号整数，长度4个字节。
Uint32Array：32位无符号整数，长度4个字节。
Float32Array：32位浮点数，长度4个字节。
Float64Array：64位浮点数，长度8个字节。
 

下面这个文本有相关方法 

JavaScript 之 ArrayBuffer_短暂又灿烂的的博客-CSDN博客

我的需求是将多个ArrayBuffer完成拼接

二、ASR/TTS是什么？

ASR：语音转文本，将语音转成对应的文本，然后做其他处理。

有http方式和websocket方式。

http方式

传送还是file,file属于blob 使用FormData

  1. export function updataBlob(data) {
  2.   let formData = new FormData();
  3.   formData.append("file", data);
  4.   formData.append("chatId", store.getters.chatId);
  5.   return request({
  6.     url: "model/audio/upload",
  7.     method: "post",
  8.     data: formData,
  9.     headers: {
  10.         "Content-Type": "multipart/form-data",
  11.       },
  12.   });
  13. }

 这种方式需要考虑是否为PCM和还是WAV格式的问题，后端解析需不需要加头

websocket这种方式

这种方式实时传送音频，对音频进行了切片。之前文章中也有代码。
https://mp.csdn.net/mp_blog/creation/editor/124618257

TTS是什么

tts是将文本转成语音。
涉及语音就涉及播放。

（1）如果是一次性返回pcm格式文件，需要播放就需要加上头，wav格式。播放TTS返回的文件

添加依赖

    "wav-headers": "^1.0.1"

 var getFileHeaders = require("wav-headers");

 添加wav请求头

  1.     generateWav(buffer) {
  2.       var options = {
  3.         channels: 1,
  4.         sampleRate: 16000,
  5.         bitDepth: 16,
  6.         dataLength: buffer.length,
  7.       };
  8.       var headersBuffer = getFileHeaders(options);
  9.  
  10.       var temp = new Uint8Array(buffer.byteLength + headersBuffer.byteLength);
  11.       temp.set(new Uint8Array(headersBuffer), 0);
  12.       temp.set(new Uint8Array(buffer), headersBuffer.byteLength);
  13.       return temp;
  14.     },

 上传文件 new Blob([this.PCMList], { type: "audio/wav" });  记住有个[ ]  本来this.PCMList 就是个TypeArray。

下面的生成wav文件下载。

  1.     upAudioOne() {
  2.       store.commit("audio/SET_AUDIO_CUT_SIZE", -1);
  3.       this.PCMList = this.generateWav(this.PCMList);
  4.       const blob = new Blob([this.PCMList], { type: "audio/wav" });
  5.       updataBlob(blob);
  6.  
  7.       // let blobUrl = window.URL.createObjectURL(blob);
  8.       // let link = document.createElement('a')
  9.       // link.style.display = 'none'
  10.       // link.href = blobUrl
  11.       // link.download = 'test' + '.wav'
  12.       // document.body.appendChild(link)
  13.       // link.click()
  14.  
  15.     },

 这个是生成wav文件 直接下载或播放

  1.       if (Object.prototype.toString.call(data) == "[object Object]") {
  2.         this.$message({
  3.           message: data.message,
  4.           type: "warning",
  5.           duration: 3 * 1000,
  6.         });
  7.       } else {
  8.         if (type) {
  9.           this.cunrentAudioUrl = URL.createObjectURL(data);
  10.           this.$refs.audio.volume = 0.1;
  11.         } else {
  12.           const reader = new FileReader();
  13.           reader.readAsDataURL(data);
  14.           reader.onload = (e) => {
  15.             const a = document.createElement("a");
  16.             a.download = item.id + ".wav";
  17.             a.href = e.target.result;
  18.             document.body.appendChild(a);
  19.             a.click();
  20.             document.body.removeChild(a);
  21.           };
  22.         }
  23.       }

 (2) 如果返回的是流式文件就需要将文件合成拼接在一起 记录TTS返回音频

  1.     concatenate(resultConstructor, ...arrays) {
  2.       let totalLength = 0;
  3.       let startIndx = 0;
  4.       if (!arrays[0].length) {
  5.         this.PCMListAllIndex = [];
  6.       } else {
  7.         startIndx = arrays[0].length;
  8.       }
  9.       for (let arr of arrays) {
  10.         totalLength += arr.length;
  11.       }
  12.       let result = new resultConstructor(totalLength);
  13.       let offset = 0;
  14.       for (let arr of arrays) {
  15.         result.set(arr, offset);
  16.         offset += arr.length;
  17.       }
  18.       this.PCMListAllIndex.push({ start: startIndx, end: totalLength });
  19.       return result;
  20.     },

 使用方法合成

     var dataAudio = new Uint8Array(msg.data);

          if (that.ttsSart) {

            that.PCMList = that.concatenate(

              Uint8Array,

              that.PCMList,

              dataAudio

            );

  }

 TTS流式播放

返回是ArrayBuffer ，这个写了看了一个第三方的做了修改

  1. var bufferSource = null;
  2.  
  3. class PCMPlayer {
  4.   constructor(option) {
  5.     this.init(option);
  6.   }
  7.   // 初始化
  8.   init(option) {
  9.     // 默认参数
  10.     const defaultOption = {
  11.       inputCodec: "Int16", // 传入的数据是采用多少位编码，默认16位
  12.       channels: 1, // 声道数
  13.       sampleRate: 8000, // 采样率 单位Hz
  14.       flushTime: 3000, // 缓存时间 单位 ms
  15.     };
  16.     this.option = Object.assign({}, defaultOption, option); // 实例最终配置参数
  17.     this.samples = new Float32Array(); // 样本存放区域
  18.     this.audioCtx = null;
  19.     this.convertValue = this.getConvertValue();
  20.     // 获取类型
  21.     this.typedArray = this.getTypedArray();
  22.     // 初始下音频上线文本
  23.     this.initAudioContext();
  24.     // 需要播放资源统计
  25.     this.sourceCount = 0;
  26.     // pcm二进制文件播放次数
  27.     this.bufferSourceEndCount = 0;
  28.     // 一次文本二进制文件全部返回会  与tts ws中的 speech_end 相关 设置成false
  29.     this.bufferFeed = false;
  30.   }
  31.   // 设置 tts 传入状态， true: 传送中， false ：未开始|传送结束
  32.   setBufferFeedState(type = false) {
  33.     this.bufferFeed = type;
  34.   }
  35.   // 创建浮点型数据数组
  36.   // 初始某人值
  37.   sourceLenInit() {
  38.     this.samples = new Float32Array();
  39.     // console.log("初始化=》被调用");
  40.     this.sourceCount = 0;
  41.     this.setBufferFeedState(true);
  42.     this.bufferSourceEndCount = 0;
  43.   }
  44.   // 播放暂停 初始化参数值
  45.   ttsClose() {
  46.     this.sourceCount = 0;
  47.     this.setBufferFeedState();
  48.     this.bufferSourceEndCount = 0;
  49.     if (bufferSource) {
  50.       bufferSource.stop(0); //立即停止
  51.     }
  52.     this.destroy();
  53.   }
  54.   // 获取不同TypeArray类型的转化
  55.   getConvertValue() {
  56.     const inputCodecs = {
  57.       Int8: 128,
  58.       Int16: 32768,
  59.       Int32: 2147483648,
  60.       Float32: 1,
  61.     };
  62.     if (!inputCodecs[this.option.inputCodec])
  63.       throw new Error(
  64.         "wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32"
  65.       );
  66.     return inputCodecs[this.option.inputCodec];
  67.   }
  68.   //获取TypeArray
  69.   getTypedArray() {
  70.     // 根据传入的目标编码位数
  71.     // 选定前端的所需要的保存的二进制数据格式
  72.     // 完整TypedArray请看文档
  73.     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
  74.     const typedArrays = {
  75.       Int8: Int8Array,
  76.       Int16: Int16Array,
  77.       Int32: Int32Array,
  78.       Float32: Float32Array,
  79.     };
  80.     if (!typedArrays[this.option.inputCodec])
  81.       throw new Error(
  82.         "wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32"
  83.       );
  84.     return typedArrays[this.option.inputCodec];
  85.   }
  86.   //初始化音频上下文
  87.   initAudioContext() {
  88.     this.sourceCount = 0;
  89.     this.bufferSourceEndCount = 0;
  90.     this.setBufferFeedState();
  91.     // 初始化音频上下文的东西
  92.     this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  93.     // 控制音量的 GainNode
  94.     // https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createGain
  95.     //创建音量控制节点
  96.     this.gainNode = this.audioCtx.createGain();
  97.     this.gainNode.gain.value = 0.1;
  98.     this.gainNode.connect(this.audioCtx.destination);
  99.     this.startTime = this.audioCtx.currentTime;
  100.   }
  101.   //  检测 是否为TypeArray
  102.   static isTypedArray(data) {
  103.     // 检测输入的数据是否为 TypedArray 类型或 ArrayBuffer 类型
  104.     return (
  105.       (data.byteLength &&
  106.         data.buffer &&
  107.         data.buffer.constructor == ArrayBuffer) ||
  108.       data.constructor == ArrayBuffer
  109.     );
  110.   }
  111.   // 是否为 ArrayBuffer 或者 TypedArray
  112.   isSupported(data) {
  113.     // 数据类型是否支持
  114.     // 目前支持 ArrayBuffer 或者 TypedArray
  115.     if (!PCMPlayer.isTypedArray(data))
  116.       throw new Error("请传入ArrayBuffer或者任意TypedArray");
  117.     return true;
  118.   }
  119.   // pcm二进制文件输入（一句话多个二进制文件输入）
  120.   feed(data) {
  121.     if (!this.audioCtx) {
  122.       return;
  123.     }
  124.     this.isSupported(data);
  125.  
  126.     // 获取格式化后的buffer
  127.     data = this.getFormatedValue(data);
  128.     // 开始拷贝buffer数据
  129.     // 新建一个Float32Array的空间
  130.     const tmp = new Float32Array(this.samples.length + data.length);
  131.     // console.log(data, this.samples, this.samples.length)
  132.     // 复制当前的实例的buffer值（历史buff)
  133.     // 从头（0）开始复制
  134.     tmp.set(this.samples, 0);
  135.  
  136.     // 复制传入的新数据
  137.     // 从历史buff位置开始
  138.     tmp.set(data, this.samples.length);
  139.  
  140.     // 将新的完整buff数据赋值给samples
  141.     // interval定时器也会从samples里面播放数据
  142.     this.samples = tmp;
  143.  
  144.     // 播放和回调的相关操作
  145.     this.flush();
  146.   }
  147.   // 获取 对应类型数据的方法
  148.   getFormatedValue(data) {
  149.     if (data.constructor == ArrayBuffer) {
  150.       data = new this.typedArray(data);
  151.     } else {
  152.       data = new this.typedArray(data.buffer);
  153.     }
  154.  
  155.     let float32 = new Float32Array(data.length);
  156.  
  157.     for (let i = 0; i < data.length; i++) {
  158.       // buffer 缓冲区的数据，需要是IEEE754 里32位的线性PCM，范围从-1到+1
  159.       // 所以对数据进行除法
  160.       // 除以对应的位数范围，得到-1到+1的数据
  161.       // float32[i] = data[i] / 0x8000;
  162.       float32[i] = data[i] / this.convertValue;
  163.     }
  164.     return float32;
  165.   }
  166.   // 音量控制
  167.   volume(volume) {
  168.     this.gainNode.gain.value = volume;
  169.   }
  170.   // 关闭上线文
  171.   destroy() {
  172.     this.samples = null;
  173.     this.audioCtx.close();
  174.     this.audioCtx = null;
  175.   }
  176.  
  177.   // 每个音频文件
  178.   flush() {
  179.     const self = this;
  180.  
  181.     if (this.samples.length) {
  182.       this.sourceCount += 1;
  183.     }
  184.  
  185.     if (!this.samples.length) {
  186.       return;
  187.     }
  188.     if (!this.audioCtx) {
  189.       return;
  190.     }
  191.     bufferSource = this.audioCtx.createBufferSource();
  192.  
  193.     // 两个方法的回调
  194.     if (
  195.       typeof this.option.onended === "function" &&
  196.       typeof this.option.allPlayed === "function"
  197.     ) {
  198.       bufferSource.onended = function (event) {
  199.         self.bufferSourceEndCount += 1;
  200.         self.option.allPlayed(
  201.           self,
  202.           self.bufferSourceEndCount == self.sourceCount && !self.bufferFeed
  203.         );
  204.         self.option.onended(this, event);
  205.       };
  206.     }
  207.  
  208.     const length = this.samples.length / this.option.channels;
  209.     const audioBuffer = this.audioCtx.createBuffer(
  210.       // 声道数
  211.       this.option.channels,
  212.       // 长度
  213.       length,
  214.       // 采样率
  215.       this.option.sampleRate
  216.     );
  217.     // 多声道处理
  218.     for (let channel = 0; channel < this.option.channels; channel++) {
  219.       const audioData = audioBuffer.getChannelData(channel);
  220.       let offset = channel;
  221.       let decrement = 50;
  222.       for (let i = 0; i < length; i++) {
  223.         audioData[i] = this.samples[offset];
  224.         /* fadein */
  225.         if (i < 50) {
  226.           audioData[i] = (audioData[i] * i) / 50;
  227.         }
  228.         /* fadeout*/
  229.         if (i >= length - 51) {
  230.           audioData[i] = (audioData[i] * decrement--) / 50;
  231.         }
  232.         offset += this.option.channels;
  233.       }
  234.     }
  235.  
  236.     if (this.startTime < this.audioCtx.currentTime) {
  237.       this.startTime = this.audioCtx.currentTime;
  238.     }
  239.     // console.log(
  240.     //   "start vs current " +
  241.     //     this.startTime +
  242.     //     " vs " +
  243.     //     this.audioCtx.currentTime +
  244.     //     " duration: " +
  245.     //     audioBuffer.duration
  246.     // );
  247.     bufferSource.buffer = audioBuffer;
  248.     bufferSource.connect(this.gainNode);
  249.     bufferSource.start(this.startTime);
  250.     // 添加开始播放的回调函数
  251.     if (this.sourceCount == 1) {
  252.       if (typeof this.option.firstPlay === "function") {
  253.         self.option.firstPlay(this, Date.now());
  254.       }
  255.     }
  256.     this.startTime += audioBuffer.duration;
  257.     this.samples = new Float32Array();
  258.   }
  259.   // 暂停
  260.   async pause() {
  261.     await this.audioCtx.suspend();
  262.   }
  263.   // 继续播放
  264.   async continue() {
  265.     await this.audioCtx.resume();
  266.   }
  267.   // 绑定音频上线文的的状态 - 未使用
  268.   bindAudioContextEvent() {
  269.     const self = this;
  270.     if (typeof self.option.onstatechange === "function") {
  271.       this.audioCtx.onstatechange = function (event) {
  272.         self.option.onstatechange(this, event, self.audioCtx.state);
  273.       };
  274.     }
  275.   }
  276.   // 获取音频上下文的状态
  277.   getSate() {
  278.     const self = this;
  279.     return self.audioCtx.state;
  280.   }
  281. }
  282.  
  283. export default PCMPlayer;

使用页面

typeBuffer 加个wav 头用于播放 和上产后台

npm install wav-headers --save

 

  1. var ws = null; // 实现WebSocket
  2. import PCMPlayer from "./pcm-player.js";
  3. var getFileHeaders = require("wav-headers");
  4. export default {
  5.   data() {
  6.     return {
  7.       timeoutTTs: 6000, // 6s发一次心跳，比server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间。
  8.       ttsTimeoutObj: null, // ws定时器
  9.       ttsSart: false,
  10.       ttsPlayStatus: false,
  11.       player: null,
  12.       PCMList: new Uint8Array(0),
  13.     };
  14.   },
  15.   created() {
  16.     // console.log('获取摄像头和麦克风权限')
  17.   },
  18.  
  19.   mounted() {
  20.     //初始化 PCMPlayer
  21.     this.play();
  22.   },
  23.   beforeDestroy() {
  24.     this.closeServe();
  25.     this.ttsStop();
  26.   },
  27.  
  28.   methods: {
  29.     // 设置wav 头
  30.     generateWav(buffer) {
  31.       var options = {
  32.         channels: 1,
  33.         sampleRate: 16000,
  34.         bitDepth: 16,
  35.         dataLength: buffer.length,
  36.       };
  37.       var headersBuffer = getFileHeaders(options);
  38.  
  39.       var temp = new Uint8Array(buffer.byteLength + headersBuffer.byteLength);
  40.       temp.set(new Uint8Array(headersBuffer), 0);
  41.       temp.set(new Uint8Array(buffer), headersBuffer.byteLength);
  42.       return temp;
  43.     },
  44.     // 拼接
  45.     concatenate(resultConstructor, ...arrays) {
  46.       let totalLength = 0;
  47.       for (let arr of arrays) {
  48.         totalLength += arr.length;
  49.       }
  50.       let result = new resultConstructor(totalLength);
  51.       let offset = 0;
  52.       for (let arr of arrays) {
  53.         result.set(arr, offset);
  54.         offset += arr.length;
  55.       }
  56.       return result;
  57.     },
  58.  
  59.     // 初始化 PCMPlayer
  60.     play() {
  61.       const that = this;
  62.       if (this.player) return;
  63.       this.player = new PCMPlayer({
  64.         encoding: "16bitInt",
  65.         channels: 1,
  66.         sampleRate: 16000,
  67.         // 所有cpm 播放结束
  68.         allPlayed: function (r, data) {
  69.           console.log("allPlayed", data);
  70.         },
  71.         // 每个pcm 播放结束
  72.         onended: function (r) {
  73.           
  74.         },
  75.         // 音频上线状态
  76.         onstatechange: function (r) {
  77.     
  78.         },
  79.       });
  80.       if (!ws) this.useTTSSocket();
  81.     },
  82.  
  83.     // 播放暂停 用于打断使用
  84.     ttsPlayEnd() {
  85.       this.player.ttsClose();
  86.       this.ttsPlayStatus = false;
  87.     },
  88.     // 摧毁状态
  89.     ttsStop() {
  90.       this.player.destroy();
  91.       this.ttsPlayStatus = false;
  92.       this.player = null;
  93.  
  94.     },
  95.  
  96.     // 关闭tts服务
  97.     closeServe() {
  98.       if (ws) {
  99.         ws.close(); // 离开路由之后断开websocket连接
  100.         ws = null;
  101.       }
  102.       // 2、通过关闭计时器和倒计时关闭心跳监测
  103.       this.heartTTSReset();
  104.     },
  105.  
  106.     // 心跳初重置
  107.     heartTTSReset: function () {
  108.       clearInterval(this.ttsTimeoutObj);
  109.     },
  110.  
  111.     // 心跳初始化
  112.     heartTTSStart() {
  113.       const that = this;
  114.       this.ttsTimeoutObj && clearInterval(this.ttsTimeoutObj);
  115.       this.ttsTimeoutObj = setInterval(function () {
  116.         if (ws.readyState === 1) {
  117.           // console.log('连接状态，发送消息保持连接' + new Date())
  118.           ws.send(JSON.stringify({ signal: "heart_beat" }));
  119.           that.heartTTSStart();
  120.         } else {
  121.           that.useTTSSocket();
  122.         }
  123.       }, that.timeoutTTs);
  124.     },
  125.     // 初始化的websocket
  126.     useTTSSocket() {
  127.       const that = this;
  128.       ws = new WebSocket("ws:/xx.xx.xx.xx:8000");
  129.       // 传输的是 ArrayBuffer 类型的数据
  130.       ws.binaryType = "arraybuffer"; 
  131.       ws.onopen = function () {
  132.         if (ws.readyState === 1) {
  133.           that.heartTTSStart();
  134.         }
  135.       };
  136.       ws.onmessage = function (msg) {
  137.   
  138.         if (!that.isArrayBuffer(msg.data)) {
  139.           const backMsg = JSON.parse(msg.data);
  140.           if (backMsg.message === "speech_start") {
  141.             that.PCMList = [];
  142.             that.player && that.player.sourceLenInit();
  143.             that.ttsSart = true;
  144.           }
  145.           if (backMsg.message === "timestamp") {
  146.             if (that.ttsSart) {
  147.               that.setTxtProgress(backMsg.syllable_times);
  148.             }
  149.             // console.log("播放中");
  150.           }
  151.  
  152.           if (backMsg.message === "speech_end") {
  153.             that.ttsSart = false;
  154.             that.player.bufferFeed = true;
  155.             that.player && that.player.setBufferFeedState(false);
  156.           }
  157.         } else {
  158.           const dataAudio = new Uint8Array(msg.data);
  159.           if (that.ttsSart) {
  160.             that.ttsPlayStatus = true;
  161.             that.PCMList = that.concatenate(
  162.               Uint8Array,
  163.               that.PCMList,
  164.               dataAudio
  165.             );
  166.             that.player.feed(dataAudio);
  167.           }
  168.         }
  169.         that.heartTTSStart();
  170.       };
  171.       ws.onerror = function (err) {
  172.         that.heartTTSStart();
  173.       };
  174.     },
  175.     // 判断返回是否为 ArrayBuffer
  176.     isArrayBuffer(data) {
  177.       const strType = Object.prototype.toString.call(data);
  178.       return strType.includes("ArrayBuffer");
  179.     },
  180.     // 开始发送文本
  181.     startTTS(text) {
  182.       const that = this;
  183.       this.player.initAudioContext();
  184.       setTimeout(() => {
  185.         ws.send(
  186.           JSON.stringify({
  187.             text: text,
  188.             speaker: "xiaoqian",
  189.             pitch: 70,
  190.             volume: 80,
  191.           })
  192.         );
  193.       }, 0);
  194.     },
  195.   },
  196. };

audioBuffer转wav格式的方式

npm install audiobuffer-to-wav --save

截断获取

  1.  
  2.   watch: {
  3.     //播放暂停状态
  4.     ttsPlayStatus: {
  5.       handler(val) {
  6.         if (val) {
  7.           this.playLongTime = Date.now();
  8.         } else {
  9.         //获取播放时间
  10.           this.playLongTime = Date.now() - this.playLongTime;
  11.           //这里很重要 decodeAudioData 需要的arrayBuffer是需要 有头的wav MP3都是可以
  12.           //上一个 调用实现方法中 有PCMList  获取方式
  13.           this.PCMList = this.generateWav(this.PCMList);
  14.           // 调用截断的方法
  15.           this.audioSilce(this.PCMList, this.playLongTime / 1000);
  16.         }
  17.       },
  18.     },
  19.   },
  20.   
  21.     //音频截断
  22.     audioSilce(arrBuffer, time) {
  23.        //兼容写法 
  24.       // window.AudioContext =
  25.       //   window.AudioContext ||
  26.       //   window.webkitAudioContext ||
  27.       //   window.mozAudioContext ||
  28.       //   window.msAudioContext;
  29.        //创建音频上下文
  30.       var audioCtx = new window.AudioContext();
  31.  
  32.       // var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  33.       //异步解析 ARRaybuffer
  34.       audioCtx.decodeAudioData(arrBuffer.buffer, function (audioBuffer) {
  35.         const channels = audioBuffer.numberOfChannels;
  36.         // 声道数量和采样率
  37.         // var channels = audioBuffer.numberOfChannels;
  38.         const rate = audioBuffer.sampleRate;
  39.  
  40.         // 获取截断的音频
  41.         const startOffset = 0;
  42.         const endOffset = rate * time;
  43.         // 对应的帧数
  44.         const frameCount = endOffset - startOffset;
  45.  
  46.         // 创建同样采用率、同样声道数量，长度是前3秒的空的AudioBuffer
  47.         const newAudioBuffer = new AudioContext().createBuffer(
  48.           channels,
  49.           endOffset - startOffset,
  50.           rate
  51.         );
  52.         // 创建临时的Array存放复制的buffer数据
  53.         const anotherArray = new Float32Array(frameCount);
  54.         // 声道的数据的复制和写入
  55.         const offset = 0;
  56.         for (let channel = 0; channel < channels; channel++) {
  57.           audioBuffer.copyFromChannel(anotherArray, channel, startOffset);
  58.           newAudioBuffer.copyToChannel(anotherArray, channel, offset);
  59.         }
  60.  
  61.        //播放的方法 方便验证
  62.         // setTimeout(() => {
  63.         //   var source = audioCtx.createBufferSource();
  64.         //   source.buffer = newAudioBuffer;
  65.         //   source.connect(gainNode);
  66.         //   source.start(0);
  67.         //   source.onended = function (event) {
  68.         //     console.log("播放结束");
  69.         //   };
  70.         // }, 1000);
  71.         
  72.         const wav = toWav(newAudioBuffer);
  73.         const blob = new Blob([wav], { type: "audio/wav" });
  74.         const url = URL.createObjectURL(blob);
  75.         const a = document.createElement("a");
  76.         a.download = "测试.wav";
  77.         a.href = url;
  78.         document.body.appendChild(a);
  79.         a.click();
  80.         document.body.removeChild(a);
  81.       });
  82.     },

 

引入js

import PCMPlayer from "./pcm-player.js";

 方法中调用

this.player.sourcePlayLen 和 playLen  是所有 流式的ArrayBuffer播放完成的判断。

原理：

    使用音频上下文及createBufferSource() 实时播放二进制流

    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    bufferSource = this.audioCtx.createBufferSource();   见pcm-player.js源码

      

        每个ArrayBuffer都会播放，每次播放播放会调用 onended方法，记录 每次feed方法的调用的次数(就是sourcePlayLen)和个文件播放完成  onended 次数做个判断。相等就播放完成。

        firstPlay这个回调是 sourcePlayLen= 1的的回调，判断音频播放中状态的回调方法。这些和业务相关，自己可以补充回调方法。

  1.           var dataAudio = new Uint8Array(msg.data);
  2.           if (that.ttsSart) {
  3.             that.PCMList = that.concatenate(
  4.               Uint8Array,
  5.               that.PCMList,
  6.               dataAudio
  7.             );
  8.  
  9.             that.txtProgreeArr.push(that.sorcePushConut);
  10.             // that.ttsPlayStatus = true;
  11.             that.player && that.player.feed(dataAudio);
  12.             that.sorcePushConut += 1;
  13.           }
  1.     play() {
  2.       const that = this;
  3.       if (this.player) return;
  4.       this.player = new PCMPlayer({
  5.         encoding: "16bitInt",
  6.         channels: 1,
  7.         sampleRate: 16000,
  8.         flushTime: 1000,
  9.         firstPlay: function (r) {
  10.           that.ttsPlayStatus = true;
  11.         },
  12.         onended: function (r) {
  13.           that.playLen += 1;
  14.           if (that.playLen === that.player.sourcePlayLen) {
  15.             that.playLen = 0;
  16.             that.player.sourceLenInit();
  17.             // 正常结束
  18.             that.ttsIsInterrupt = true;
  19.             that.ttsPlayStatus = false;
  20.             that.ttsOnend();
  21.             if (that.chatSate == 4) {
  22.               that.ttsStop();
  23.             }
  24.           }
  25.         },
  26.       })
  27.     },

 主要的几个方法

创建：this.player = new PCMPlayer({})

暂停：this.player.ttsClose();

摧毁：this.player.destroy();

总结

 以上是在项目中，是使用到TTS、ASR不同协议对音频的上传、下载、播放、等功能，用得到请点赞谢谢。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/1010493
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号