前端语音识别功能实现

前端实现文字转语音功能

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

  1. 利用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
        }
      }
  1. 第三种方法类似,也是通过百度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项目中比较实用,如果有问题欢迎大家指出讨论。

你可能感兴趣的:(前端,javascript,html5)