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();                      //从暂停的地方恢复播放
相关推荐
星越华夏13 小时前
python——三角函数用法
开发语言·python
代码中介商13 小时前
C语言数据存储深度解析:从原码反码补码到浮点数存储
c语言·开发语言·内存
We་ct13 小时前
LeetCode 120. 三角形最小路径和:动态规划详解
前端·javascript·算法·leetcode·typescript·动态规划
changshuaihua00115 小时前
React 入门
前端·javascript·react.js
2501_9333295516 小时前
企业级舆情监测系统技术解析:Infoseek数字公关AI中台架构与实践
开发语言·人工智能·自然语言处理·架构
Wave84516 小时前
C++继承详解
开发语言·c++·算法
Tairitsu_H16 小时前
C++类基础概念:定义、实例化和this指针
开发语言·c++
.柒宇.16 小时前
Java八股之反射
java·开发语言
环流_16 小时前
多线程1(面试题--常见的线程创建方式)
java·开发语言·面试
掘金安东尼16 小时前
本周前端与 AI 技术情报|前端下一步 #462
前端·javascript·面试