基于百度tts-实现文字转语音，支持下载，在线预览

小先生编程

已于 2024-05-08 09:08:34 修改

阅读量4.3k

点赞数 2

分类专栏：工具文章标签：百度语音识别人工智能

于 2021-12-27 15:44:53 首次发布

本文链接：https://blog.csdn.net/weixin_43865196/article/details/122173434

版权

工具专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.新建一个.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>
	<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: "林荒大吼出声，即便十年挣扎，他也从未感到过如此无助。自己的身体一点点陷入岁月之门，却眼睁睁的看着君倾城一手持剑，雪白的身影决然凄厉。就这样孤身一人，于漫天风雪中，对阵数千武者",// 文字
						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>