Tui Plus Vapor

Appearance

TTS 语音播报 ​

文字转语音播报插件，支持 Android、iOS、Harmony、Web 平台

引入 ​

ts
import { TuiTtsConsole } from '@/uni_modules/tui-tts'

基础用法 ​

vue
<template>
  <view class="fv p-16px">
    <view class="fv bg-white r-12px p-16px mb-12px">
      <text class="s-20px sfwb mb-4px">TTS 文字转语音</text>
      <text class="s-14px c-#888">输入文字后点击播报，支持暂停/恢复/停止</text>
    </view>

    <view class="fv bg-white r-12px p-16px mb-12px">
      <text class="s-14px sfwb mb-8px">运行时信息</text>
      <view class="fl faic mb-4px">
        <text class="s-14px c-#666 w-60px">平台：</text>
        <text class="s-14px">{{ runtime.platformName }}</text>
      </view>
      <view class="fl faic mb-4px">
        <text class="s-14px c-#666 w-60px">引擎：</text>
        <text class="s-14px">{{ runtime.engineName }}</text>
      </view>
    </view>

    <view class="fv bg-white r-12px p-16px mb-12px">
      <text class="s-14px sfwb mb-8px">播报文本</text>
      <input class="h-40px b-1px,s,#ddd r-8px plr-12px s-14px" v-model="speechText" placeholder="请输入要播报的文字" />
    </view>

    <view class="fv bg-white r-12px p-16px mb-12px">
      <text class="s-14px sfwb mb-8px">参数设置</text>
      <view class="fl faic mb-4px">
        <text class="s-14px c-#666 w-60px">语速 ({{ rateVal }})</text>
        <slider class="f" :min="0.1" :max="2" :step="0.1" v-model="rateVal" />
      </view>
      <view class="fl faic mb-4px">
        <text class="s-14px c-#666 w-60px">音调 ({{ pitchVal }})</text>
        <slider class="f" :min="0.5" :max="2" :step="0.1" v-model="pitchVal" />
      </view>
      <view class="fl faic">
        <text class="s-14px c-#666 w-60px">语言</text>
        <input class="h-36px b-1px,s,#ddd r-8px plr-12px s-14px f" v-model="localeText" placeholder="zh-CN" />
      </view>
    </view>

    <view class="fl fww mb-8px">
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#007aff c-white" @click="startSpeak">播报</button>
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#f0f0f0" @click="pauseSpeak">暂停</button>
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#f0f0f0" @click="resumeSpeak">恢复</button>
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#ff3b30 c-white" @click="stopSpeak">停止</button>
    </view>

    <view class="fl fww mb-8px">
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#f0f0f0" @click="listEngines">读取引擎</button>
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#f0f0f0" @click="listLocales">读取语言</button>
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#f0f0f0" @click="openSettings">打开设置</button>
      <button class="f ws-80px h-40px m-4px r-8px s-14px bg-#f0f0f0" @click="disposeTts">释放资源</button>
    </view>

    <view class="fv bg-white r-12px p-16px mb-12px" v-if="log.length > 0">
      <text class="s-14px sfwb mb-8px">执行日志</text>
      <text class="s-12px c-#666 ptb-1px" v-for="(item, i) in log">{{ i + 1 }}. {{ item }}</text>
    </view>
  </view>
</template>

<script setup lang="uts">
import { TuiTtsConsole } from '@/uni_modules/tui-tts'
import type { TuiTtsRuntime } from '@/uni_modules/tui-tts'

const tts = new TuiTtsConsole()
const runtime = ref<TuiTtsRuntime>(tts.describeRuntime())
const speechText = ref<string>('你好，欢迎使用 TTS 语音播报插件。')
const rateVal = ref<number>(1)
const pitchVal = ref<number>(1)
const localeText = ref<string>('zh-CN')
const engines = ref<string[]>([])
const locales = ref<string[]>([])
const log = ref<string[]>([])

tts.onReady(() => { log.value.push('语音引擎已就绪') })
tts.onComplete(() => { log.value.push('播报完成') })

function startSpeak(): void {
  const text = speechText.value.trim()
  if (text.length == 0) return
  tts.play({
    text: text,
    rate: rateVal.value,
    pitch: pitchVal.value,
    locale: localeText.value.length > 0 ? localeText.value : null,
  })
}
function pauseSpeak(): void { tts.pause(); log.value.push('已暂停') }
function resumeSpeak(): void { tts.resume(); log.value.push('已恢复') }
function stopSpeak(): void { tts.stop(); log.value.push('已停止') }
function listEngines(): void { engines.value = tts.listEngines(); log.value.push('获取到 ' + engines.value.length + ' 个引擎') }
function listLocales(): void { locales.value = tts.listLanguages(); log.value.push('获取到 ' + locales.value.length + ' 个语言') }
function openSettings(): void { tts.openSettings(); log.value.push('已尝试打开系统设置') }
function disposeTts(): void { tts.dispose(); engines.value = []; locales.value = []; log.value.push('已释放 TTS 资源') }
</script>

API ​

Class: TuiTtsConsole ​

ts
const tts = new TuiTtsConsole()

回调注册 ​

方法说明
onReady(callback)语音引擎就绪时回调
onError(callback)播报出错时回调
onComplete(callback)播报完成时回调

播报控制 ​

方法说明
play(options)开始播报
pause()暂停播报
resume()恢复播报
stop()停止播报
dispose()释放资源

play 参数 ​

参数类型说明
textstring播报文本，必填
ratenumber语速，范围 0.1~2，默认 1
pitchnumber音调，范围 0.5~2，默认 1
localestring语言，如 zh-CN、en-US，默认 zh-CN

查询 ​

方法返回值说明
listEngines()string[]获取语音引擎列表
listLanguages()string[]获取支持的语言列表
describeRuntime()TuiTtsRuntime获取运行时信息
openSettings()void打开系统 TTS 设置页

TuiTtsRuntime ​

字段类型说明
platformNamestring平台名称
engineNamestring引擎名称
supportsPauseboolean是否支持暂停
supportsEngineSelectionboolean是否支持引擎选择
supportsSettingsJumpboolean是否支持跳转设置页

平台差异 ​

功能AndroidiOSHarmonyWeb
暂停受限（内部 stop）支持受限（内部 stop）支持
恢复重新播报支持重新播报支持
引擎选择支持不支持不支持不支持
设置跳转支持支持不支持不支持

示例 ​

完整示例参考 demo/tts/tts.uvue