百度语音合成：开启智能语音交互新时代

Estrella16
1,082 阅读5分钟

百度语音合成技术揭秘（Vue）

（一）引言

书接上文，在上一篇文章中，我们调用了 Web Speech 的 API 接口，实现了简单的语音合成功能，今天我们继续对语音合成内容的讲解，在这篇文章中我将带着大家调用 百度智能云 的 API 接口。

百度 AI 语音合成简介：基于业内领先的深度学习技术，提供高度拟人、流畅自然的语音合成服务，支持在线、离线多种调用方式，满足泛阅读、订单播报、智能硬件等场景的语音播报需求。

（二）准备工作

（1） 打开百度云网站，点击右上角控制台（需要先登录百度账号！）

image.png

（2） 第一步点击左上角小方块，第二步点击语音技术功能。

image.png

（3） 按照提示步骤一步一步操作

image.png

（4） 操作过程

根据提示领取自己需要的免费资源：

image.png

根据需要和已领取的免费资源，创建自己的应用接口：

image.png

最后根据以下操作，跳转到示例代码中心页面，通过教学视频进行操作，同时，官方也提供了示例代码，可以进行参考。

image.png

image.png

（三）代码阶段

步骤一：安装依赖，配置环境

在开始之前，请确保你已经注册了百度智能云账号，并根据以上步骤获取到了相应的 API 密钥。此外，还需要安装必要的 npm 包，如axios用于 HTTP 请求，qs用于构建查询字符串等。我执行了以下几个命令用于依赖的安装：

npm i
npm install axios
npm install qs

并找到 vite.config.js 文件，进行以下的配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue()
  ],
  server: {
    proxy: {
      '/oauth': 'https://aip.baidubce.com',
      '/text2audio': 'https://tsn.baidu.com',
      '/server_api': 'http://vop.baidu.com'
    }
  }
})

步骤二：编写样式（HTML 和 CSS 部分）

接下来，我提供一段简单的 HTML 和 Style 代码，以便内容效果的展示：

<template>
  <div class="app">
    <div class="get_tts_token">
      <h1>
        1.请输入你语音合成应用的client_id和client_secret获取access_token
      </h1>
      <el-row :gutter="50">
        <el-col :span="8">
          <el-input v-model.trim="client_id" placeholder="请输入你的client_id(应用的API Key)" />
        </el-col>
        <el-col :span="8">
        </el-col>
        <el-col :span="8"><el-button @click="handleGetAccessToken">获取AccessToken</el-button></el-col>
      </el-row>
    </div>

    <hr />

    <div class="text2audio">
      <h1>2.语音合成</h1>
      <el-radio-group v-model="per">
        <el-radio-button label="1">度小宇</el-radio-button>
        <el-radio-button label="0">度小美</el-radio-button>
        <el-radio-button label="3">度逍遥（基础）</el-radio-button>
        <el-radio-button label="4">度丫丫</el-radio-button>
      </el-radio-group>
      <el-row :gutter="50">
        <el-col :span="8">
          <el-input v-model.trim="inputText" placeholder="请输入你要转化的文本" />
        </el-col>
        <el-col :span="2"><el-button @click="handleTextToAudio">语音合成</el-button></el-col>
        <el-col :span="8">
          <audio :src="audioSrc" v-if="audioSrc" controls>
            您的浏览器不支持音频播放。
          </audio>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.app {
  width: 80%;
  margin: auto;
  margin-top: 50px;
}

hr {
  margin: 30px 0;
}

h1 {
  margin: 10px 0;
}

:deep(.el-radio-group) {
  margin-bottom: 30px;
}
</style>

以下图片是代码的样式效果：

image.png

步骤三：核心代码（JS 部分）

大家可以根据自己的需求，对以下代码进行更改，以满足自己的需要的功能。

<script setup>
import { reactive, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage, ElMessageBox } from "element-plus";
import { HZRecorder } from "./utils/recorder";

// 提示
const openMsg = (message, type) => {
  ElMessage({
    message,
    type,
  });
};

// 1.获取AccessToken
// client_id是你创建的应用的API Key，client_secret是你创建应用的Secret Key
const client_id = ref("");
const client_secret = ref("");

const handleGetAccessToken = async () => {
  try {
    const option = {
      grant_type: "client_credentials",
      client_id: client_id.value,
      client_secret: client_secret.value,
    };
    const res = await axios.post("/oauth/2.0/token", qs.stringify(option));
    if (res.status !== 200) {
      return openMsg(res.statusText, "warning");
    }
    openMsg("获取token成功", "success");
    localStorage.setItem("access_token", res.data.access_token);
    client_id.value = "";
    client_secret.value = "";
  } catch (error) {
    console.log(error);
  }
};

// 2.语音合成接口调用
// per配音角色
const per = ref("1");
// 输入的文本
const inputText = ref("");
// 动态绑定audio的src属性
const audioSrc = ref("");

const handleTextToAudio = async () => {
  const token = localStorage.getItem("access_token");
  if (!token) {
    return openMsg("请先获取token！", "warning");
  }
  textToAudio(token);
};
const textToAudio = async (token) => {
  const option = {
    tex: inputText.value,
    tok: token,
    cuid: `${Math.floor(Math.random() * 1000000)}`,
    ctp: "1",
    lan: "zh",
    per: per.value,
  };
  const res = await axios.post("/text2audio", qs.stringify(option), {
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    responseType: "blob",
  });
  if (res.status !== 200) {
    return openMsg(res.statusText, "warning");
  }
  openMsg("语音合成成功", "success");
  audioSrc.value = URL.createObjectURL(res.data);
};
</script>

步骤四：运行代码

确保你已经在百度智能云平台上获取了必要的API Key和Secret Key。然后，运行脚本：

npm run dev

运行后，即可如下图，在页面成功进行语音合成的功能，输入获取到的API Key和Secret Key，得到Access_token，看到页面提示 “获取token成功” ，即可输入要合成的文本内容，进行语音转换，语音合成成功页面则会提示 “语音合成成功”，合成后的语音可以调整语音声音大小和语速，还可以下载该合成的语音。

image.png

（四）总结

（1）API 接口功能
  1. 支持中文普通话、简单中英文混读
  2. 支持 mp3-16k、mp3-48k、wav、pcm-8k、pcm-16k 等多种音频格式和采样率
  3. 支持自定义语速、语调、音量调节
  4. 支持多音字标注发音，格式如：重(chong2)报集团。
  5. 支持文本分段，段落间增加1s停顿
  6. 支持主动查询、自动回调两种方式获取结果
（2）应用场景

语音合成技术可以应用于多种场景，例如：

  • 教育领域：制作有声读物、在线课程讲解等。
  • 智能家居：与智能家居设备结合，实现语音助手的功能。
  • 移动应用：开发具备语音反馈功能的应用程序。
  • 辅助功能：为视力障碍用户提供语音阅读服务。

（五）文章小结

通过本文的介绍，你已经了解了如何使用百度语音能力引擎中的语音合成功能。随着技术的进步，语音合成的质量越来越高，应用场景也越来越丰富。无论是开发者还是企业，都可以利用这项技术创造出更多有价值的产品和服务。希望这篇文章能激发你的灵感，探索语音合成技术的无限可能！

如果你对语音合成技术感兴趣，不妨尝试使用上述示例代码，并在此基础上进行扩展和创新。未来，语音合成技术将会更加成熟，为我们的生活带来更多便利。

avatar
文章
阅读
粉丝