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

相关推荐
踩着两条虫6 小时前
VTJ.PRO 核心架构全公开!从设计稿到代码,揭秘AI智能体如何“听懂人话”
前端·vue.js·ai编程
用头发抵命8 小时前
Vue 3 中优雅地集成 Video.js 播放器:从组件封装到功能定制
开发语言·javascript·ecmascript
蓝冰凌8 小时前
Vue 3 中 defineExpose 的行为【defineExpose暴露ref变量】详解:自动解包、响应性与实际使用
前端·javascript·vue.js
奔跑的呱呱牛8 小时前
generate-route-vue基于文件系统的 Vue Router 动态路由生成工具
前端·javascript·vue.js
sp42a9 小时前
在 NativeScript-Vue 中实现流畅的共享元素转场动画
vue.js·nativescript·app 开发
柳杉9 小时前
从动漫水面到赛博飞船:这位开发者的Three.js作品太惊艳了
前端·javascript·数据可视化
TON_G-T10 小时前
day.js和 Moment.js
开发语言·javascript·ecmascript
Irene199110 小时前
JavaScript 中 this 指向总结和箭头函数的作用域说明(附:call / apply / bind 对比总结)
javascript·this·箭头函数
2501_9219308310 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-appearance(更推荐自带的Appearance)
javascript·react native·react.js