测试地址https://www.djdlt.com/tts.html
源码如下：
<!-- <!DOCTYPE html>
<html>
<head>
<title>文字转语音</title>
</head> -->
<!-- 参考文档： https://ai.baidu.com/ai-doc/SPEECH/Qk38y8lrl#%E4%B8%8A%E4%BC%A0%E5%8F%82%E6%95%B0 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!-- 开发API: https://www.cnblogs.com/Jorgensen/p/11546486.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
p{
background-color: #96b97db0;
padding: 6px;
font-size: 14px;
color: #f5fff4;
}
#text{
background-color: #e3e3e3;
border: 0;
width:99%;
height: 100px;
}
button{
background-color: #d4d3d3;
color: white;
margin: 5px;
}
#spd{
width: 50px;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before，
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>
<body>
<div id="app" >
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-weight:bold;">文字转语音-百度tts</span>
<el-button type="primary" icon="el-icon-headset" style="float: right;margin:3px;" @click="previewClick()">预览</el-button>
</div>
<div>
<span>语言：</span>
<el-radio-group v-model="param.lan" @change="previewClick">
<el-radio v-for="item in language" :label="item.code" :key="item.code" >{{item.name}}</el-radio>
</el-radio-group>
</div>
<div>
<span>后缀：</span>
<el-radio-group v-model="param.aue" @change="previewClick">
<el-radio v-for="item in aue" :label="item.code" :key="item.code" >{{item.name}}</el-radio>
</el-radio-group>
</div>
<audio style="width:100%;" id="tts_autio_id" autoplay="autoplay" controls="controls">
<source id="tts_source_id" :src="url">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
<el-tabs v-model="tabs">
<el-tab-pane label="基础音库" name="-1">
<el-button type="success" v-for="per in pers1" @click="param.per=per.code" style="margin: 3px;">{{ per.name }}</el-tag>
</el-tab-pane>
<el-tab-pane label="精品音库" name="1">
<el-button type="success" v-for="per in pers2" @click="param.per=per.code" style="margin: 3px;">{{ per.name }}
</el-button>
</el-tab-pane>
</el-tabs>
<el-input v-model="param.tex" type="textarea"
:rows="10" placeholder="请输入需要转换的文字"></el-input>
<div class="block">
<span class="demonstration">语速：</span>
<el-slider v-model="param.spd" :min="0" :max="15" ></el-slider>
</div>
<div class="block">
<span class="demonstration">音调：</span>
<el-slider v-model="param.pit" :min="0" :max="15"></el-slider>
</div>
<div class="block">
<span class="demonstration">音量：</span>
<el-slider v-model="param.vol" :min="0" :max="15"></el-slider>
</div>
</el-card>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app'，
data: {
message: 'Hello Vue!'，
tabs: '-1'，
url: "http://tts.baidu.com/text2audio?"，
param:{
cuid: "baike"，
lan: "ZH"，
ctp:1，
pdt:301，
per: 0， //# 发音人选择
spd: 5，// 语速，取值0-15，默认为5中语速
pit: 5，// 音调，取值0-15，默认为5中语调
vol: 5， // 音量，取值0-9，默认为5中音量
tex: "这里是“领航员”空间站，现在面向全球做最后播报在过去的三十六小时里，人类经历了有史以来最大的生存危机在全球各国一百五十万救援人员的拼搏和牺牲下，71%的“推进发动机”和100%的“转向发动机”被全功率重启但遗憾的是，目前的木星引力已经超过全部发动机的总输出功率地球，错失了最后的逃逸机会为了人类文明之延续，MOSS将启动“火种”计划“领航员”空间站冷藏了三十万人类受精卵和一亿颗基础农作物的种子，储存着全球已知的动植物DNA图谱并设有全部人类文明的数字资料库，以确保在新的移民星球重建完整的人类文明你们都是地球的英雄，我们谨记于心，以你们为荣我们将肩负着你们全部的希望，飞向两千五百年后的新家园万事万物总有始终，在地球坠入木星的最后七天里，大家回家吧，抱抱自己的父母，亲亲自己的爱人和孩子。与家人团聚，好好告别，祝大家好运"，// 文字
aue: 3 // 下载的文件格式
}，
//基础音库
pers1: [
{"code":0，"name":"标准女音"}，
{"code":1，"name":"标准男音"}，
{"code":3，"name":"斯文男音"}，
{"code":4，"name":"小萌萌"}，
{"code":5，"name":"知性女音"}
// {"code":5003，"name":"知性女音"}，
// {"code":8，"name":"知性女音"}，
// {"code":9，"name":"知性女音"}，
// {"code":10，"name":"京腔"}，
// {"code":11，"name":"温柔大叔"}
// {"code":6，"name":"老教授"}， // 已废弃
]，
//精品音库 度逍遥（精品）=5003，度小鹿=5118，度博文=106，度小童=110，度小萌=111，度米朵=103，度小娇=5
pers2: [
{"code":5，"name":"度小娇"}，
{"code":103，"name":"度米朵"}，
{"code":106，"name":"度博文"}，
// {"code":111，"name":"度小童"}， // 已废弃
]，
// 文件后缀
aue: [{"code":3，"name":"mp3"}，
// {"code":4，"name":"pcm-16k"}，
// {"code":5，"name":"pcm-8k"}，
{"code":6，"name":"wav"}，
]，
language: [{"code":"ZH"，"name":"普通话"}，
// {"code":"EN"，"name":"美式英语"}， // 已废弃
// {"code":"UK"，"name":"英式英语"}，// 已废弃
// {"code":"CTE"，"name":"粤语"}，// 已废弃
]
}，
methods:{
previewClick(){
this.url="http://tts.baidu.com/text2audio?";
for(var key in this.param){
this.url += key;
this.url += "=";
this.url += this.param[key];
this.url += "&";
}
this.url = this.url.substring(0，this.url.length - 1);
document.getElementById('tts_autio_id').setAttribute("src"， this.url);
document.getElementById('tts_autio_id').play()
}
}
})
</script>
</body>
</html>