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

项目地址

npm地址 码云地址

安装

使用 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)
相关推荐
用户21411832636024 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
大模型真好玩18 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫42 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler2811 小时前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端