基于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动态语音播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
mybatis plus saveBatch方法方法执行慢导致接口发送慢解决分析
这篇文章主要为大家介绍了mybatis plus saveBatch方法导致接口发送慢解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10详解SpringBoot之访问静态资源(webapp...)
这篇文章主要介绍了详解SpringBoot之访问静态资源(webapp...),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论