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();                      //从暂停的地方恢复播放
相关推荐
松☆18 分钟前
C++ 算法竞赛题解:P13569 [CCPC 2024 重庆站] osu!mania —— 浮点数精度陷阱与 `eps` 的深度解析
开发语言·c++·算法
耿雨飞18 分钟前
Python 后端开发技术博客专栏 | 第 06 篇 描述符与属性管理 -- 理解 Python 属性访问的底层机制
开发语言·python
耿雨飞21 分钟前
Python 后端开发技术博客专栏 | 第 08 篇 上下文管理器与类型系统 -- 资源管理与代码健壮性
开发语言·python
kyriewen1127 分钟前
项目做了一半想重写?这套前端架构让你少走3年弯路
前端·javascript·chrome·架构·ecmascript·html5
2601_9491942642 分钟前
Python爬虫完整代码拿走不谢
开发语言·爬虫·python
c***89201 小时前
python爬虫——爬取全年天气数据并做可视化分析
开发语言·爬虫·python
aq55356001 小时前
C语言、C++和C#:三大编程语言核心差异详解
java·开发语言·jvm
并不喜欢吃鱼2 小时前
从零开始C++----七.继承及相关模型和底层(上篇)
开发语言·c++
沐知全栈开发2 小时前
XML CDATA
开发语言
APIshop2 小时前
Python 爬虫获取闲鱼商品详情 API 接口实战指南
开发语言·爬虫·python