这篇文章主要介绍“基于SpringBoot和Vue的动态语音播放如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“基于SpringBoot和Vue的动态语音播放如何实现”文章能帮助大家解决问题。
一、后台接口返回byte[]
在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接口，把文字转语音
在configureMessageConverters中添加解析器
ByteArrayHttpMessageConverter
@Overridepublic 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的动态语音播放如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
