vue实现文字转语音播报 |
您所在的位置：网站首页 › gjz发音播放 › vue实现文字转语音播报 |
vue实现文字转语音播报
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 一、前言最近项目里需要对特定内容进行语音播报，于是乎我就咨询了一番度娘，得到几种实现的方案，让我们来一一对比吧。本文更多是在用法上进行描述，每种方案的使用的技术，则没有深入叙述。 二、对比选择 1、Web Speech API他是h5新提供的一个原生语音识别技术的API，可以将文本转成语音并播放。 一共分为两个部分： 第一个是SpeechSynthesis 语音合成（文本到语音 TTS），本文只用到该部分。 第二个是SpeechRecognition（异步语音识别），这跟浏览器版本挂钩。 作为官方的api，实现的效果是比较符合理想的，支持的语言种类也很丰富， 不过就是兼容性上不太友好（特别是firefox下的） 截止当前， Chrome 桌面端和 Android 端自 version 33 以来均支持，但是带有前缀，所以你需要使用带有前缀的版本，比如：webkitSpeechRecognition Firefox 桌面端和移动端在 Gecko 44+ 中都支持，并且是没有前缀的，它可以在about:config 中把 media.webspeech.recognition.enable 设置为 true 打开。因为有Chrome带前缀和Firefox不带前缀的区别，所以建议使用语音识别的过程时，参考下列代码： var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent建议在使用语音播报功能前，去对应浏览器网页控制台试试下面这串代码，如果浏览器有声音，那就是能够支持的。 speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is your browser speaking.")); 2、接入百度的tts服务个人开发者有免费额度，时效期是半年。 兼容性较好，就是需要外网 3、speak-tts插件speak-tts是基于Web Speech API封装而成，优化了长语音不流畅的问题，还改进了许多不合理的地方。 这是它的官方文档 www.npmjs.com/package/spe… 由于是基于Web Speech AP封装的，所以建议检查一下浏览器兼容性http: //caniuse.com/#feat=speech-synthesis 三、实现 1、Web Speech APIa、不需要引入，直接生成，建议放在export default {}之前，成为全局变量。 const synth = window.speechSynthesis; // 启用文本 const msg = new SpeechSynthesisUtterance(); // 表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。b、创建播放函数，和停止函数，就可以按时机来调用啦 playVoice() { this.handleSpeak('测试内容') // 传入需要播放的文字 }, // 语音播报的函数 handleSpeak(text) { msg.text = text; // 文字内容: 测试内容 msg.lang = "zh-CN"; // 使用的语言:中文 msg.volume = 1; // 声音音量：1 msg.rate = 1; // 语速：1 msg.pitch = 1; // 音高：1 synth.speak(msg); // 播放 }, // 语音停止 handleStop(e) { msg.text = e; msg.lang = "zh-CN"; synth.cancel(msg); // 取消该次语音播放 } 2、接入百度的tts服务不需要额外下载插件，直接是使用audio标签，加上source返回的语音文件进行播放。 a、html部分 b、js函数部分，需要文字转语音就调用以下的doTTS函数。 doTTS(text) { var ttsDiv = document.getElementById('bdtts_div_id') var ttsAudio = document.getElementById('tts_autio_id') var ttsText = text // 要合成的文字 // 文字转语音 ttsDiv.removeChild(ttsAudio) var au1 = '' var sss = `` var eee = '' var au2 = '' ttsDiv.innerHTML = au1 + sss + eee + au2 ttsAudio = document.getElementById('tts_autio_id') // 进行播放 ttsAudio.play() } 3、speak-tts跟Web Speech API用法差不多，但是多了下载和引入的部分。 a、下载和引入 // 下载 npm install speak-tts // 引入 import Speech from 'speak-tts'b、使用 需要初始化语音服务，调用SpeechInit函数，随后就是在需要的时机调用，语音播放函数，并且该插件，还提供了一个promise的返回api，可以处理不同情况。 data () { return { speech:null } }, mounted(){ this.SpeechInit() // 需要初始化 }, methods:{ SpeechInit(){ this.speech = new Speech() this.speech.setLanguage('zh-CN') this.speech.init().then(()=>{}) }, //播放函数 play(textContent){ this.speech.speak({ text:textContent，// 播放的文本内容 listeners: { //开始播放 onstart: () => { console.log("Start utterance")}, //判断播放是否完毕 onend: () => { console.log("End utterance")}, //恢复播放 onresume: () => { console.log("Resume utterance") }, }, }).then(()=>{console.log("读取成功")}) }, //暂停 paused() { this.speech.pause(); }, //从暂停处继续播放 goahead() { this.speech.resume(); }, }, //离开页面取消语音，不取消可能会造成奇妙的bug destroyed() { this.speech.cancel(); }, 四、总结不想额外下东西，就可以用Web Speech API，想要处理机制完善一些的推荐用speak-tts，跨平台的推荐用百度的tts服务（免费额度有限罢了） ps: 周末卷不动了 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |