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();                      //从暂停的地方恢复播放
相关推荐
|晴 天|2 分钟前
我如何用Vue 3打造一个现代化个人博客系统(性能提升52%)
前端·javascript·vue.js
风止何安啊10 分钟前
网页都知道要双向握手才加载!从 URL 到页面渲染,单向喜欢连 DNS 都解析不通
前端·javascript·面试
xiaoshuaishuai816 分钟前
C# 实现百度搜索算法逆向
开发语言·windows·c#·dubbo
GISer_Jing17 分钟前
LangChain.js + LangGraph.js 前端AI开发实战指南
前端·javascript·langchain
yuan1999717 分钟前
使用模糊逻辑算法进行路径规划(MATLAB实现)
开发语言·算法·matlab
木心术122 分钟前
TypeScript实战进阶:从基础类型到高级类型编程
javascript·ubuntu·typescript
Hello--_--World41 分钟前
浏览器同源策略与跨域问题
javascript
蒸汽求职42 分钟前
北美求职身份过渡:Day 1 CPT 的合规红线与安全入职指南
开发语言·人工智能·安全·pdf·github·开源协议
零瓶水Herwt1 小时前
JavaScript对象继承常用详解
javascript
布局呆星1 小时前
Vue3 :生命周期、DOM 操作与自定义组合式函数
前端·javascript·vue.js