前端语音识别功能实现
前端实现文字转语音功能
最近项目上有把文字转化为语音播放的需求,现在把常用的方法整理出来供大家参考
- 利用H5新增API SpeechSynthesisUtterance方法(经测试,此方法有兼容问题,在IOS上无法正常播放),代码如下:
var utterance = new SpeechSynthesisUtterance('Hello baby');window.speechSynthesis.speak(utterance);
2.使用百度的语音转化API,通过点击按钮触发play函数来控制语音的播放和暂停,此方法需要引入两个JS文件具体代码如下
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script src="jquery-ajax-blob-arraybuffer.js"></script>let isorno = false // 定义一个变量来表明播放和暂停状态const audio = document.getElementById('audio') // 获取页面中的audio标签$.ajax({url: 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=中华人民共和国',type: 'get',dataType: 'blob' // 扩展出了blob类型}).done(function (data, status, jqXHR) {const reader = new window.FileReader()reader.readAsDataURL(data)reader.onloadend = function () {// console.log(reader.result)audio.src = reader.result.replace('x-bd-bv', 'wav')}})function play () {if (isorno === false) {audio.play()isorno = true} else {audio.pause()isorno = false}}
- 第三种方法类似,也是通过百度API来实现,具体代码如下:
<body><div><div id="ttsText">测试ios能不能行，不行撇电脑！div><input type="button" id="tts_btn" onclick="doTTS()" value="播放">div><div id="bdtts_div_id"><audio id="tts_autio_id" autoplay="autoplay"><source id="tts_source_id"><embed id="tts_embed_id">audio>div>body>
<script type="text/javascript"> function doTTS(){var ttsDiv = document.getElementById('bdtts_div_id');var ttsAudio = document.getElementById('tts_autio_id');var ttsText = document.getElementById('ttsText').innerHTML;// 这样就可实现播放内容的替换了ttsDiv.removeChild(ttsAudio);var au1 = ';var sss = '+ ttsText+'">';var eee = ';var au2 = '';ttsDiv.innerHTML = au1 + sss + eee + au2;ttsAudio = document.getElementById('tts_autio_id'); ttsAudio.play();}</script>
总结: 经测试,第二种方法在vue项目中比较实用,如果有问题欢迎大家指出讨论。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！