vue實現百度語音合成的例項講解
阿新 • • 發佈:2020-11-19
這裡我完全依照百度提供的語音合成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("語音合成介面呼叫失敗!"); } } } }
以上就是本次介紹的例項程式碼內容,大家可以在本機測試下,感謝大家的學習和對碼農教程的支援。