基于SpringBoot和Vue的动态语音播放如何实现

这篇文章主要介绍“基于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的动态语音播放如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。