【web音频学习（六）】科大讯飞Web端语音识别

用泥种荷花
321 阅读5分钟

基于讯飞在线语音合成 API 的浏览器端文本转语音解决方案

✨ 特性

  • 🎯 流式合成：支持实时文本转语音，边输入边播放
  • 🔧 灵活配置：丰富的音色、语速、音调等参数配置
  • 🚀 高性能：采用串行处理器架构，优化音频处理流程
  • 📱 跨平台：支持现代浏览器环境
  • 🎛️ 事件驱动：完整的生命周期事件回调
  • 🔇 音量控制：支持静音/取消静音功能
  • 🔗 链式调用：支持方法链式调用，代码更简洁
  • 🛡️ TypeScript：完整的 TypeScript 类型定义

📦 安装

# 使用 pnpm
pnpm install xunfei-tts

# 使用 npm
npm install xunfei-tts

# 使用 yarn
yarn add xunfei-tts

🚀 快速开始

1. 引入库

import xunfeiTts from 'xunfei-tts'

2. 配置系统参数

首先需要在讯飞开放平台申请相关密钥：

// 配置系统参数
xunfeiTts.config({
  API_SECRET: 'your_api_secret', // 在平台申请的密钥信息
  APPID: 'your_appid', // 在平台申请的APPID信息
  API_KEY: 'your_api_key', // 在平台申请的API_KEY信息
})

3. 创建 TTS 实例

const ttsInstance = xunfeiTts.create({
  vcn: 'xiaoyan', // 音色
})

4. 使用 TTS 功能

// 启动TTS服务
ttsInstance.start()

// 发送文本进行语音合成
ttsInstance.send('你好，欢迎使用讯飞语音合成服务！')

// 结束文本输入（但继续播放剩余音频）
ttsInstance.end()

📖 API 文档

全局方法

xunfeiTts.config(systemConfig)

配置系统参数，必须在创建实例前调用。

参数：

  • systemConfig (SystemConfig): 系统配置对象

SystemConfig 接口：

interface SystemConfig {
  API_SECRET: string  // 在平台申请的密钥信息
  APPID: string       // 在平台申请的APPID信息
  API_KEY: string     // 在平台申请的API_KEY信息
}

示例：

xunfeiTts.config({
  API_SECRET: 'your_api_secret',
  APPID: 'your_appid',
  API_KEY: 'your_api_key'
})

xunfeiTts.create(businessParams?)

创建 TTS 控制器实例。

参数：

  • businessParams (Partial, 可选): 业务参数配置

返回值：

  • TtsController: TTS 控制器实例

示例：

const ttsInstance = xunfeiTts.create({
  vcn: 'xiaoyan',
  speed: 60,
  volume: 80
})

TtsController 实例方法

控制方法

start()

启动 TTS 服务，进入待机状态等待文本输入。

返回值： TtsController - 支持链式调用

示例：

ttsInstance.start()
send(text)

发送文本进行语音合成。

参数：

  • text (string): 待转换的文本

返回值： TtsController - 支持链式调用

示例：

ttsInstance.send('你好，世界！')
end()

结束文本输入，但不停止音频播放。已发送的文本会继续播放完毕。

返回值： TtsController - 支持链式调用

示例：

ttsInstance.end()
finish()

立即停止所有处理器并重置状态，触发 appFinish 事件。

示例：

ttsInstance.finish()

音频控制方法

mute()

静音当前播放的音频。

示例：

ttsInstance.mute()
unmute()

取消静音，恢复音频播放。

示例：

ttsInstance.unmute()

事件监听方法

on(eventName, callback)

监听指定事件。

参数：

  • eventName (string): 事件名称
  • callback (function): 回调函数

返回值： TtsController - 支持链式调用

支持的事件：

  • audioFirstStart: 音频首次开始播放时触发
  • appFinish: 应用销毁时触发

示例：

ttsInstance
  .on('audioFirstStart', () => {
    console.log('音频开始播放')
  })
  .on('appFinish', () => {
    console.log('TTS应用已销毁')
  })

🎛️ 配置参数

SystemConfig 系统配置

参数类型必填说明
API_SECRETstring✅在讯飞开放平台申请的密钥信息
APPIDstring✅在讯飞开放平台申请的APPID信息
API_KEYstring✅在讯飞开放平台申请的API_KEY信息

BusinessParams 业务参数

参数类型默认值必填说明
auestring'raw'❌音频编码格式，推荐使用 raw
sflnumber1❌流式返回开关，固定为 1
aufstring'audio/L16;rate=16000'❌音频采样率
vcnstring'xiaoyan'✅发音人，必填参数
speednumber50❌语速，范围 0-100
volumenumber50❌音量，范围 0-100
pitchnumber50❌音高，范围 0-100
bgsnumber0❌背景音，0=无背景音，1=有背景音
ttestring'UTF8'❌文本编码格式
regstring'2'❌英文发音方式，0=字母，1=单词，2=自动判断
rdnstring'0'❌数字发音方式，0=自动判断，1=完全数值，2=完全字符串，3=字符串优先

🎪 事件系统

事件列表

audioFirstStart

音频首次开始播放时触发。

回调参数： 无

触发时机： 当音频开始播放时

示例：

ttsInstance.on('audioFirstStart', () => {
  console.log('音频开始播放')
  // 可以在这里更新UI状态
})

appFinish

应用销毁时触发，通常在调用 finish() 方法后触发。

回调参数： 无

触发时机： 当TTS服务完全停止时

示例：

ttsInstance.on('appFinish', () => {
  console.log('TTS应用已销毁')
  // 可以在这里进行清理工作
})

💡 使用示例

基础用法

import xunfeiTts from 'xunfei-tts'

// 配置系统参数
xunfeiTts.config({
  APPID: 'your_appid',
  API_SECRET: 'your_api_secret',
  API_KEY: 'your_api_key'
})

const playBtn = document.createElement('button')
playBtn.textContent = '播放'

document.body.appendChild(playBtn)

playBtn.addEventListener('click', () => {
  // 创建实例
  const ttsInstance = xunfeiTts.create()

  // 监听事件
  ttsInstance
    .on('audioFirstStart', () => {
      console.log('开始播放音频')
    })
    .on('appFinish', () => {
      console.log('TTS服务已结束')
    })

  // 启动并发送文本
  ttsInstance.start()
  ttsInstance.send('你好，世界！')
  ttsInstance.end()
})

高级用法 - 流式文本输入

import xunfeiTts from 'xunfei-tts'

// 配置系统参数
xunfeiTts.config({
  APPID: 'your_appid',
  API_SECRET: 'your_api_secret',
  API_KEY: 'your_api_key'
})

// 创建播放按钮
const streamPlayBtn = document.createElement('button')
streamPlayBtn.textContent = '开始流式播放'

document.body.appendChild(streamPlayBtn)

streamPlayBtn.addEventListener('click', () => {
  const ttsInstance = xunfeiTts.create({
    vcn: 'aisjiuxu', // 使用不同的音色
    speed: 60, // 稍快的语速
    volume: 80, // 较大的音量
  })

  // 监听事件
  ttsInstance
    .on('audioFirstStart', () => {
      console.log('流式播放开始')
      streamPlayBtn.textContent = '播放中...'
      streamPlayBtn.disabled = true
    })
    .on('appFinish', () => {
      console.log('流式播放结束')
      streamPlayBtn.textContent = '开始流式播放'
      streamPlayBtn.disabled = false
    })

  ttsInstance.start()

  const textArray = [
    '欢迎使用讯飞语音合成服务。',
    '这是一个功能强大的文本转语音解决方案。',
    '支持多种音色和丰富的参数配置。',
    '感谢您的使用！',
  ]

  let index = 0
  const timer = setInterval(() => {
    if (index < textArray.length) {
      ttsInstance.send(textArray[index])
      index++
    }
    else {
      ttsInstance.end()
      clearInterval(timer)
    }
  }, 1000)
})

音量控制示例

import xunfeiTts from 'xunfei-tts'

// 配置系统参数
xunfeiTts.config({
  APPID: 'your_appid',
  API_SECRET: 'your_api_secret',
  API_KEY: 'your_api_key'
})

let ttsInstance = null

// 创建播放按钮
const playBtn = document.createElement('button')
playBtn.textContent = '播放音频'

// 创建控制按钮
const muteBtn = document.createElement('button')
const unmuteBtn = document.createElement('button')
const stopBtn = document.createElement('button')

muteBtn.textContent = '静音'
unmuteBtn.textContent = '取消静音'
stopBtn.textContent = '停止'

// 初始状态下禁用控制按钮
muteBtn.disabled = true
unmuteBtn.disabled = true
stopBtn.disabled = true

// 添加按钮到页面
document.body.append(playBtn, muteBtn, unmuteBtn, stopBtn)

// 播放按钮事件
playBtn.addEventListener('click', () => {
  ttsInstance = xunfeiTts.create()

  // 监听事件
  ttsInstance
    .on('audioFirstStart', () => {
      console.log('音频开始播放')
      playBtn.textContent = '播放中...'
      playBtn.disabled = true
      muteBtn.disabled = false
      unmuteBtn.disabled = false
      stopBtn.disabled = false
    })
    .on('appFinish', () => {
      console.log('音频播放结束')
      playBtn.textContent = '播放音频'
      playBtn.disabled = false
      muteBtn.disabled = true
      unmuteBtn.disabled = true
      stopBtn.disabled = true
    })

  // 开始播放
  ttsInstance.start()
  ttsInstance.send('这是一段测试音频，您可以控制播放状态。您可以尝试静音、取消静音或停止播放功能。')
  ttsInstance.end()
})

// 控制按钮事件
muteBtn.addEventListener('click', () => {
  if (ttsInstance) {
    ttsInstance.mute()
    console.log('已静音')
  }
})

unmuteBtn.addEventListener('click', () => {
  if (ttsInstance) {
    ttsInstance.unmute()
    console.log('已取消静音')
  }
})

stopBtn.addEventListener('click', () => {
  if (ttsInstance) {
    ttsInstance.finish()
    console.log('已停止播放')
  }
})

📄 许可证

ISC License

avatar
文章
阅读
粉丝