使用百度语音技术实现文字转语音
SpringBoot+Vue前后端分离项目
调用api接口需要使用AK和SK生成AccessToken,生成getAccessToken的接口有跨域限制,所以统一的由后端处理了
部分参数在控制台->语音技术->在线调试里面能找到
Controller
@RestController
@RequestMapping("/tts")
public class BaiDuTTSController {
@PostMapping("/baidu/{infoId}")
public ResponseEntity<byte[]> info2Audio(@PathVariable("infoId") String infoId, HttpServletResponse response){
// todo 通过infoId查询待转换的文字,字数小于60和大于60时使用的方法不一样,这里还没优化
String text = "你好百度";
byte[] audioBytes = new byte[0];
try {
audioBytes = getAudioFromService(text);
} catch (Exception e) {
e.printStackTrace();
}
if (audioBytes != null) {
return ResponseEntity
.ok()
.contentType(MediaType.valueOf("audio/wav")) // 或者是audio/wav等,根据你的音频格式
.body(audioBytes);
} else {
// 返回错误响应
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
}
}
// 获取响应字节
public byte[] getAudioFromService( String text)throws Exception{
String url = "https://tsn.baidu.com/text2audio";
String requestBody = "tex=" + text + "&tok=" + getAccessToken() + "&cuid=这里要替换=5&pit=5&vol=5&per=1&aue=3";
HttpResponse response = HttpRequest.post(url)
.contentType("application/x-www-form-urlencoded")
.body(requestBody)
.header("Accept", "*/*")
.execute();
// 处理响应
if (response.isOk()) {
return response.bodyBytes();
}
throw new RuntimeException("获取音频错误,请联系管理员");
}
/**
* 从用户的AK,SK生成鉴权签名(Access Token)
*
* @return 鉴权签名(Access Token)
* @throws IOException IO异常
*/
static String getAccessToken() throws IOException {
String AK = "你的AK";
String SK = "你的SK";
String url = "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=" + AK + "&client_secret=" + SK;
String postResult = HttpUtil.post(url, "");
if (StrUtil.isBlank(postResult)){
throw new RuntimeException("响应体为空");
}
JSONObject jsonObject = JSONUtil.parseObj(postResult);
String accessToken = jsonObject.getStr("access_token");
if (StrUtil.isBlank(accessToken)){
throw new RuntimeException("accessToken为空");
}
return accessToken;
}
}
VUE
// 音频展示
<el-col :span="8">
<audio :src="audioSrc" v-if="audioSrc" controls>
您的浏览器不支持音频播放。
</audio>
</el-col>
// methods
// 语音播报的函数
handleSpeak(id) {
baiduTTS(id).then(res =>{
console.log(res.headers)
console.log(res)
// 这里注意是res还是res.data,看你后台怎么封装的
this.audioSrc = URL.createObjectURL(new Blob([res],{type:"audio/wav"}));
})
},
// 发送请求的js
import request from '@/utils/request'
export async function baiduTTS(id) {
return request({
url: '/tts/baidu/' + id,
method: 'post',
responseType: "blob"
})
}
参考
前端使用百度 TTS(语音合成)非常详细 - 掘金 (juejin.cn)
ChatGPT:
问题
this.audioSrc = URL.createObjectURL(new Blob([res],{type:"audio/wav"}));
这一行代码出错(准确的是URL.createObjectURL)
安装/升级下core-js解决(yarn add core-js)