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

发布时间:2023-05-18 16:31:49 作者:iii
来源:亿速云 阅读:131

这篇文章主要介绍“基于SpringBoot和Vue的动态语音播放如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“基于SpringBoot和Vue的动态语音播放如何实现”文章能帮助大家解决问题。

一、后台接口返回byte[]

1、在controller中添加接口,返回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的动态语音播放如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. 如何在vue项目或网页上实现文字转换成语音播放功能
  2. Android如何实现仿微信语音消息的录制和播放功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

springboot vue

上一篇:基于vue3和element-plus的暗黑模式如何实现

下一篇:vue3全局组件自动注册功能怎么实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》