vue加声音播放

复制代码
   // 在 Vue 实例的 methods 中修改 playText 方法
        playText(text) {
            // 检查浏览器是否支持 Web Speech API
            if ('speechSynthesis' in window) {
                // 等待语音资源加载
                if (speechSynthesis.getVoices().length === 0) {
                    // 使用箭头函数保持 this 上下文
                    speechSynthesis.onvoiceschanged = () => {
                        this.speakText(text);  // 使用 this 调用
                    };
                } else {
                    this.speakText(text);  // 使用 this 调用
                }
            } else {
                console.log('浏览器不支持文本转语音功能');
            }
        },

// speakText 方法也需要使用箭头函数或保持一致的调用方式

speakText(text) {

const msg = new SpeechSynthesisUtterance(text);

msg.lang = 'zh-CN';

msg.rate = 1;

msg.pitch = 1.1;

msg.volume = 1;

复制代码
            // 获取并设置中文语音
            const voices = speechSynthesis.getVoices();
            const chineseVoice = voices.find(voice => voice.lang.includes('zh'));
            if (chineseVoice) {
                msg.voice = chineseVoice;
            }

            speechSynthesis.speak(msg);
        },

this.playText('箱已扫入!');

相关推荐
天外飞雨道沧桑4 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
暗冰ཏོ7 小时前
VUE面试题大全
前端·javascript·vue.js·面试
豹哥学前端10 小时前
事件循环(Event Loop)深度解析:让你彻底搞懂 JS 的执行顺序
前端·javascript·面试
竹林81810 小时前
用 wagmi v2 + Next.js 14 搞 NFT 交易市场前端:从合约调用失败到顺利上架,我踩了哪些坑
javascript·next.js
前端不开发10 小时前
用一个 Bookmarklet(书签脚本),给任意网页挂一个可拖拽悬浮窗
前端·javascript
接着奏乐接着舞10 小时前
【无标题】
开发语言·前端·javascript
雨雨雨雨雨别下啦10 小时前
心理健康AI助手 - 项目总结
前端·javascript·vue.js·人工智能·信息可视化
风之舞_yjf10 小时前
Vue基础(32)_TodoList案例
前端·javascript·vue.js
Amos_Web12 小时前
Rspack 源码解析 (2) —— 从 rspack build 到输出 dist,完整编译链路详解
前端·javascript
张元清12 小时前
Ref 逃生舱:用 React Hook 解决闭包陈旧、回调身份不稳和强制更新
前端·javascript·面试