使用百度语音技术实现文字转语音

使用百度语音技术实现文字转语音

SpringBoot+Vue前后端分离项目

调用api接口需要使用AK和SK生成AccessToken,生成getAccessToken的接口有跨域限制,所以统一的由后端处理了

部分参数在控制台->语音技术->在线调试里面能找到

Controller

@RestController
@RequestMapping("/tts")
public class BaiDuTTSController {


    @PostMapping("/baidu/{infoId}")
    public ResponseEntity<byte[]> info2Audio(@PathVariable("infoId") String infoId, HttpServletResponse response){
        // todo 通过infoId查询待转换的文字,字数小于60和大于60时使用的方法不一样,这里还没优化
        String text = "你好百度";

        byte[] audioBytes = new byte[0];
        try {
            audioBytes = getAudioFromService(text);
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (audioBytes != null) {
            return ResponseEntity
                    .ok()
                    .contentType(MediaType.valueOf("audio/wav")) // 或者是audio/wav等,根据你的音频格式
                    .body(audioBytes);
        } else {
            // 返回错误响应
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }

    // 获取响应字节
    public  byte[] getAudioFromService( String text)throws Exception{
        String url = "https://tsn.baidu.com/text2audio";
        String requestBody = "tex=" + text + "&tok=" + getAccessToken() + "&cuid=这里要替换=5&pit=5&vol=5&per=1&aue=3";
        HttpResponse response = HttpRequest.post(url)
                .contentType("application/x-www-form-urlencoded")
                .body(requestBody)
                .header("Accept", "*/*")
                .execute();
        // 处理响应
        if (response.isOk()) {
           return response.bodyBytes();
        }
        throw new RuntimeException("获取音频错误,请联系管理员");

    }




    /**
     * 从用户的AK,SK生成鉴权签名(Access Token)
     *
     * @return 鉴权签名(Access Token)
     * @throws IOException IO异常
     */
    static String getAccessToken() throws IOException {
        String AK = "你的AK";
        String SK = "你的SK";
        String url = "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=" + AK + "&client_secret=" + SK;
        String postResult = HttpUtil.post(url, "");
        if (StrUtil.isBlank(postResult)){
            throw new RuntimeException("响应体为空");
        }
        JSONObject jsonObject = JSONUtil.parseObj(postResult);
        String accessToken = jsonObject.getStr("access_token");
        if (StrUtil.isBlank(accessToken)){
            throw new RuntimeException("accessToken为空");
        }
        return accessToken;
    }

}

VUE

// 音频展示   
<el-col :span="8">
        <audio :src="audioSrc" v-if="audioSrc" controls>
          您的浏览器不支持音频播放。
        </audio>
</el-col>
// methods
    // 语音播报的函数
    handleSpeak(id) {
    baiduTTS(id).then(res =>{
      console.log(res.headers)
      console.log(res)
        // 这里注意是res还是res.data,看你后台怎么封装的
      this.audioSrc   = URL.createObjectURL(new Blob([res],{type:"audio/wav"}));
    })
 },
// 发送请求的js
import request from '@/utils/request'

export async function baiduTTS(id) {
  return request({
    url: '/tts/baidu/' + id,
    method: 'post',
    responseType: "blob"
  })
}

参考

前端使用百度 TTS(语音合成)非常详细 - 掘金 (juejin.cn)

image-20240304164623514

ChatGPT:

image-20240304170256340

问题

this.audioSrc   = URL.createObjectURL(new Blob([res],{type:"audio/wav"}));

这一行代码出错(准确的是URL.createObjectURL)

安装/升级下core-js解决(yarn add core-js)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/843073.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ | Leetcode C++题解之第268题丢失的数字

题目&#xff1a; 题解&#xff1a; class Solution { public:int missingNumber(vector<int>& nums) {int n nums.size();int total n * (n 1) / 2;int arrSum 0;for (int i 0; i < n; i) {arrSum nums[i];}return total - arrSum;} };

探索 Framer Motion 高级动画技巧:提升前端设计水平

在现代的网页和应用设计中&#xff0c;动画不仅仅是视觉的点缀&#xff0c;更是用户体验的重要组成部分。它能够使界面更具吸引力&#xff0c;提升交互的流畅性&#xff0c;甚至在不经意间传达品牌的个性和态度。然而&#xff0c;要创造出令人惊叹的动效并不容易——直到有了 F…

Edge侧边栏copilot消失

Edge侧边栏copilot消失 当前环境 自己ip问题已解决&#xff0c;edge中已登录账号&#xff0c;地区已设置为美国&#xff0c;语言已设置为英文。具体可以通过空白页右上角的setting验证 解决方案 首先&#xff0c;打开“任务管理器”&#xff0c;在其中找到 Microsoft Edge…

【SASS/SCSS(三)】样式的复用与动态计算(@mixin和@function)

目录 一、mixin 1、定义复用的样式代码&#xff0c;接受传参&#xff0c;搭配include使用。 位置传参 关键词传参 ...语法糖接受传入的任意参数 2、在mixin中使用content&#xff0c;获取外部对mixin的追加内容 二、function 三、字符串——值得注意的点 很多时候&#…

[Doris]阿里云搭建Doris,测试环境1FE 1BE

首先&#xff1a;阿里云的国内服务器千万不要用容器搭建&#xff0c;或者自己Dockfile构建镜像。两种方式都不得行&#xff0c;压根拉不到github的镜像&#xff0c;开了镜像加速器也拉不到&#xff0c;不要折腾了&#xff0c;极其愚蠢。 背景&#xff1a;现在测试环境&#xff…

算法力扣刷题记录 五十六【501.二叉搜索树中的众数】

前言 二叉搜索树操作&#xff0c;继续。 记录 五十六【501.二叉搜索树中的众数】 一、题目阅读 给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;…

【BUG】已解决:zipfile.BadZipFile: File is not a zip file

已解决&#xff1a;zipfile.BadZipFile: File is not a zip file 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉城市开发…

IAR环境下STM32+IAP方案的实现

--基于STM32F103ZET6的UART通讯实现 一、什么是IAP&#xff0c;为什么要IAP IAP即为In Application Programming(在应用中编程)&#xff0c;一般情况下&#xff0c;以STM32F10x系列芯片为主控制器的设备在出厂时就已经使用J-Link仿真器将应用代码烧录了&#xff0c;如果在设备使…

Day16_集合与迭代器

Day16-集合 Day16 集合与迭代器1.1 集合的概念 集合继承图1.2 Collection接口1、添加元素2、删除元素3、查询与获取元素不过当我们实际使用都是使用的他的子类Arraylist&#xff01;&#xff01;&#xff01; 1.3 API演示1、演示添加2、演示删除3、演示查询与获取元素 2 Iterat…

ros笔记03--从零体验ros2话题通信方式

ros笔记03--从零体验ros2话题通信方式 介绍创建步骤体验官方 talker listener 案例基于python开发发布订阅案例 注意事项说明 介绍 主题是 ros2 提供的三种主要接口方式之一&#xff0c;它通常被用于连续的数据流&#xff0c;如传感器数据、机器人状态等。 ros2 是一个强类型的…

Artix7系列FPGA实现SDI视频编解码+UDP以太网传输,基于GTP高速接口,提供工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本博已有的以太网方案本博已有的FPGA图像缩放方案本方案的缩放应用本方案在Xilinx--Kintex系列FPGA上的应用本方案在Xilinx--Zynq系列FPGA上的应用 3、详细设计方案设计原理框图SDI 输入设备Gv8601a 均衡…

SAP Fiori 实战课程(二):新建页面

课程回顾 上一课中,利用Visual studio Code 新建、并运行了一个Demo工程。可以实现对项目的启动,启动后进入一个List清单。 那么本次课程的目前就是在上一节Demo的基础上,从零开始新建一个完整的页面。实现从首页清单,选择行后,鼠标点击,进入下一个页面。 准备工作 在开…

【20】读感 - 架构整洁之道(二)

概述 继上一篇文章讲了前两章的读感&#xff0c;已经归纳总结的重点&#xff0c;这章会继续跟进的看一下&#xff0c;深挖架构整洁之道。 编程范式 编程范式从早期到至今&#xff0c;提过哪些编程范式&#xff0c;结构化编程&#xff0c;面向对象编程&#xff0c;函数式编程…

想要获客如有神助攻,宝藏工具必不可少!

现如今&#xff0c;客户资源的收集和管理成为了一个让很多人都为之烦恼的问题。 然而&#xff0c;随着科技的进步&#xff0c;市场上出现了许多高效的宝藏工具&#xff0c;可以帮助你轻松解决这些问题&#xff0c;让获客如有神助攻&#xff01; 1、丰富的客户来源 无论是附近…

TypeScript体操(二):Utility Type手写实现

目录 前言常用 Utility Types 及其实现Partial<T>Required<T>Readonly<T>Pick<T, K>Omit<T, K>Record<K, T>Exclude<T, U>Extract<T, U>NonNullable<T>ReturnType<T>InstanceType<T>Parameters<T>Con…

synergy配置

今天介绍一个电脑同步软件synergy。 我们开发时一般会用两套设备&#xff0c;如果使用两套键盘操作起来会很麻烦&#xff0c;这个软件就是解决这个问题&#xff0c;可以使用一套键盘同时操作两台电脑&#xff0c;另一台作为客户端被控制。 安装 在两台电脑上各自下载安装syne…

沃文特过会两年仍在注册:营收净利润下滑,三次抽查不合格

《港湾商业观察》施子夫 王璐 在当前IPO严查之际&#xff0c;部分企业的上市进程可谓相当漫长&#xff0c;四川沃文特生物工程股份有限公司&#xff08;以下简称&#xff0c;沃文特&#xff09;就是其中之一。 不过&#xff0c;最近的好消息是&#xff0c;沃文特又更新了招股…

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker)

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker) 本文档详细介绍了在 Ubuntu Server 22.04 上使用 Docker 安装和配置 NVIDIA Container Toolkit 的过程。 概述 NVIDIA 容器工具包使用户能够构建和运行 GPU 加速容器。即可以在容器中使用NVIDIA显卡。 架构图如…

【BUG】已解决:TypeError: Descriptors cannot not be created directly.

已解决&#xff1a;TypeError: Descriptors cannot not be created directly. 目录 已解决&#xff1a;TypeError: Descriptors cannot not be created directly. 【常见模块错误】 【错误原因】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来…

谷粒商城实战笔记-46-商品服务-API-三级分类-配置网关路由与路径重写

文章目录 一&#xff0c;准备工作1&#xff0c;新增一级菜单2&#xff0c;新增二级菜单 二&#xff0c;前端树形界面开发1&#xff0c;开发分类展示组件 本节的主要内容&#xff1a; 前端调用三级分类接口&#xff0c;并树形展示 一&#xff0c;准备工作 启动product服务启动…