使用百度语音技术实现文字转语音
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)
