三款网页端应用语音工具评测：语音合成与长文本朗读优化

网页端应用同传工具深度评测：语音合成与长文本播放优化

之前的文章网页端应用同传插件接入实战：语音识别功能完整实现指南介绍如何使用同传插件完成语音识别，本次评测则聚焦三款网页端应用语音工具的语音合成核心功能。

功能概述

三款网页端应用语音工具（铭文配音、小豆-语音转文字、小豆配音）的语音合成（TTS）功能均可将文字内容转化为语音播放，适配内容朗读、语音提醒、无障碍阅读等多种实用场景。

核心实现架构

状态管理

三款工具统一采用三级状态机制控制播放流程：

const speechContent = ref("") const speechStatus = ref(0) // 0 未播放 1 合成中 2 正在播放

核心功能实现

语音合成触发逻辑

`function startSpeech(speechText = "") { // 若当前正在播放，先中断 uni.$emit("STOPAUDIOPLAY") speechStatus.value = 1 uni.showLoading({ title: "语音生成中...", mask: true, }) // 处理待合成文本 if(speechText.length) { speechContent.value = speechText } // 分段处理长文本（网页端应用接口单次最多支持200字） let currentPart = speechContent.value.slice(0, 200) speechContent.value = speechContent.value.slice(200) if(!

currentPart) { uni.hideLoading() return } // 调用合成接口 plugin.generateSpeech({ lang: "zh_CN", audioType: "mp3", content: currentPart, success: (res) => { handlePlaySuccess(res) }, fail: (res) => { handlePlayFail(res) } }) }

播放成功处理

`function handlePlaySuccess(res) { uni.hideLoading() // 创建音频上下文 playContext = uni.createInnerAudioContext() playContext.src = res.audioUrl playContext.play() speechStatus.value = 2 // 播放结束自动接续下一段 playContext.onEnded(() => { playContext = null speechStatus.value = 0 startSpeech() // 递归播放剩余文本 }) setupPlayControl() }

音频控制管理

`function setupPlayControl() { uni.$off("STOPAUDIOPLAY") uni.$on("STOPAUDIOPLAY", (pauseFlag) => { speechStatus.value = 0 if(pauseFlag) { playContext?.pause() } else { playContext?.stop() playContext = null speechContent.value = "" } }) }

异常处理

`function handlePlayFail(res) { speechStatus.value = 0 uni.hideLoading() showToast("暂不支持当前文字合成") console.log("语音合成失败", res) }

关键技术点

长文本分段播放

受限于网页端应用接口的单次调用字数上限，需实现自动分段机制，将长文本切割为200字以内的片段依次合成：

let currentPart = speechContent.value.slice(0, 200) speechContent.value = speechContent.value.slice(200)

播放状态精准管控

通过状态值实现对播放全流程的精细化控制：

• 0：未激活状态，可发起新的合成请求
• 1：合成中状态，展示加载提示
• 2：播放中状态，支持暂停/停止操作

自动连续播放

基于递归逻辑实现长文本的无缝播放，无需人工干预即可完成全部内容的合成与播放：

playContext.onEnded(() => { startSpeech() // 播放结束自动启动下一段合成 })}