3分钟实现：浏览器处理后端“SSE”分段流式长文本“语音合成”

项目地址

安装

使用 pnpm 进行安装

bash 复制代码

pnpm install xunfei-tts

使用

引入库

在项目中引入库

javascript 复制代码

import xunfeiTts from 'xunfei-tts'

配置系统参数

这些参数可在讯飞开放平台申请获取

在线语音合成API文档

javascript 复制代码

/**
 * 平台系统配置
 */
const systemConfig = {
  // 在平台申请的密钥信息
  API_SECRET: 'your_api_secret',
  // 在平台申请的APPID信息
  APPID: 'your_appid',
  // 在平台申请的API_KEY信息
  API_KEY: 'your_api_key'
}

// 配置系统参数
xunfeiTts.config(systemConfig)

创建应用实例

详细配置可参考讯飞TTS文档

javascript 复制代码

/**
 * 业务参数
 */
const ttsOptions = {
// 音色
  vcn: 'xiaoyan',
}

// 创建mtTts应用实例
const ttsInstance = xunfeiTts.create(ttsOptions)

可用方法

激活应用

可以发送文本进行语音播放

javascript 复制代码

ttsInstance.start()

发送文本

javascript 复制代码

ttsInstance.send('你好呀。')

结束应用

通知应用发送文本已经结束，但是不会销毁应用，剩余的文本将会继续播放。

javascript 复制代码

ttsInstance.end()

销毁应用

应用播放结束，应用将会被销毁。剩余的文本将会停止播放。

javascript 复制代码

ttsInstance.finish()

调整音量

javascript 复制代码

// 静音
ttsInstance.setVolume(0)
// 恢复音量
ttsInstance.setVolume(1)

应用钩子

`audioFirstStart`

javascript 复制代码

ttsInstance.on('audioFirstStart', () => {
  console.log('音频首次播放')
})

`appFinish`

javascript 复制代码

ttsInstance.on('appFinish', () => {
  console.log('应用已销毁')
})

示例代码

javascript 复制代码

import xunfeiTts from 'xunfei-tts'

xunfeiTts.config({
  APPID: '****',
  API_SECRET: '****',
  API_KEY: '****',
})

const ttsInstance = xunfeiTts.create()

ttsInstance
  .on('appFinish', () => {
    console.log('appFinish')
  })
  .on('audioFirstStart', () => {
    console.log('audioFirstStart')
  })

const zzButton = document.createElement('button')
zzButton.textContent = '终止'
const jxButton = document.createElement('button')
jxButton.textContent = '继续'

let timer = null
zzButton.onclick = () => {
  ttsInstance.finish()
  clearTimeout(timer)
}

jxButton.onclick = () => {
  clearTimeout(timer)

  const arrText = [
    `你要抱`,
    `抱我吗？`,
    `我好`,
    `喜欢你呀！`,
  ]
  ttsInstance.start()

  let index = 0

  timer = setInterval(() => {
    ttsInstance.send(arrText[index])
    index += 1
    if (index === arrText.length) {
      ttsInstance.end()
      clearInterval(timer)
    }
  }, 500)
}

document.body.appendChild(jxButton)
document.body.appendChild(zzButton)