登录微信小程序同声传译插件深度应用：语音合成与长文本播放优化
之前的文章 微信小程序同声传译插件接入实战：语音识别功能完整实现指南介绍如何使用同声传译插件进行语音识别，这篇将会讲述同声传译的另一个功能语音合成。
功能概述
微信小程序同声传译插件的语音合成（TTS）功能能将文字内容转换为语音播放，适用于内容朗读、语音提醒、无障碍阅读等场景。
核心实现架构
状态管理
const textToSpeechContent = ref("")
const textToSpeechStatus = ref(0) // 0 未播放 1 合成中 2 正在播放
核心功能实现
语音合成主函数
function onTextToSpeech(text = "") {
// 如果正在播放，先停止
if(textToSpeechStatus.value > 0) {
uni.$emit("STOP_INNER_AUDIO_CONTEXT")
}
textToSpeechStatus.value = 1
uni.showLoading({
title: "语音合成中...",
mask: true,
})
// 处理文本内容
if(text.length) {
textToSpeechContent.value = text
}
// 分段处理长文本（微信限制每次最多200字）
let content = textToSpeechContent.value.slice(0, 200)
textToSpeechContent.value = textToSpeechContent.value.slice(200)
if(!content) {
uni.hideLoading()
return
}
// 调用合成接口
plugin.textToSpeech({
lang: "zh_CN",
tts: true,
content: content,
success: (res) => {
handleSpeechSuccess(res)
},
fail: (res) => {
handleSpeechFail(res)
}
})
}
合成成功处理
function handleSpeechSuccess(res) {
uni.hideLoading()
// 创建音频上下文
innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.src = res.filename
innerAudioContext.play()
textToSpeechStatus.value = 2
// 播放结束自动播下一段
innerAudioContext.onEnded(() => {
innerAudioContext = null
textToSpeechStatus.value = 0
onTextToSpeech() // 递归播放剩余内容
})
setupAudioControl()
}
音频控制管理
function setupAudioControl() {
uni.$off("STOP_INNER_AUDIO_CONTEXT")
uni.$on("STOP_INNER_AUDIO_CONTEXT", (pause) => {
textToSpeechStatus.value = 0
if(pause) {
innerAudioContext?.pause()
} else {
innerAudioContext?.stop()
innerAudioContext = null
textToSpeechContent.value = ""
}
})
}
错误处理
function handleSpeechFail(res) {
textToSpeechStatus.value = 0
uni.hideLoading()
toast("不支持合成的文字")
console.log("fail tts", res)
}
关键技术点
1. 长文本分段处理
由于微信接口限制，单次合成最多200字，需要实现自动分段：
let content = textToSpeechContent.value.slice(0, 200)
textToSpeechContent.value = textToSpeechContent.value.slice(200)
2. 播放状态管理
通过状态值精确控制播放流程：
-
0：未播放，可以开始新的合成 -
1：合成中，显示loading状态 -
2：播放中，可以暂停或停止
3. 自动连续播放
利用递归实现长文本的自动连续播放：
innerAudioContext.onEnded(() => {
onTextToSpeech() // 播放结束继续合成下一段
})
完整代码
export function useTextToSpeech() {
const plugin = requirePlugin('WechatSI')
let innerAudioContext = null
const textToSpeechContent = ref("")
const textToSpeechStatus = ref(0)
function onTextToSpeech(text = "") {
if(textToSpeechStatus.value > 0) {
uni.$emit("STOP_INNER_AUDIO_CONTEXT")
}
textToSpeechStatus.value = 1
uni.showLoading({
title: "语音合成中...",
mask: true,
})
if(text.length) {
textToSpeechContent.value = text
}
let content = textToSpeechContent.value.slice(0, 200)
textToSpeechContent.value = textToSpeechContent.value.slice(200)
if(!content) {
uni.hideLoading()
return
}
plugin.textToSpeech({
lang: "zh_CN",
tts: true,
content: content,
success: (res) => {
uni.hideLoading()
innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.src = res.filename
innerAudioContext.play()
textToSpeechStatus.value = 2
innerAudioContext.onEnded(() => {
innerAudioContext = null
textToSpeechStatus.value = 0
onTextToSpeech()
})
uni.$off("STOP_INNER_AUDIO_CONTEXT")
uni.$on("STOP_INNER_AUDIO_CONTEXT", (pause) => {
textToSpeechStatus.value = 0
if(pause) {
innerAudioContext?.pause()
} else {
innerAudioContext?.stop()
innerAudioContext = null
textToSpeechContent.value = ""
}
})
},
fail: (res) => {
textToSpeechStatus.value = 0
uni.hideLoading()
toast("不支持合成的文字")
console.log("fail tts", res)
}
})
}
return {
onTextToSpeech,
textToSpeechContent,
textToSpeechStatus
}
}
