前端语音识别功能实现

最新推荐文章于 2024-05-05 22:37:32 发布

置顶冬天的coder

最新推荐文章于 2024-05-05 22:37:32 发布

阅读量3.3k

点赞数 6

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_43497069/article/details/107003452

版权

前端专栏收录该内容

8 篇文章 2 订阅

订阅专栏

前端实现文字转语音功能

最近项目上有把文字转化为语音播放的需求,现在把常用的方法整理出来供大家参考

利用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 = '<audio id="tts_autio_id" autoplay="autoplay">';
   		var sss = '<source id="tts_source_id" 			src="https://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=0&cuid=20145551&ctp=1&tok=24.1631695f95038270fdb499e6b0c027e8.2592000.1593418544.282335-20145551&tex='+ttsText+'">';
   					
   		var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
   		var au2 = '</audio>';
   		ttsDiv.innerHTML = au1 + sss + eee + au2;
   		ttsAudio = document.getElementById('tts_autio_id');	
   		ttsAudio.play();
   	}
   	</script>

总结: 经测试,第二种方法在vue项目中比较实用,如果有问题欢迎大家指出讨论。

冬天的coder

关注

6
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
前端语音识别功能实现

前端实现文字转语音功能最近项目上有把文字转化为语音播放的需求,现在把常用的方法整理出来供大家参考利用H5新增API SpeechSynthesisUtterance方法(经测试,此方法有兼容问题,在IOS上无法正常播放),代码如下: var utterance = new SpeechSynthesisUtterance('Hello baby'); window.speechSynthesis.speak(utterance);2.使用百度的语音转化API,通过点击按钮触发play
复制链接

扫一扫