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();                      //从暂停的地方恢复播放
相关推荐
前端小D几秒前
JS模块化
开发语言·前端·javascript
无限码力1 分钟前
华为OD技术面真题 - JAVA开发- spring框架 - 7
java·开发语言·华为od·华为od面试真题·华为odjava八股文·华为odjava开发题目·华为odjava开发高频题目
05大叔5 分钟前
优化器Adam,神经网络处理文本,CNN,RNN
开发语言·python·机器学习
Lyyaoo.7 分钟前
【JAVA基础面经】JAVA中的异常
java·开发语言
ByteCraze8 分钟前
JavaScript 深拷贝完全指南:从入门到精通
开发语言·javascript·ecmascript
wenzhangli79 分钟前
ooderAgent 龙虾时代的统一认证体系
开发语言·php
用户842981424181012 分钟前
3个Html加密工具
javascript
I Promise3424 分钟前
C++ 基础数据结构与 STL 容器详解
开发语言·数据结构·c++
morrisonwu27 分钟前
kafka4.2对应php rdkafka扩展安装以及php的producer和consumer写法及避坑
开发语言·php
Lyyaoo.29 分钟前
【JAVA基础面经】== 和 equals() 的区别
java·开发语言·jvm