vue3 语音播报流程

npm 安装 "speak-tts": "^2.0.8",

javascript 复制代码
npm install speak-tts

在vue文件中引用

javascript 复制代码
import Speech from "speak-tts";
const speech = ref(null);

onMounted(() => {
    speechInit();
});

//语音播报初始化
const speechInit = () => {
    speech.value = new Speech();
    speech.value.setLanguage("zh-CN");
    speech.value.init({
        volume: 0.6, // 音量0-1
        lang: "zh-CN", // 语言
        rate: 1, // 语速1正常语速,2倍语速就写2
        pitch: 1, // 音调
        voice: "Microsoft Yaoyao - Chinese (Simplified, PRC)",
        listeners: {
            // 事件
            onvoiceschanged: (voices) => {
                // console.log('事件声音已更改', voices);
            },
        },
    });
};
 
  speech.value.speak({ text: "语音播报" });    //正常播放
  speech.value.cancel();                      //取消播放
  speech.value.pause();                       //暂停播放
  speech.value.resume();                      //从暂停的地方恢复播放
相关推荐
aini_lovee2 分钟前
直接序列扩频(DSSS)通信系统MATLAB仿真指南
开发语言·matlab
天上飞的粉红小猪4 分钟前
线程概念&&控制
linux·开发语言·c++
Cherry的跨界思维7 分钟前
19、自动化处理双核心:Java规则引擎与Python Selenium实战全解析
java·开发语言·python·自动化·办公自动化·python办公自动化·python办公
sorryhc25 分钟前
Vite开发环境按需编译是怎么实现的?
前端·javascript·vite
muyouking1128 分钟前
Zig 类型系统探索_1:从指针、浮点数到字符串的实践指南
开发语言
hz_zhangrl34 分钟前
CCF-GESP 等级考试 2025年9月认证C++五级真题解析
开发语言·数据结构·c++·算法·青少年编程·gesp·2025年9月gesp
nnnnna42 分钟前
props 、emits 、组件上的v-model(详细版)
前端·javascript
程序喵大人43 分钟前
Duff‘s device
c语言·开发语言·c++
余生H1 小时前
前端技术新闻(WTN-1):React.js & Next.js 爆出 CVSS 10.0 级严重漏洞,历史风险回顾与代码级深度分析
前端·javascript·react.js
轻描淡写6061 小时前
二进制存储数据
java·开发语言·算法