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

作者：喵喵爱编程 | 2024-08-11 03:09:25

踩

度逍遥语音引擎

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

2、将该文件鼠标拖到浏览器中，即可打开。

3、使用说明
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/喵喵爱编程/article/detail/961887