将科大讯飞的语音合成(流式版)功能引入vue项目中

语言处理家

已于 2024-10-12 09:40:55 修改

阅读量588

点赞数 12

文章标签：语音识别人工智能 vue.js

于 2024-10-12 09:37:40 首次发布

本文链接：https://blog.csdn.net/ziyusinian/article/details/142868791

版权

官方并没有给出加入vue文件的案例,但是并没有那么复杂,因为官方给了js的demo

1.首先在语音合成（流式版）WebAPI 文档 | 讯飞开放平台文档中心这个链接中选择js版本的demo进行下载,下载后打开文件夹是下图这样的.

2.将其中的dist文件夹,以及example目录下的两个js文件都直接拉到vue项目的public中,(最好是放在pubilc中,方便后续在html文件中的引入)如下图所示

3.在vue项目的index.html文件中将js进行引入

4.最后在你需要提供语音播报的.vue文件中添加以下代码即可

注意:将其中的appid,api_secret,api_key等全部替换成自己的

const audioPlayer = new AudioPlayer("dist/");
let ttsWS = ''
const APPID = "你的APPID ";
const API_SECRET = "你的 API_SECRET";
const API_KEY = "你的API_KEY";
function getWebSocketUrl(apiKey, apiSecret) {
  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}`;
  return url;
}
function 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);
  }
}
function connectWebSocket() {
  const url = getWebSocketUrl(API_KEY, API_SECRET);
  if ("WebSocket" in window) {
    ttsWS = new WebSocket(url);
  } else if ("MozWebSocket" in window) {
    ttsWS = new MozWebSocket(url);
  } else {
    alert("浏览器不支持WebSocket");
    return;
  }

  ttsWS.onopen = (e) => {
    audioPlayer.start({
      autoPlay: true,
      sampleRate: 16000,
      resumePlayDuration: 1000
    });
    var text = "我现在要进行测试";
    var tte = "UTF8";
    var params = {
      common: {
        app_id: APPID,
      },
      business: {
        vcn: 'aisjiuxu',
        aue: "raw",
        auf: "audio/L16;rate=16000",
        vcn: 'xiaoyan',
        speed: 50,
        volume: 50,
        pitch: 50,
        bgs: 0,
        tte,
      },
      data: {
        status: 2,
        text: encodeText(text, tte),
      },
    };
    ttsWS.send(JSON.stringify(params));
  };
  ttsWS.onmessage = (e) => {
    let jsonData = JSON.parse(e.data);
    // 合成失败
    if (jsonData.code !== 0) {
      console.error(jsonData);
      changeBtnStatus("UNDEFINED");
      return;
    }
    audioPlayer.postMessage({
      type: "base64",
      data: jsonData.data.audio,
      isLastData: jsonData.data.status === 2,
    });
    if (jsonData.code === 0 && jsonData.data.status === 2) {
      ttsWS.close();
    }
  };
  ttsWS.onerror = (e) => {
    console.error(e);
  };
  ttsWS.onclose = (e) => {
    // console.log(e);
  };
}
connectWebSocket();