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();                      //从暂停的地方恢复播放
相关推荐
进击的尘埃4 分钟前
前端大文件上传全方案:切片、秒传、断点续传与 Worker 并行 Hash 计算实践
javascript
西梯卧客7 分钟前
[1-2] 数据类型检测 · typeof、instanceof、toString.call 等方式对比
javascript
wuhen_n30 分钟前
响应式探秘:ref vs reactive,我该选谁?
前端·javascript·vue.js
wuhen_n30 分钟前
setup 的艺术:如何组织我们的组合式函数?
前端·javascript·vue.js
明月_清风2 小时前
性能级目录同步:IntersectionObserver 实战
前端·javascript
明月_清风2 小时前
告别暴力轮询:深度解锁浏览器“观察者家族”
前端·javascript
摸鱼的春哥2 小时前
Agent教程17:LangChain的持久化和人工干预
前端·javascript·后端
子兮曰11 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
柳杉16 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau16 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js