1.百度TTS应用创建
- 领取个人免费额度
语音合成在线语音合成离线语音合成-百度AI开放平台 (baidu.com)
点击立即选购,领取个人或企业免费额度
- 控制台创建应用
2.代码
完整代码已上传至github:void00013/9.TTS-ASR (github.com)
流程总体来说分为两步:
- 获取accesstoken(这个接口有跨域限制)
- 语音合成(这个接口无跨域限制,需要注意的是这个接口返回的数据是blob二进制流的形式,如果你使用axios去请求,它默认的responseType是json,即使你把这个json转换为blob形式也无法使用,所以使用axios请求的时候需要在config中配置responseType为blob,这样才可以正确的拿到语音数据)
<template>
<div class="app">
<div class="get_token">
<h1>1.请输入你的client_id和client_secret获取access_token</h1>
<el-row :gutter="50">
<el-col :span="8">
<el-input v-model.trim="client_id" placeholder="请输入你的client_id(应用的API Key)" />
</el-col>
<el-col :span="8">
<el-input v-model.trim="client_secret" placeholder="请输入你的client_secret(应用的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.语音合成</h1>
<h4>免费的只能使用前4种语音</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">度逍遥(基础)</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="请输入你要转化的文本" />
</el-col>
<el-col :span="2"><el-button @click="handleTextToAudio">语音合成</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是你创建的应用的API Key
const client_id = ref("");
// client_secret是你创建应用的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
const handleGetAccessToken = async () => {
try {
const option = {
grant_type: "client_credentials",
client_id: client_id.value,
client_secret: client_secret.value,
};
const res = await axios.post("/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 = "";
} catch (error) {
console.log(error);
}
};
// 2.语音合成接口调用
const handleTextToAudio = async () => {
const token = localStorage.getItem("access_token");
if (!token) {
return openMsg("请先获取token!", "warning");
}
textToAudio(token);
};
const textToAudio = async (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("/text2audio", qs.stringify(option), {
headers: { "Content-Type": "application/x-www-form-urlencoded" },
responseType: "blob",
});
if (res.status !== 200) {
return openMsg(res.statusText, "warning");
}
openMsg("语音合成成功", "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>
3.演示
- 首先填入你应用的API Key和Secret Key(在控制台应用列表种查看),填入后点击获取AccessToken
- 输入你要转换为语音的文本,选择人物(免费版只能使用前4个)