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();                      //从暂停的地方恢复播放
相关推荐
糯米团子7491 分钟前
Web Worker
开发语言·前端·javascript
我命由我1234536 分钟前
JavaScript 开发 - 获取函数名称、获取函数参数数量、获取函数参数名称
开发语言·前端·javascript·css·html·html5·js
白晨并不是很能熬夜1 小时前
【PRC】第 2 篇:Netty 通信层 — NIO 模型 + 自定义协议 + 心跳
java·开发语言·后端·面试·rpc·php·nio
简简单单就是我_hehe1 小时前
后端链路追踪局部采集和全量采集配置说明
java·开发语言
北京理工大学软件工程1 小时前
C#111
开发语言·c#
_风满楼2 小时前
HTTP 请求的五种传参方式
前端·javascript·后端
叶子野格2 小时前
《C语言学习:指针》12
c语言·开发语言·c++·学习·visual studio
光影少年2 小时前
前端线上屏幕出现卡顿如何排查?
开发语言·前端·javascript·学习·前端框架·node.js
ch3nyuyu2 小时前
静态库和动态库的制作
linux·运维·开发语言
像我这样帅的人丶你还2 小时前
前端监控体系与实践:从错误上报到内存与 GC 观测
前端·javascript·架构