基于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 hive udf函数的示例代码(手机号码脱敏)

    大数据 java hive udf函数的示例代码(手机号码脱敏)

    这篇文章主要介绍了大数据 java hive udf函数(手机号码脱敏),的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • java OpenTelemetry日志体系及缺陷解决方案

    java OpenTelemetry日志体系及缺陷解决方案

    这篇文章主要为大家介绍了java OpenTelemetry日志体系及缺陷解决方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 浅谈Maven 项目中依赖的搜索顺序

    浅谈Maven 项目中依赖的搜索顺序

    这篇文章主要介绍了浅谈Maven 项目中依赖的搜索顺序,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Spring如何实现管理事务

    Spring如何实现管理事务

    Spring通过编程式事务和声明式事务管理来控制事务的边界和行为,声明式事务管理通过@Transactional注解实现,提供了丰富的配置选项来控制事务的行为,如传播行为、隔离级别、超时时间和回滚规则
    2024-11-11
  • metershpere实现调用自定义jar包中的方法

    metershpere实现调用自定义jar包中的方法

    在MeterSphere接口测试中,面对多层循环逻辑和逻辑判断等复杂情况,直接编写测试用例往往显得混乱不便,本文介绍了一个简化这一过程的方法:首先使用IDEA创建Maven工程,编写所需逻辑并生成jar包;然后在MeterSphere中上传此jar包
    2024-10-10
  • springboot 整合 SA-Token 使用详解

    springboot 整合 SA-Token 使用详解

    本文详细介绍了SA-Token这款安全框架的使用,并结合实际操作演示了如何集成到springboot项目中,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • Java静态内部类实现单例过程

    Java静态内部类实现单例过程

    这篇文章主要介绍了Java静态内部类实现单例过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Spring和Hibernate的整合操作示例

    Spring和Hibernate的整合操作示例

    这篇文章主要介绍了Spring和Hibernate的整合操作,结合实例形式详细分析了Spring和Hibernate的整合具体步骤、实现方法及相关操作注意事项,需要的朋友可以参考下
    2020-01-01
  • Java数据结构之LinkedList从链表到实现

    Java数据结构之LinkedList从链表到实现

    LinkedList是Java中常用的数据结构之一,实现了链表的特性,支持快速添加、删除元素,可以用于实现队列、栈、双向队列等数据结构。LinkedList的内部实现采用了双向链表,其中每个节点都包含前驱节点和后继节点的引用,可以直接访问链表的头尾元素
    2023-04-04
  • Java实现Word转PDF的全过程

    Java实现Word转PDF的全过程

    在IT领域,文档格式转换是常见的任务之一,特别是在管理大量文本数据时,本文将详细探讨如何利用Java技术将Word文档(.docx)转换成PDF格式,需要的朋友可以参考下
    2025-04-04

最新评论