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();                      //从暂停的地方恢复播放
相关推荐
阿龍178712 分钟前
媒体文件问题检测脚本(一)(python+ffmpeg)
开发语言·python
mCell20 分钟前
React 如何处理高频的实时数据?
前端·javascript·react.js
随笔记21 分钟前
HbuilderX载入项目,运行后唤起微信开发者工具,提示:Error: Fail to open IDE,唤醒不起来怎么办
javascript·微信小程序·uni-app
2501_9411118428 分钟前
分布式日志系统实现
开发语言·c++·算法
百***355143 分钟前
TypeScript 与后端开发Node.js
javascript·typescript·node.js
少卿1 小时前
PerformanceObserver 性能条目类型(Entry Types)
前端·javascript
未来之窗软件服务1 小时前
幽冥大陆(二十三)python语言智慧农业电子秤读取——东方仙盟炼气期
开发语言·python·仙盟创梦ide·东方仙盟·东方仙盟sdk·东方仙盟浏览器
不会c嘎嘎1 小时前
C++ -- stack和queue
开发语言·c++·rpc
进击的野人1 小时前
防抖与节流:优化前端性能的两种关键技术
前端·javascript
小高0071 小时前
别再滥用 Base64 了——Blob 才是前端减负的正确姿势
前端·javascript·面试