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

（一）引言

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

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

（二）准备工作

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

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

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

（4） 操作过程

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

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

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

（三）代码阶段

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

在开始之前，请确保你已经注册了百度智能云账号，并根据以上步骤获取到了相应的 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">获取AccessTokenel-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>

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

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

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

步骤四：运行代码

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

npm run dev

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

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

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

（五）文章小结

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

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