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

 更新时间:2023年04月26日 09:04:53   作者:顽石九变  
本文介绍如何使用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动态语音播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java线性结构中栈、队列和串的基本概念和特点详解

    Java线性结构中栈、队列和串的基本概念和特点详解

    前几天小编给大家介绍了Java线性结构中的链表,除了链表这种结构之外,实际上还有栈、队列、串等结构,那么这些结构又有哪些特点呢,本文就给大家详细的介绍一下,感兴趣的小伙伴跟着小编一起来看看吧
    2023-07-07
  • Java防止频繁请求、重复提交的操作代码(后端防抖操作)

    Java防止频繁请求、重复提交的操作代码(后端防抖操作)

    在客户端网络慢或者服务器响应慢时,用户有时是会频繁刷新页面或重复提交表单的,这样是会给服务器造成不小的负担的,同时在添加数据时有可能造成不必要的麻烦,今天通过本文给大家介绍下Java防止频繁请求、重复提交的操作代码,一起看看吧
    2022-04-04
  • SpringMVC中的几个模型对象

    SpringMVC中的几个模型对象

    这篇文章主要介绍了SpringMVC中的几个模型对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-12-12
  • java开发AOP面向切面编程入门

    java开发AOP面向切面编程入门

    这篇文章主要介绍了java开发的AOP面向切面编程入门的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步学有所得
    2021-10-10
  • spring boot 下对JSON返回值去除null和空字段操作

    spring boot 下对JSON返回值去除null和空字段操作

    这篇文章主要介绍了spring boot 下对JSON返回值去除null和空字段操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 教你如何在Intellij IDEA中集成Gitlab

    教你如何在Intellij IDEA中集成Gitlab

    今天来简单说下,如何在IDEA中集成gitlab项目,默认情况下IDEA中的 VCS => Checkout From Version Control 选项中是没有gitlab这一项的,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友参考下吧
    2023-10-10
  • java基础之类初始化顺序示例解析

    java基础之类初始化顺序示例解析

    这篇文章主要为大家介绍了java基础之类初始化顺序示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Activiti流程图查看实例

    Activiti流程图查看实例

    这篇文章主要介绍了Activiti流程图查看实例,需要的朋友可以参考下
    2014-08-08
  • 关于Java实现HttpServer模拟前端接口调用

    关于Java实现HttpServer模拟前端接口调用

    这篇文章主要介绍了关于Java实现Http Server模拟前端接口调用,Http 协议是建立在 TCP 协议之上的协议,所以能用 TCP 来自己模拟一个简单的 Http Server 当然是可以的,需要的朋友可以参考下
    2023-04-04
  • 必须了解的高阶JAVA枚举特性!

    必须了解的高阶JAVA枚举特性!

    这篇文章主要介绍了必须了解的高阶JAVA枚举特性!帮助大家更好的理解和学习Java枚举的相关知识,感兴趣的朋友可以了解下
    2021-01-01

最新评论