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();                      //从暂停的地方恢复播放
相关推荐
沐知全栈开发几秒前
CSS Text(文本)
开发语言
前进吧-程序员6 分钟前
现代 C++ 异步编程:从零实现一个高性能 ThreadPool (C++20 深度实践)
开发语言·c++·c++20
Rsun0455119 分钟前
10、Java 桥接模式从入门到实战
java·开发语言·桥接模式
于慨19 分钟前
mac安装flutter
javascript·flutter·macos
jieyucx28 分钟前
Golang 完整安装与 VSCode 开发环境搭建教程
开发语言·vscode·golang
pearlthriving30 分钟前
c++当中的泛型思想以及c++11部分新特性
java·开发语言·c++
智慧地球(AI·Earth)39 分钟前
规则引擎实战:Python中re库和pyknow库规则引擎实战教程
开发语言·python·程序人生
光影少年1 小时前
前端工程化升级
前端·javascript·react.js·前端框架
Hello--_--World1 小时前
节流 VS 防抖 相关知识点与面试题
前端·javascript
小雅痞1 小时前
[Java][Leetcode hard] 42. 接雨水
java·开发语言·leetcode