浏览器文字转语音播报

2023-06-01 03:29| 来源: 网络整理| 查看: 265

*注意事项：重新加载或刷新会导致不能自动语音播报，原因： chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。在页面加载完毕的情况下，用户需要click、dbclick、touch等主动交互行为，才能正常播放。

方法一、原生speechSynthesis

// 前端语音播报

export function playAudio (text) { window.speechSynthesis.cancel() // 创建一个新的语音合成对象 let synth = window.speechSynthesis if (!synth) { alert('浏览器不支持语音播报！') } // 创建一个新的语音合成消息 let utterance = new SpeechSynthesisUtterance() // 设置要转换为语音的文本内容 utterance.text = text // 设置语音合成的语言 utterance.lang = 'zh-cn' // 设置语速和音调 utterance.rate = 1.0 // 数越大，语速就越快 utterance.pitch = 1.0 // 数越大，声音就越尖锐 // 将语音合成消息添加到队列中 synth.speak(utterance) // 停止 // speechSynthesis.cancel(utterance) }

// 直接调用playAudio(‘传入播放文字’)

方法二、Vue实现语音播报

安装speak-tts包

npm install speak-tts

在页面中引入

import Speech from 'speak-tts' // 初始化 speechInit(){ this.speech = new Speech() this.speech.setLanguage('zh-CN') this.speech.init().then(()=>{ console.log('语音播报初始化完成...') }) }, //语音播报 speak(text){ this.speech.speak({text: text}).then(()=>{ console.log("播报完成...") }) }, // 使用时候调用speak(传入播放文字)

【本文地址】

浏览器文字转语音播报

浏览器文字转语音播报

今日新闻

推荐新闻