傻瓜网站建设软件,宁波做网站优化,店铺在百度免费定位,东莞网站建设求职简历一、语音合成支持流式返回#xff0c;通过WS可以实时拿到音频流#xff0c;那么我们如何在VUE项目中实现合成功能呢。语音合成应用非常广泛#xff0c;如商家广告合成、驾校声音合成、新闻播报、在线听书等等场景都会用到语音合成。
二、VUE下实现合成并使用浏览器播放代码…一、语音合成支持流式返回通过WS可以实时拿到音频流那么我们如何在VUE项目中实现合成功能呢。语音合成应用非常广泛如商家广告合成、驾校声音合成、新闻播报、在线听书等等场景都会用到语音合成。
二、VUE下实现合成并使用浏览器播放代码如下
templatediv classLogin-containerdiv classallClassdiv classtitleClassb在线语音合成流式版/b/divhr/textarea style width: 310px;height: 100px;{{ttsText}}/textareael-button typeprimary clickclickTts立即合成/el-buttonel-button typeprimary clickclickWavDOWN WAV/el-button/div/div
/templatescript src../js_util/index.js/script
script src../js_util/index.umd.js/script
script
import * as base64 from js-base64
import CryptoJS from ../js_util/crypto-js/crypto-js.js
import AudioPlayer from ../../public/playerconst audioPlayer new AudioPlayer(); // 播放器
export default {name: Login,data() {return {APPID: ,API_SECRET: ,API_KEY: ,ttsWs: , // 合成ws链接ttsText: 锦瑟无端五十弦一弦一柱思华年。庄生晓梦迷蝴蝶望帝春心托杜鹃。沧海月明珠有泪蓝田日暖玉生烟。 此情可待成追忆只是当时已惘然。,vcn: xiaoyan,}},methods: {clickTts() {const url this.getWebSocketUrl(this.API_KEY, this.API_SECRET);if (WebSocket in window) {this.ttsWS new WebSocket(url);} else if (MozWebSocket in window) {this.ttsWS new MozWebSocket(url);} else {alert(浏览器不支持WebSocket);return;}this.ttsWS.onopen (e) {console.log(链接成功...)audioPlayer.start({autoPlay: true,sampleRate: 16000,resumePlayDuration: 1000});let text this.ttsText;let tte document.getElementById(tte) ? unicode : UTF8;let params {common: {app_id: this.APPID,},business: {aue: raw,auf: audio/L16;rate16000,vcn: this.vcn,bgs: 1,tte,},data: {status: 2,text: this.encodeText(text, tte),},};this.ttsWS.send(JSON.stringify(params));console.log(发送成功...)};this.ttsWS.onmessage (e) {let jsonData JSON.parse(e.data);console.log(合成返回的数据 JSON.stringify(jsonData));// 合成失败if (jsonData.code ! 0) {console.error(jsonData);return;}audioPlayer.postMessage({type: base64,data: jsonData.data.audio,isLastData: jsonData.data.status 2,});if (jsonData.code 0 jsonData.data.status 2) {this.ttsWS.close();}};this.ttsWS.onerror (e) {console.error(e);};this.ttsWS.onclose (e) {console.log(e 链接已关闭);};},getWebSocketUrl(apiKey, apiSecret) {let url wss://tts-api.xfyun.cn/v2/tts;let host location.host;let date new Date().toGMTString();let algorithm hmac-sha256;let headers host date request-line;let signatureOrigin host: ${host}\ndate: ${date}\nGET /v2/tts HTTP/1.1;let signatureSha CryptoJS.HmacSHA256(signatureOrigin, apiSecret);let signature CryptoJS.enc.Base64.stringify(signatureSha);let authorizationOrigin api_key${apiKey}, algorithm${algorithm}, headers${headers}, signature${signature};let authorization btoa(authorizationOrigin);url ${url}?authorization${authorization}date${date}host${host};return url;},// 文本编码encodeText(text, type) {if (type unicode) {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);}let binary ;let bytes new Uint8Array(buf);let len bytes.byteLength;for (let i 0; i len; i) {binary String.fromCharCode(bytes[i]);}return window.btoa(binary);} else {return base64.encode(text);}},clickPcm() {},clickWav() {const blob audioPlayer.getAudioDataBlob(wav)if (!blob) {return}let defaultName new Date().getTime();let node document.createElement(a);node.href window.URL.createObjectURL(blob);node.download ${defaultName}.wav;node.click();node.remove();}}
}
/scriptstyle scoped
.Login-container {height: 100vh;background-image: linear-gradient(to bottom right, deepskyblue, darkcyan);overflow: hidden;
}.allClass {margin: 200px auto;background-color: #ffffff;width: 350px;height: 390px;padding: 20px;border-radius: 10px;
}.titleClass {margin: 20px 0;text-align: center;font-size: 24px;
}.inputOneClass {margin: 10px 0;
}.buttonClass {margin: 10px 0;text-align: right;
}
/style三、除了调用浏览器麦克风播报我们还可以一键下载为WAV音频实现效果如下
四、感兴趣的可以加我获取源码
