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();                      //从暂停的地方恢复播放
相关推荐
kyriewen几秒前
重排、重绘、合成:浏览器渲染的“三兄弟”,你惹不起也躲不过
前端·javascript·浏览器
Wect11 分钟前
JS 手撕:对象创建、继承全解析
前端·javascript·面试
维度攻城狮12 分钟前
pycallgraph2drawio:Python 调用链可视化 + Draw.io 自由编辑
开发语言·python·draw.io·graphviz
3秒一个大16 分钟前
深入理解 JS 中的栈与堆:从内存模型到数据结构,再谈内存泄漏
前端·javascript·数据结构
蒙奇·D·路飞-21 分钟前
大模型时代下 Java 后端开发的技术重构与工程实践
java·开发语言·重构
wljy123 分钟前
Qt入门(一)
开发语言·qt
阿捞234 分钟前
Inertia.js 持久布局实现原理
前端·javascript·html
w2sfot36 分钟前
反AI逆向JS加密
javascript·人工智能·反ai
ZK_H1 小时前
半导体工艺流程
java·c语言·开发语言·计算机网络·金融
计算机安禾1 小时前
【数据结构与算法】第39篇:图论(三):最小生成树——Prim算法与Kruskal算法
开发语言·数据结构·c++·算法·排序算法·图论·visual studio code