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();                      //从暂停的地方恢复播放
相关推荐
乱蜂朝王34 分钟前
使用 C# 和 ONNX Runtime 部署 PaDiM 异常检测模型
开发语言·c#
波诺波38 分钟前
p1项目system_model.py代码
开发语言·python
危笑ioi39 分钟前
helm部署skywalking链路追踪 java
java·开发语言·skywalking
静心观复1 小时前
Python 虚拟环境与 pipx 详解
开发语言·python
卷心菜狗1 小时前
Re.从零开始使用Python构建本地大模型网页智慧聊天机器人
开发语言·python·机器人
书到用时方恨少!1 小时前
Python NumPy 使用指南:科学计算的基石
开发语言·python·numpy
2501_933329551 小时前
技术深度拆解:Infoseek舆情系统的全链路架构与核心实现
开发语言·人工智能·分布式·架构
Z_Wonderful1 小时前
在 Next.js 中,使用 [id] 或 public 作为文件夹或文件名是两种完全不同的概念,分别对应 动态路由 和 静态资源托管
javascript·网络·chrome
Chan162 小时前
MCP 开发实战:Git 信息查询 MCP 服务开发
java·开发语言·spring boot·git·spring·java-ee·intellij-idea
web前端进阶者2 小时前
Rust初学知识点快速记忆
开发语言·后端·rust