基于SpringBoot和Vue的动态语音播放实现
作者：顽石九变
本文介绍如何使用SpringBoot和Vue实现音频文件的动态播放，包括前端页面设计、后端接口开发、音频文件存储和调用等方面。通过该实现，用户可以在网页上直接播放音频，增强用户体验，提高网站互动性
SpringBoot+Vue实现动态语音播放。实现效果：
- 页面点击播报语音按钮，调用后台接口获取二进制byte[]
- 前端得到返回数据，调用浏览器控件AudioContext解码音频流，实现播放。
一、后台接口返回byte[]
1、在controller中添加接口，返回byte[]
- 设置 produces = “application/octet-stream”
- 设置 返回类型 ResponseEntity<byte[]>
@PostMapping(value = "/v/voice", produces = "application/octet-stream")
public ResponseEntity<byte[]> voice(@RequestBody JSONObject param, HttpServletResponse response) throws IOException {
String text = param.getString("text");
// 以下代码调用阿里云接口，把文字转语音
byte[] voice = SpeechRestfulUtil.text2voice(text);
// 返回音频byte[]
return ResponseEntity.ok().body(voice);
}
本例是调用阿里云tts接口，把文字转语音
2、在configureMessageConverters中添加解析器
ByteArrayHttpMessageConverter
@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
MappingJackson2HttpMessageConverter jackson2HttpMessageConverter = new MappingJackson2HttpMessageConverter(objectMapper());
converters.add(jackson2HttpMessageConverter);
converters.add(new ByteArrayHttpMessageConverter());
}
二、Vue前端调用接口播放语音
使用axios调用后端接口，设置 responseType=blob
1）得到浏览器播放控件 audioContext
2）使用FileReader读取得到的byte[]
3）FileReader绑定load事件，读取byte[]完成后播放语音
function doVoice(){
axios({
method:'post',
url:req.voice,
responseType:'blob',
data:{text:data.info} // 需要播放的文本
}).then(function (response) {
console.log(response);
if(response.status===200){
// 1）得到浏览器播放控件 audioContext
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let reader = new FileReader();
reader.onload = function(evt) {
if (evt.target.readyState === FileReader.DONE) {
// 3）FileReader绑定load事件，读取byte[]完成后播放语音
audioContext.decodeAudioData(evt.target.result,
function(buffer) {
// 解码成pcm流
let audioBufferSouceNode = audioContext.createBufferSource();
audioBufferSouceNode.buffer = buffer;
audioBufferSouceNode.connect(audioContext.destination);
audioBufferSouceNode.start(0);
}, function(e) {
console.log(e);
});
}
};
// 2）使用FileReader读取得到的byte[]
reader.readAsArrayBuffer(response.data);
}
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
}到此这篇关于基于SpringBoot和Vue的动态语音播放实现的文章就介绍到这了,更多相关SpringBoot动态语音播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！