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 分钟前
语音合成与视觉模型api接入实现
前端·javascript·人工智能
Elastic 中国社区官方博客11 分钟前
在 Elastic 中使用 OpenTelemetry 内容包可视化 OpenTelemetry 数据
大数据·开发语言·数据库·elasticsearch·搜索引擎
C+++Python14 分钟前
如何学习Python的应用领域知识?
开发语言·python·学习
疯狂打码的少年16 分钟前
【Day12 Java转Python】Python工程的“骨架”——模块、包与__name__
java·开发语言·python
全栈开发圈26 分钟前
新书速览|MATLAB数据分析与可视化实践:视频教学版
开发语言·matlab·数据分析
网域小星球31 分钟前
C 语言从 0 入门(二十二)|内存四区:栈、堆、全局、常量区深度解析
c语言·开发语言
晓纪同学1 小时前
EffctiveC++_第三章_资源管理
开发语言·c++·算法
蚊子码农1 小时前
每日一题--C语言指针与内存泄漏:一道小问题的深度复盘
c语言·开发语言
Fanfanaas1 小时前
Linux 系统编程 进程篇(一)
linux·运维·服务器·c语言·开发语言·网络·学习
星辰徐哥1 小时前
ARP缓存表:作用、查看方法与刷新技巧
开发语言·缓存·php