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

相关推荐
lemon_yyds3 小时前
Vue 项目嵌入 React H5 技术方案
vue.js·react.js
顽疲3 小时前
java springboot vue 养老系统源码详解:请假 care_leave 销假与床位停费日扣实践
java·vue.js·spring boot
szp20053 小时前
Cache API 会丢掉 URL 里的 #:我的 9 个模型分块一直写在同一条缓存上
javascript·浏览器
keyipatience3 小时前
TypeScript学习(1)
前端·javascript·学习·typescript·html·css3
xifangge20254 小时前
基于 JavaScript 实现 CNC 数控切削参数与螺纹公差纯前端核算引擎
开发语言·前端·javascript
honkun64 小时前
vue 表格组件 vxe-table 修改滚动条样式,修改滚动条样式,统一宽度、颜色与自动隐藏
前端·javascript·vue.js
FRing035 小时前
JavaScript入门到精通二十四(正则表达式、元字符、修饰符)
开发语言·前端·javascript·正则表达式
171320330计算机毕设编程5 小时前
计算机毕业设计 基于springboot+vue的在线观鸟视频播放网站 LW PPT
java·大数据·vue.js·spring boot·算法·课程设计
大明二代6 小时前
从 RAG 到有记忆的 Agent:Mastra Memory 与 PostgreSQL 实战
前端·javascript·人工智能
小羊没烦恼!6 小时前
C#综合揭秘——Entity Framework 并发处理详解
java·开发语言·前端·javascript·数据库·mysql·c#