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

相关推荐
雪芽蓝域zzs8 分钟前
Vue3 defineProps` / `defineEmits` 是编译器宏,不需要手动 import 导入
前端·javascript·vue.js
whyweplay13 分钟前
Elpis:从Json Schema 到 页面
前端·javascript
大牧师1 小时前
Nest.js 微服务入门教程
开发语言·javascript·后端·微服务·node.js·nest.js·nest
低代码布道师1 小时前
外包项目管理平台全栈实战课02搭建数据底座:Next.js + PostgreSQL + Prisma 7
开发语言·javascript·postgresql·全栈开发
志尊宝1 小时前
Vue3 零基础每日笔记(004):模板语法初识——插值表达式、v-bind、v-on 一次学会
javascript·vue.js·笔记
AIGC小尼2 小时前
穿山甲 + 腾讯短剧短视频聚合广告平台|Android+SpringBoot+Vue+Docker 完整部署指南
android·vue.js·spring boot·聚合广告·广告平台·穿山甲广告·腾讯广告
JeffongTan10 小时前
在LWC中镶嵌VF Page获取用户IP
前端·javascript·salesforce
不cong明的亚子12 小时前
web live多屏互动平台
javascript·经验分享·音视频
dsyyyyy110114 小时前
JS复习,难点,易错点总结
开发语言·javascript·ecmascript