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('箱已扫入!');

相关推荐
软件开发技术深度爱好者1 小时前
小学英语单词魔法学园HTML5实现
javascript·html5·英语学习
勉灬之1 小时前
Next.js + Prisma 跨平台部署踩坑记
开发语言·javascript·ecmascript
糖果店的幽灵1 小时前
langgraph分支之 - 动态分支(Dynamic Branch)
java·前端·javascript·人工智能·langgraph
Bad_Shepherd2 小时前
vue-element-plus-admin添加自定义svg图标,并且图标选择组件可选自定义图标
vue.js·elementui·前端框架
这是个栗子2 小时前
前端开发中的常用工具函数(九)
开发语言·javascript·ecmascript·at
Revolution613 小时前
一段 JavaScript 代码执行时,到底发生了什么
前端·javascript
会周易的程序员4 小时前
Mermaid Renderer:一款的图表可视化小工具
前端·vue.js·流程图·mermaid
To_OC12 小时前
LC 131 分割回文串:刚学回溯时,我连怎么切字符串都想不明白
javascript·算法·leetcode
To_OC14 小时前
LC 42 接雨水:暴力超时卡半天?前后缀数组一用就通了
javascript·算法·leetcode
小林ixn14 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js