可能会遇到的坑
原文链接
自行了解 js webWorker线程
我的目录结构
TTS.js代码
// 科大讯飞 文字->语音 import {downloadPCM, downloadWAV} from '@/common/download.js' import CryptoJS from 'crypto-js' import { Base64 } from 'js-base64' var transWorker = new Worker('../common/transcode.worker.js') //测试完成后需要改成 var transWorker = new Worker('transcode.worker.js') //APPID，APISecret，APIKey在控制台-我的应用-语音合成（流式版）页面获取 const APPID = '' const API_SECRET = '' const API_KEY = '' function getWebsocketUrl() { return new Promise((resolve, reject) => { var apiKey = API_KEY var apiSecret = API_SECRET var url = 'wss://tts-api.xfyun.cn/v2/tts' var host = location.host var date = new Date().toGMTString() var algorithm = 'hmac-sha256' var headers = 'host date request-line' var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/tts HTTP/1.1` var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret) var signature = CryptoJS.enc.Base64.stringify(signatureSha) var authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"` var authorization = btoa(authorizationOrigin) url = `${url}?authorization=${authorization}&date=${date}&host=${host}` resolve(url) }) } export default class TTSRecorder { constructor({ speed = 20, voice = 50, pitch = 50, voiceName = 'xiaoyan', appId = APPID, text = '', tte = 'UTF8', defaultText = '请输入您要合成的文本', } = {}) { this.speed = speed this.voice = voice this.pitch = pitch this.voiceName = voiceName this.text = text this.tte = tte this.defaultText = defaultText this.appId = appId this.audioData = [] this.rawAudioData = [] this.audioDataOffset = 0 this.status = 'init' transWorker.onmessage = (e) => { this.audioData.push(...e.data.data) this.rawAudioData.push(...e.data.rawAudioData) } } // 修改录音听写状态 setStatus(status) { this.onWillStatusChange && this.onWillStatusChange(this.status, status) this.status = status } // 设置合成相关参数 setParams({ speed, voice, pitch, text, voiceName, tte }) { speed !== undefined && (this.speed = speed) voice !== undefined && (this.voice = voice) pitch !== undefined && (this.pitch = pitch) text && (this.text = text) tte && (this.tte = tte) voiceName && (this.voiceName = voiceName) this.resetAudio() } // 连接websocket connectWebSocket() { this.setStatus('ttsing') return getWebsocketUrl().then(url => { let ttsWS if ('WebSocket' in window) { ttsWS = new WebSocket(url) } else if ('MozWebSocket' in window) { ttsWS = new MozWebSocket(url) } else { alert('浏览器不支持WebSocket') return } this.ttsWS = ttsWS ttsWS.onopen = e => { this.webSocketSend() this.playTimeout = setTimeout(() => { this.audioPlay() }, 1000) } ttsWS.onmessage = e => { this.result(e.data) } ttsWS.onerror = e => { clearTimeout(this.playTimeout) this.setStatus('errorTTS') alert('WebSocket报错，请f12查看详情') console.error(`详情查看：${encodeURI(url.replace('wss:', 'https:'))}`) } ttsWS.onclose = e => { console.log(e) } }) } // 处理音频数据 transToAudioData(audioData) {} // websocket发送数据 webSocketSend() { var params = { common: { app_id: this.appId, // APPID }, business: { aue: 'raw', auf: 'audio/L16;rate=16000', vcn: this.voiceName, speed: this.speed, volume: this.voice, pitch: this.pitch, bgs: 1, tte: this.tte, }, data: { status: 2, text: this.encodeText( this.text || this.defaultText, this.tte === 'unicode' ? 'base64&utf16le' : '' ) }, } this.ttsWS.send(JSON.stringify(params)) } encodeText (text, encoding) { switch (encoding) { case 'utf16le' : { let buf = new ArrayBuffer(text.length * 4) let bufView = new Uint16Array(buf) for (let i = 0, strlen = text.length; i < strlen; i++) { bufView[i] = text.charCodeAt(i) } return buf } case 'buffer2Base64': { let binary = '' let bytes = new Uint8Array(text) let len = bytes.byteLength for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]) } return window.btoa(binary) } case 'base64&utf16le' : { return this.encodeText(this.encodeText(text, 'utf16le'), 'buffer2Base64') } default : { return Base64.encode(text) } } } // websocket接收数据的处理 result(resultData) { let jsonData = JSON.parse(resultData) // 合成失败 if (jsonData.code !== 0) { alert(`合成失败: ${jsonData.code}:${jsonData.message}`) console.error(`${jsonData.code}:${jsonData.message}`) this.resetAudio() return } transWorker.postMessage(jsonData.data.audio) // window.postMessage(jsonData.data.audio) if (jsonData.code === 0 && jsonData.data.status === 2) { this.ttsWS.close() } } // 重置音频数据 resetAudio() { this.audioStop() this.setStatus('init') this.audioDataOffset = 0 this.audioData = [] this.rawAudioData = [] this.ttsWS && this.ttsWS.close() clearTimeout(this.playTimeout) } // 音频初始化 audioInit() { let AudioContext = window.AudioContext || window.webkitAudioContext if (AudioContext) { this.audioContext = new AudioContext() this.audioContext.resume() this.audioDataOffset = 0 } } // 音频播放 audioPlay() { this.setStatus('play') let audioData = this.audioData.slice(this.audioDataOffset) this.audioDataOffset += audioData.length let audioBuffer = this.audioContext.createBuffer(1, audioData.length, 22050) let nowBuffering = audioBuffer.getChannelData(0) if (audioBuffer.copyToChannel) { audioBuffer.copyToChannel(new Float32Array(audioData), 0, 0) } else { for (let i = 0; i < audioData.length; i++) { nowBuffering[i] = audioData[i] } } let bufferSource = this.bufferSource = this.audioContext.createBufferSource() bufferSource.buffer = audioBuffer bufferSource.connect(this.audioContext.destination) bufferSource.start() bufferSource.onended = event => { if (this.status !== 'play') { return } if (this.audioDataOffset < this.audioData.length) { this.audioPlay() } else { this.audioStop() } } } // 音频播放结束 audioStop() { this.setStatus('endPlay') clearTimeout(this.playTimeout) this.audioDataOffset = 0 if (this.bufferSource) { try { this.bufferSource.stop() } catch (e) { console.log(e) } } } start() { if(this.audioData.length) { this.audioPlay() } else { if (!this.audioContext) { this.audioInit() } if (!this.audioContext) { alert('该浏览器不支持webAudioApi相关接口') return } this.connectWebSocket() } } stop() { this.audioStop() } }
transcode.worker.js代码(科大讯飞demo里面的，但是稍作修改 语音合成（流式版）WebAPI 文档 | 讯飞开放平台文档中心)
/* * @Autor: lycheng * @Date: 2020-01-13 16:12:22 */ let minSampleRate = 22050 self.onmessage = function(e) { transcode.transToAudioData(e.data) } var transcode = { transToAudioData(audioDataStr, fromRate = 16000, toRate = 22505) { let outputS16 = transcode.base64ToS16(audioDataStr) let output = transcode.transS16ToF32(outputS16) output = transcode.transSamplingRate(output, fromRate, toRate) output = Array.from(output) self.postMessage({ data: output, rawAudioData: Array.from(outputS16) }) }, transSamplingRate(data, fromRate = 44100, toRate = 16000) { var fitCount = Math.round(data.length * (toRate / fromRate)) var newData = new Float32Array(fitCount) var springFactor = (data.length - 1) / (fitCount - 1) newData[0] = data[0] for (let i = 1; i < fitCount - 1; i++) { var tmp = i * springFactor var before = Math.floor(tmp).toFixed() var after = Math.ceil(tmp).toFixed() var atPoint = tmp - before newData[i] = data[before] + (data[after] - data[before]) * atPoint } newData[fitCount - 1] = data[data.length - 1] return newData }, transS16ToF32(input) { var tmpData = [] for (let i = 0; i < input.length; i++) { var d = input[i] < 0 ? input[i] / 0x8000 : input[i] / 0x7fff tmpData.push(d) } return new Float32Array(tmpData) }, base64ToS16(base64AudioData) { base64AudioData = atob(base64AudioData) const outputArray = new Uint8Array(base64AudioData.length) for (let i = 0; i < base64AudioData.length; ++i) { outputArray[i] = base64AudioData.charCodeAt(i) } return new Int16Array(new DataView(outputArray.buffer).buffer) }, }
index.vue代码
<template> <view class="content"> <view class="text-area"> <text class="title">在线文字转语音</text> </view> <textarea type="text" v-model="txt" placeholder="请输入您要合成的文本"></textarea> <button @click="startTrans">{{btnState[ttsStatus]}}</button> <br/> <view class="text-area"> <text class="title">语音转文字</text> </view> <button>开始转写</button> <button>结束转写</button> </view> </template> <script> import TTSRecorder from "@/common/TTS.js" console.log(TTSRecorder,'TTSRecorder'); // const transWorker = new Worker(new URL('../../common/transcode.worker.js', import.meta.url)) let ttsRecorder = new TTSRecorder() export default { data() { return { title: 'Hello', txt: '', aTt: '', btnState: { init: '立即合成', ttsing: '正在合成', play: '停止播放', endPlay: '重新播放', errorTTS: '合成失败', }, ttsStatus: 'init' } }, onLoad() { const _this = this ttsRecorder.onWillStatusChange = function(oldStatus, status) { // 可以在这里进行页面中一些交互逻辑处理：按钮交互等 _this.ttsStatus = status } }, methods: { startTrans(){ ttsRecorder.setParams({ text: this.txt }) console.log(ttsRecorder,'ttsRecorder'); if (['init', 'endPlay', 'errorTTS'].indexOf(ttsRecorder.status) > -1) { console.log(111); ttsRecorder.start() } else { ttsRecorder.stop() } } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>
最后打包出来后，把transcode.worker.js放到根目录即可
关键点就是webWorker
