vue3如何实现语音播报speak-tts

• 对浏览器原生 `SpeechSynthesis` API 做了 Promise 化封装，调用更简洁
• 自动检测浏览器支持情况
• 内置语音初始化、队列管理等能力
• 支持中文普通话语音合成

底层依赖：浏览器 `SpeechSynthesis` API， 无需额外安装语音引擎。

1. 安装

npm install speak-tts
# or
yarn add speak-tts

2. 全局封装工具 src/utils/tts.js

import Speech from 'speak-tts'
const speech = new Speech()

// 初始化一次
speech.init({
  volume: 1,
  lang: 'zh-CN',
  rate: 1,
  pitch: 1,
  listeners: {
    onend: () => console.log('播报结束')
  }
})

// 播报函数
export function voiceSpeak(text) {
  if (!speech.hasBrowserSupport()) {
    return Promise.reject('浏览器不支持语音')
  }
  speech.cancel() // 停止上一条
  return speech.speak({ text })
}

export function voiceStop() {
  speech.cancel()
}

3. Vue3 组件使用

<template>
  <button @click="handleSpeak">播报消息</button>
</template>

<script setup>
import { voiceSpeak, voiceStop } from '@/utils/tts'
const handleSpeak = async () => {
  await voiceSpeak('订单已完成，请及时查看')
}
</script>