vue實(shí)現(xiàn)百度語(yǔ)音合成的實(shí)例講解
這里我完全依照百度提供的語(yǔ)音合成api來(lái)做: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
完整代碼(非原創(chuàng),參考了一個(gè)demo,但是很久以前寫(xiě)的找不到了):
btts(text) {
console.log(text); //以下參數(shù)參考api文檔,token和人的聲音音色之類的參數(shù)
var param={
tex: text,
tok: '24.e835483633e8680242bb042693e1c071.********.1573463462.******-16425747',//這個(gè)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);
// 創(chuàng)建form參數(shù)
var data = {};
for (var p in param) {
data[p] = param[p]
}
// 賦值預(yù)定義參數(shù)
data.cuid = data.cuid || data.tok;
data.ctp = 1;
data.lan = data.lan || 'zh';
//以上為封裝請(qǐng)求的參數(shù)
// 序列化參數(shù)列表
var fd = [];
for(var k in data) {
fd.push(k + '=' + encodeURIComponent(data[k]));
}
var frd = new FileReader();
xhr.responseType = 'blob';
xhr.send(fd.join('&'));
//請(qǐng)求返回結(jié)果處理
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.response.type == 'audio/mp3') {
//創(chuàng)建audio對(duì)象進(jìn)行播報(bào)
var audio = new Audio();
audio.setAttribute('src', URL.createObjectURL(xhr.response));
audio.play();
audio=null;
}else{
//這里如果百度語(yǔ)音合成的接口返回類型不是audio/mp3,是json的話,代表你的參數(shù)有問(wèn)題,返回結(jié)果失敗,具體可以查看api文檔
alert("調(diào)用語(yǔ)音合成接口token已失效!");
}
}else{
alert("語(yǔ)音合成接口調(diào)用失敗!");
}
}
}
}
以上就是本次介紹的實(shí)例代碼內(nèi)容,大家可以在本機(jī)測(cè)試下,感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。
相關(guān)文章
ant design的table組件實(shí)現(xiàn)全選功能以及自定義分頁(yè)
這篇文章主要介紹了ant design的table組件實(shí)現(xiàn)全選功能以及自定義分頁(yè),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
淺談webpack SplitChunksPlugin實(shí)用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
unplugin-auto-import與unplugin-vue-components安裝問(wèn)題解析
這篇文章主要為大家介紹了unplugin-auto-import與unplugin-vue-components問(wèn)題解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
使用Vue-router二級(jí)路由跳轉(zhuǎn)另一條路由下的子級(jí)
這篇文章主要介紹了使用Vue-router二級(jí)路由跳轉(zhuǎn)另一條路由下的子級(jí)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
npm install報(bào)錯(cuò)缺少python問(wèn)題及解決
這篇文章主要介紹了npm install報(bào)錯(cuò)缺少python問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06

