更新记录

1.0.1（2026-09-23）

io优化

平台兼容性

uni-app(4.45)

uni-app x(5.0)

其他

yt-tts-plus 文字转语音增强版插件

支持 Android TextToSpeech 和 iOS AVSpeechSynthesizer 的 uni-app UTS 插件。

特性

• ✅ 支持 Android 和 iOS 平台
• ✅ 提供 nvue 组件方式和 API 调用方式
• ✅ 支持多语言（中文、英文、日文、韩文等）
• ✅ 可调节语速、音调
• ✅ 支持暂停、恢复、停止
• ✅ 完整的事件回调

使用方式

方式一：nvue 组件（推荐，支持完整事件回调）

在 .nvue 页面中使用组件方式：

<template>
  <view>
    <yt-tts
      ref="tts"
      :defaultLanguage="'zh-CN'"
      :rate="1.0"
      :pitch="1.0"
      @ready="onReady"
      @speakstart="onSpeakStart"
      @speakend="onSpeakEnd"
      @error="onError"
    />

    <button @tap="speak">开始朗读</button>
  </view>
</template>

<script>
export default {
  methods: {
    speak() {
      const options = {
        language: 'zh-CN',
        rate: 1.0,
        pitch: 1.0
      }

      this.$refs.tts.speak('你好，欢迎使用 TTS 插件', options)
    },
    onReady() {
      console.log('TTS 准备就绪')
    },
    onSpeakStart() {
      console.log('开始朗读')
    },
    onSpeakEnd() {
      console.log('朗读完成')
    },
    onError(e) {
      console.error('TTS 错误:', e.detail)
    }
  }
}
</script>

组件属性

组件方法

通过 ref 调用：

组件事件

方式二：API 调用（用于 .vue 页面）

在 .vue 页面中使用 API 方式：

<template>
  <view>
    <button @tap="speak">开始朗读</button>
    <button @tap="stop">停止</button>
  </view>
</template>

<script>
// #ifdef APP-PLUS
import * as TTS from '@/uni_modules/yt-tts-plus'
// #endif

export default {
  methods: {
    speak() {
      // #ifdef APP-PLUS
      const options = {
        language: 'zh-CN',
        rate: 1.0,
        pitch: 1.0
      }

      TTS.speak('你好,欢迎使用 TTS 插件', options)
      // #endif
    },
    stop() {
      // #ifdef APP-PLUS
      TTS.stop()
      // #endif
    }
  },
  beforeUnmount() {
    // #ifdef APP-PLUS
    TTS.destroy()
    // #endif
  }
}
</script>

API 方法

示例

本项目包含两个完整示例：

1. tts-demo.nvue - 组件方式示例（nvue 页面，支持完整事件回调）
2. tts-api-demo.vue - API 方式示例（vue 页面）

注意事项

传统 uni-app 项目

• ✅ nvue 页面：使用组件方式 <yt-tts-plus>（推荐，支持完整事件）
• ✅ vue 页面：使用 API 方式 import * as TTS from '@/uni_modules/yt-tts-plus'
• ⚠️ 条件编译：在 .vue 页面中使用 API 时，必须用 // #ifdef APP-PLUS 包裹 import 和调用代码

uni-app x 项目

• ✅ 所有页面都使用组件方式（推荐）
• ✅ 也可以使用 API 方式

关键点：

• utssdk/index.uts 使用条件编译 // #ifdef 来导出对应平台的 API
• .vue 页面通过 import * as TTS from '@/uni_modules/yt-tts-plus' 导入
• .nvue 页面使用 <yt-tts-plus> 组件

参数格式说明

options 参数

speak 方法的 options 参数应使用普通 JavaScript 对象，而不是 Map 对象：

// ✅ 正确 - 使用普通对象
const options = {
  language: 'zh-CN',
  rate: 1.0,
  pitch: 1.0
}
TTS.speak('文本内容', options)

// ❌ 错误 - 不要使用 Map
const options = new Map()
options.set('language', 'zh-CN')

参数说明：

常见问题

Q: .vue 页面和 .nvue 页面应该用哪种方式？

A:

• nvue 页面：推荐使用组件方式，支持完整的事件回调（ready、speakstart、speakend、error）
• vue 页面：使用 API 方式，需要用 // #ifdef APP-PLUS 包裹

Q: 为什么 API 方式没有事件回调？

A: API 方式是全局单例，适合简单的朗读场景。如果需要完整的事件回调，建议使用 nvue 页面 + 组件方式。

Q: 如何在 .vue 页面中正确导入？

许可

MIT License