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();                      //从暂停的地方恢复播放
相关推荐
wuhen_n1 小时前
JavaScript事件循环(下) - requestAnimationFrame与Web Workers
开发语言·前端·javascript
Vallelonga1 小时前
Rust Option.as_ref() 方法
开发语言·rust
MarkHD1 小时前
Python RPA入门实战:深入解析RPA核心概念与Python的优势(第5-6天)
开发语言·python·rpa
Konata121 小时前
实现进阶的C/S通信
java·开发语言
初听于你1 小时前
Java 泛型详解
java·开发语言·windows·java-ee
rainbow68891 小时前
Java17新特性深度解析
java·开发语言·python
bin91531 小时前
C盘瘦身大作战:程序员的存储空间优化全攻略
c语言·开发语言·c盘清理·c盘清理技巧分享
小秋学嵌入式-不读研版1 小时前
智能台灯功能重设计方案
开发语言
Z.风止1 小时前
Go-learning(1)
开发语言·笔记·后端·golang
Hexene...2 小时前
【前端Vue】出现elementui的index.css引入报错如何解决?
前端·javascript·vue.js·elementui