前端 vue3 对接科大讯飞的语音在线合成API

主要的功能就是将文本转为语音，可以播放。

看了看官方提供的demo，嗯....没看懂。最后还是去网上找的。

网上提供的案例，很多都是有局限性的，我找的那个他只能读取第一段数据，剩下的不读取。

科大讯飞的接口，返回的是一个数组，因为需要合成的文本多，所以将数据切割成多份，然后返回的。

例子：

封装了个方法，直接调用方法就可以了。

import CryptoJS from 'crypto-js';
import { Base64 } from 'js-base64';
import { message } from 'ant-design-vue';let APPID = '';
let API_SECRET = '';
let API_KEY = '';// 正确的URL
function getWebSocketUrl(apiKey, apiSecret) {let url = 'wss://tts-api.xfyun.cn/v2/tts';const host = 'tts-api.xfyun.cn';const date = new Date().toGMTString();const algorithm = 'hmac-sha256';const headers = 'host date request-line';const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/tts HTTP/1.1`;const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);const signature = CryptoJS.enc.Base64.stringify(signatureSha);const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;const authorization = btoa(authorizationOrigin);url = `${url}?authorization=${authorization}&date=${date}&host=${host}`;return url;
}// 文本编码
function encodeText(text, encoding) {switch (encoding) {case 'utf16le': {const buf = new ArrayBuffer(text.length * 4);const bufView = new Uint16Array(buf);// eslint-disable-next-line no-plusplusfor (let i = 0, strlen = text.length; i < strlen; i++) {bufView[i] = text.charCodeAt(i);}return buf;}case 'buffer2Base64': {let binary = '';const bytes = new Uint8Array(text);const len = bytes.byteLength;// eslint-disable-next-line no-plusplusfor (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);}}
}// eslint-disable-next-line no-shadow
function TextToSpeechConfig(APPID, vcn, speed, volume, pitch, tte, text) {// 私有方法：生成参数对象function generateParams() {return {common: {app_id: APPID,},business: {aue: 'lame',auf: 'audio/L16;rate=16000',sfl: 1,vcn,speed,volume,pitch,bgs: 1,tte,},data: {status: 2,text: encodeText(text, tte === 'unicode' ? 'base64&utf16le' : ''), // 假设 encodeText 是一个已定义的函数},};}// 公共方法，暴露给外部调用以获取参数对象return generateParams();
}export default class TTSWSS {static _instance; // 使用下划线表示这是一个内部使用的属性text = '';vcn = '';speed = '';volume = '';pitch = '';tte = 'UTF8';ttsWS = null;static getInstance(text, vcn, speed, volume, pitch) { // 单例模式// if (!TTSWSS._instance) {//   TTSWSS._instance = new TTSWSS(text, vcn, speed, volume, pitch);// }TTSWSS._instance = new TTSWSS(text, vcn, speed, volume, pitch);return TTSWSS._instance;}constructor(text, vcn, speed, volume, pitch) {this.text = text;this.vcn = vcn;this.speed = speed;this.volume = volume;this.pitch = pitch;const url = getWebSocketUrl(API_KEY, API_SECRET);if ('WebSocket' in window) { // 构造函数时就创建websocket对象this.ttsWS = new WebSocket(url);} else if ('MozWebSocket' in window) {this.ttsWS = new WebSocket(url);} else {// alert('浏览器不支持WebSocket');message.error('浏览器不支持WebSocket');}}setText(text) {this.text = text;}setTextVCN(vcn) {this.vcn = vcn;}setSpeed(speed) {this.speed = speed;}setVolume(volume) {this.volume = volume;}// setTte(istte=false){//   this.tte = istte==true ? "unicode" : "UTF8"// }connectWebSocket() {this.ttsWS.onopen = () => {// console.log(TextToSpeechConfig(APPID, this.vcn, this.speed, this.volume, this.pitch, this.tte, this.text), '请求参数');this.ttsWS.send(JSON.stringify(TextToSpeechConfig(APPID, this.vcn, this.speed, this.volume, this.pitch, this.tte, this.text)));};this.ttsWS.onerror = () => {// console.error(e);};this.ttsWS.onclose = () => {// console.log(e);};}disconnectWebSocket() {TTSWSS._instance = null;this.ttsWS.close(); // 关闭 WebSocket 连接this.ttsWS = null; // 清空 WebSocket 对象// console.log('WebSocket disconnected');}send_newMessage = text => {const params = {common: {app_id: APPID,},business: {aue: 'lame',sfl: 1,auf: 'audio/L16;rate=16000',vcn: this.vcn,speed: this.speed,volume: this.volume,pitch: this.pitch,bgs: 1,tte: 'UTF8',},data: {status: 2,text: encodeText(text, this.tte === 'unicode' ? 'base64&utf16le' : ''),},};this.ttsWS.send(JSON.stringify(params));};getMessage() {const that = this.ttsWS;const messages = []; // 用于存储所有消息return new Promise((resolve, reject) => {that.onmessage = e => {const jsonData = JSON.parse(e.data);// 合成失败if (jsonData.code !== 0) {// eslint-disable-next-line prefer-promise-reject-errorsreject({ message: '失败', data: jsonData });return; // 退出当前处理}// 存储成功的消息messages.push({message: '成功',type: 'base64',data: jsonData.data.audio,isLastData: jsonData.data.status === 2,});// 如果接收到最后一条数据，解析所有消息并关闭连接if (jsonData.data.status === 2) {that.close();resolve(messages); // 返回所有消息}};});}TTS_close_reset() {this.ttsWS?.close();// audioPlayer.reset();}static resetInstance() {TTSWSS._instance = null; // 清空实例// console.log('TTSWSS instance has been reset.');}
}
export function setConfig(params) {APPID = params?.APPID;API_SECRET = params?.APISecret;API_KEY = params?.APIKey;
}

 使用：

import TTWss from '@/utils/voice/index.js';const audio_url = ref('');
const ttsinstance = ref(null); // 初始化为 null
const voiceLoading = ref(false); // 加载音频中function playVoice() {voiceLoading.value = true;ttsinstance?.value?.disconnectWebSocket();ttsinstance.value = null;audio_url.value = null; // 清空音频 URLconst { text } = props; // 这里是要转成语音的文字，我这个是写在组件里面的用props接收的，所以要这样写，到时候替换成自己要合成的文字就行// 创建 TTS 实例ttsinstance.value = TTWss.getInstance(text, 'xiaoyan', 50, 50, 50);// 连接 WebSocketttsinstance.value.connectWebSocket();// 获取消息ttsinstance.value.getMessage().then(result => {// 这里需要特殊处理，因为返回的数据是数组，所以要先将数组中的数据拿出来，放在每项里面的data中，然将不要先拼接，而是要先解码，然后将解码后的数据在拼接起来，这样就是一整段完整的录音文件了。const allData = result.map(it => atob(it.data));const binaryString = allData.join('');const len = binaryString.length;const bytes = new Uint8Array(len);for (let i = 0; i < len; i++) {bytes[i] = binaryString.charCodeAt(i);}const blob = new Blob([bytes], { type: 'audio/mp3' }); // 根据音频格式修改MIME类型const url = URL.createObjectURL(blob);audio_url.value = url; // 将生成的 URL 赋值给 audio_url// 这里展开后可以直接下载// const aTag = document.createElement('a');// aTag.href = url;// aTag.download = 'audio_file_name.mp3'; // 设置文件名// aTag.style.display = 'none';// document.body.appendChild(aTag);// aTag.click();// document.body.removeChild(aTag);// 播放音频playItem(url);voiceLoading.value = false;}).catch(err => {// console.log('失败', err);message.error(err);voiceLoading.value = false;});
}let currentAudio = null;
function playItem(url) {// 如果当前有音频在播放，则停止它if (currentAudio) {currentAudio.pause();currentAudio.currentTime = 0; // 可选：重置播放时间}currentAudio = new Audio(url);currentAudio.play().then(() => {// console.log('音频播放开始');}).catch(error => {// console.error('音频播放失败', error);message.error(error);});// 释放对象URL（可选）currentAudio.addEventListener('ended', () => {URL.revokeObjectURL(url);currentAudio = null; // 音频结束后清空实例});
}

HTML：

<img:src="PlayVoice"alt=""class="icon-img"@click.stop="playVoice"/>