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();                      //从暂停的地方恢复播放
相关推荐
鸿蒙开发1 分钟前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js
ShineWinsu4 分钟前
对于Qt:QListWidget常见属性以及QListWidgetItem类的解析
开发语言·c++·qt·客户端·列表·qlistwidget·qlistwidgetitem
吴名氏.22 分钟前
Java转AI Agent教程(第十二周)检索与切分
java·开发语言·人工智能·ai·ai agent
知忆_IS44 分钟前
TerriaMap 开发实战04:MVT数据自定义符号化 - terriajs源码修改
javascript·webgis·terriamap·terriajs
瑞雪兆丰年兮1 小时前
JavaWeb-day10-SpringBootWeb案例
java·开发语言·javaweb·web
Elastic 中国社区官方博客1 小时前
更少的位数,相同的召回率:DiskBBQ 更保守的自动校准扫描
大数据·运维·开发语言·人工智能·elasticsearch·搜索引擎
三雷科技2 小时前
第6章第4节:自定义分词器
开发语言·c#
Adellle2 小时前
设计模式指南 (Java 版) ㊁
java·开发语言·设计模式
Delightrs3 小时前
Rust LeetCode238 算法题解
开发语言·算法·rust
云上工程笔记3 小时前
SRT字幕一键转手绘动画:srt-whiteboard-animation的复刻实录
大数据·开发语言·javascript·人工智能·机器学习