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,但是很久以前寫的找不到了):
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)文章
詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng)
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05vue-cli 引入jQuery,Bootstrap,popper的方法
這篇文章主要介紹了vue-cli 引入jQuery,Bootstrap,popper的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程
在微信小程序中,可以很簡(jiǎn)單的分享一個(gè)頁(yè)面,比微信H5簡(jiǎn)單多了,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程,需要的朋友可以參考下2023-02-02詳解vue-property-decorator使用手冊(cè)
這篇文章主要介紹了vue-property-decorator使用手冊(cè),文中較詳細(xì)的給大家介紹了他們的用法,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐
ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶選擇的時(shí)間范圍,本文就來(lái)介紹了vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐,感興趣的可以了解一下2023-10-10vue 路由頁(yè)面之間實(shí)現(xiàn)用手指進(jìn)行滑動(dòng)的方法
下面小編就為大家分享一篇vue 路由頁(yè)面之間實(shí)現(xiàn)用手指進(jìn)行滑動(dòng)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨跟隨小編過(guò)來(lái)看看吧2018-02-02vue3如何實(shí)現(xiàn)表格內(nèi)容無(wú)縫滾動(dòng)(又寫了一堆冗余代碼)
這篇文章主要給大家介紹了關(guān)于vue3如何實(shí)現(xiàn)表格內(nèi)容無(wú)縫滾動(dòng)的相關(guān)資料,在Vue3項(xiàng)目中難免會(huì)遇到讓列表滾動(dòng)的需求,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04vue?elementui?實(shí)現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06