vue3 语音播报流程

最新推荐文章于 2025-05-19 16:12:57 发布

摇头的金丝猴

最新推荐文章于 2025-05-19 16:12:57 发布

阅读量953

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 插件使用文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_61382303/article/details/134688191

vue 插件使用专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过npm安装并使用speak-tts库实现语音播报功能，包括引入、初始化设置和基本操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm 安装 "speak-tts": "^2.0.8",

npm install speak-tts

在vue文件中引用

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();                      //从暂停的地方恢复播放