官方文檔：https://ai.baidu.com/ai-doc/SPEECH/mlciskuqn
1.根據(jù)文檔調(diào)用接口（vue2）
<audio :src="this.audioSrc" v-if="this.audioSrc" controls >您的瀏覽器不支持音頻播放。 </audio>
// 1.獲取AccessToken
async handleGetAccessToken() {
try {
const option = {
grant_type: "client_credentials",//client_id：必須參數(shù)，應(yīng)用的 API Key
client_id: '1QO8v5TmrWuHzjzfMKIqyQfn',//client_id：必須參數(shù)仲墨，應(yīng)用的 API Key
client_secret: 'zPwFVrPqFMS8xqoTbA9KgSYUbVumvYyb',//client_secret：必須參數(shù)，應(yīng)用的 Secret Key;
};
const res = await axios.post("https://openapi.baidu.com/oauth/2.0/token", qs.stringify(option));
if (res.status !== 200) {
return openMsg(res.statusText, "warning");
}
openMsg("獲取token成功", "success");
localStorage.setItem("access_token", res.data.access_token);
client_id.value = "";
client_secret.value = "";
this.handleTextToAudio()
} catch (error) {
console.log(error);
}
},
// 2.語(yǔ)音合成接口調(diào)用
async textToAudio() {
this.audioStatus = true
const option = {
tex: this.form.name + '小朋友押搪，孔雀杯歡迎你',
tok: '24.f4aa84ffd4ed412bd234fc4e1617464b.2592000.1724404285.282335-98216382',
cuid: `${Math.floor(Math.random() * 1000000)}`,
ctp: "1",
lan: "zh",
per: '0',
vol: '15'
};
const res = await axios({
method: 'post',
url: 'https://tsn.baidu.com/text2audio',
responseType: 'blob',
headers: { "Content-Type": "application/x-www-form-urlencoded" },
data: qs.stringify(option)
})
if (res.status != 200) {
return this.$message.error(res.statusText, "warning");
}
this.audioSrc = URL.createObjectURL(res.data);
console.log('this.audioSrc', this.audioSrc);
clearInterval(this.intervalId);
},
/oauth/2.0/token接口會(huì)跨域，先手動(dòng)獲取一個(gè)
image.png
語(yǔ)音合成接口參數(shù)解釋：
tex：合成的文本，使用UTF-8編碼臀晃。小于512個(gè)中文字或者英文數(shù)字窗轩。（文本在百度服務(wù)器內(nèi)轉(zhuǎn)換為GBK后夯秃，長(zhǎng)度必須小于1024字節(jié)）
tok：開(kāi)放平臺(tái)獲取到的開(kāi)發(fā)者access_token
cuid：用戶唯一標(biāo)識(shí)，用來(lái)區(qū)分用戶痢艺，計(jì)算UV值仓洼。建議填寫(xiě)能區(qū)分用戶的機(jī)器 MAC 地址或 IMEI 碼，長(zhǎng)度為60字符以內(nèi)
ctp：客戶端類型選擇堤舒，web端填寫(xiě)固定值1
lan：固定值z(mì)h色建。語(yǔ)言選擇,目前只有中英文混合模式，填寫(xiě)固定值z(mì)h
spd：語(yǔ)速舌缤，取值0-9箕戳，默認(rèn)為5中語(yǔ)速
pit：音調(diào)某残，取值0-9，默認(rèn)為5中語(yǔ)調(diào)
vol：音量陵吸，取值0-15玻墅，默認(rèn)為5中音量
per：發(fā)音人選擇, 0為普通女聲，1為普通男生壮虫，3為情感合成-度逍遙澳厢，4為情感合成-度丫丫，默認(rèn)為普通女聲
2.text2audio接口返回Open api characters limit reached
image.png
登錄百度只智能云 - 控制臺(tái) - 語(yǔ)音技術(shù) - 服務(wù)列表 - 語(yǔ)音合成囚似，根據(jù)提示剩拢，開(kāi)通領(lǐng)取資源。
image.png
Vue3
手動(dòng)輸入?yún)?shù)
<template>
<div class="app">
<div class="get_token">
<h1>1.請(qǐng)輸入你的client_id和client_secret獲取access_token</h1>
<el-row :gutter="50">
<el-col :span="8">
<el-input v-model.trim="client_id" placeholder="請(qǐng)輸入你的client_id(應(yīng)用的API Key)" />
</el-col>
<el-col :span="8">
<el-input v-model.trim="client_secret" placeholder="請(qǐng)輸入你的client_secret(應(yīng)用的Secret Key)" />
</el-col>
<el-col :span="8"><el-button @click="handleGetAccessToken">獲取AccessToken</el-button></el-col>
</el-row>
</div>
<hr>
<div class="text2audio">
<h1>2.語(yǔ)音合成</h1>
<h4>免費(fèi)的只能使用前4種語(yǔ)音</h4>
<el-radio-group v-model="per">
<el-radio-button label="1">度小宇</el-radio-button>
<el-radio-button label="0">度小美</el-radio-button>
<el-radio-button label="3">度逍遙（基礎(chǔ)）</el-radio-button>
<el-radio-button label="4">度丫丫</el-radio-button>
<el-radio-button label="5003">度逍遙（精品）</el-radio-button>
<el-radio-button label="5118">度小鹿</el-radio-button>
<el-radio-button label="106">度博文</el-radio-button>
<el-radio-button label="110">度小童</el-radio-button>
<el-radio-button label="111">度小萌</el-radio-button>
<el-radio-button label="103">度米朵</el-radio-button>
<el-radio-button label="5">度小嬌</el-radio-button>
</el-radio-group>
<el-row :gutter="50">
<el-col :span="8">
<el-input v-model.trim="inputText" placeholder="請(qǐng)輸入你要轉(zhuǎn)化的文本" />
</el-col>
<el-col :span="2"><el-button @click="handleTextToAudio">語(yǔ)音合成</el-button></el-col>
<el-col :span="8">
<audio :src="audioSrc" v-if="audioSrc" controls>
您的瀏覽器不支持音頻播放饶唤。
</audio>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";
// client_id是你創(chuàng)建的應(yīng)用的API Key
const client_id = ref("");
// client_secret是你創(chuàng)建應(yīng)用的Secret Key
const client_secret = ref("");
// 配音角色
const per = ref("1");
const inputText = ref("");
const audioSrc = ref("");
// 提示
const openMsg = (message, type) => {
ElMessage({
message,
type,
});
};
// 1.獲取AccessToken
async function handleGetAccessToken() {
try {
const option = {
grant_type: "client_credentials",
client_id: client_id.value,
client_secret: client_secret.value,
};
const res = await axios.post("http://tsn.baidu.com/text2audio", qs.stringify(option));
if (res.status !== 200) {
return openMsg(res.statusText, "warning");
}
openMsg("獲取token成功", "success");
localStorage.setItem("access_token", res.data.access_token);
client_id.value = "";
client_secret.value = "";
} catch (error) {
console.log(error);
}
};
// 2.語(yǔ)音合成接口調(diào)用
async function handleTextToAudio () {
const token = localStorage.getItem("access_token");
if (!token) {
return openMsg("請(qǐng)先獲取token徐伐！", "warning");
}
textToAudio(token);
};
async function textToAudio (token) {
const option = {
tex: inputText.value,
tok: token,
cuid: `${Math.floor(Math.random() * 1000000)}`,
ctp: "1",
lan: "zh",
per: per.value,
};
const res = await axios.post("http://tsn.baidu.com/text2audio", qs.stringify(option), {
headers: { "Content-Type": "application/x-www-form-urlencoded" },
responseType: "blob",
});
if (res.status !== 200) {
return openMsg(res.statusText, "warning");
}
openMsg("語(yǔ)音合成成功", "success");
audioSrc.value = URL.createObjectURL(res.data);
};
</script>
<style scoped>
.app {
width: 80%;
height: 100%;
margin: auto;
}
:deep(.el-radio-group) {
margin-bottom: 30px;
}
</style>
