1. 程式人生 > 實用技巧 >vue實現百度語音合成的例項講解

vue實現百度語音合成的例項講解

這裡我完全依照百度提供的語音合成api來做:https://ai.baidu.com/docs#/TTS-Online-Node-SDK/top 直接去看node.js SDK。

1.換取access_token:

參考:https://ai.baidu.com/docs#/TTS-API/top,在這裡用瀏覽器換取token

2.下載sdk依賴:

npm install baidu-aip-sdk

完整程式碼(非原創,參考了一個demo,但是很久以前寫的找不到了):

btts(text) {
   console.log(text);   //以下引數參考api文件,token和人的聲音音色之類的引數
   var param={
      tex: text,
      tok: '24.e835483633e8680242bb042693e1c071.********.1573463462.******-16425747',//這個token要換成自己的
      spd: 5,
      pit: 5,
      vol: 15,
      per: 4
    };
   var url = 'http://tsn.baidu.com/text2audio';
   var p = param || {};
   var that = this;
   var xhr = new XMLHttpRequest();
   xhr.open('POST', url);
    // 建立form引數
     var data = {};
     for (var p in param) {
     data[p] = param[p]
   }

     // 賦值預定義引數
     data.cuid = data.cuid || data.tok;
   data.ctp = 1;
   data.lan = data.lan || 'zh';
    //以上為封裝請求的引數



     // 序列化引數列表
    var fd = [];
   for(var k in data) {
     fd.push(k + '=' + encodeURIComponent(data[k]));
   }

   var frd = new FileReader();
   xhr.responseType = 'blob';
   xhr.send(fd.join('&'));

    //請求返回結果處理
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
         if (xhr.response.type == 'audio/mp3') {
             //建立audio物件進行播報
           var audio = new Audio();
           audio.setAttribute('src', URL.createObjectURL(xhr.response));
           audio.play();
           audio=null;
         }else{
            //這裡如果百度語音合成的介面返回型別不是audio/mp3,是json的話,代表你的引數有問題,返回結果失敗,具體可以檢視api文件
        alert("呼叫語音合成介面token已失效!");
        }
       }else{
        alert("語音合成介面呼叫失敗!");
       }
     }
   }
  }

以上就是本次介紹的例項程式碼內容,大家可以在本機測試下,感謝大家的學習和對碼農教程的支援。