html5语音转文字实时语音转文字

w html5 demo:
链接:https://pan.baidu.com/s/1uJ2EO9FNzFsRE69D_t6mI 提取码:19r5

文档

实时转需要开启录音权限,看文档,或者demo

借助第三方语音转文字技术


上传wav格式语音文件转文字

服务端实现ASR自动语音转文字,提供给前端asr服务器地址,然后前端把需要的语音文件以指定格式发送给服务端,服务端返回转换后的结果

html 复制代码
<!-- 原生input也行,第三方ui库也可以 -->
<a-upload
  action="#"
  :limit="1"
  :customRequest="customUploadHandler"
  >
  <a-button>点击上传</el-button>
</a-upload>
js 复制代码
import WebSockerUtil from "xx/xxx/xxx/";//引入ws工具类

let ws = null;

function webSocketInit(){
	//服务端提供的ASR服务地址,进行ws连接,
	ws = new WebSockerUtil('ws:xxx/xxx/xx:1008',messageHandler)
}
webSocketInit();

/**
接收结果
*/
function messageHandler(eventData){
	console.log(eventData,'ws转换结果')
	let resultTxt = '';//结果文字
    let rectxt = "" + JSON.parse(jsonMsg.data)['text'];
    let asrmodel = JSON.parse(jsonMsg.data)['mode'];
    let is_final = JSON.parse(jsonMsg.data)['is_final'];
    let timestamp = JSON.parse(jsonMsg.data)['timestamp'];
    if (asrmodel == "2pass-offline" || asrmodel == "offline") {
        offline_text = offline_text + handleWithTimestamp(rectxt, timestamp); //rectxt; //.replace(/ +/g,"");
        resultTxt  = offline_text;
    } else {
        resultTxt  = rec_text + rectxt; //.replace(/ +/g,"");
    }
}

/**
 自定义上传文件
*/
function  customUploadHandler({file}){
      let fileAudio = new FileReader();
      fileAudio.readAsArrayBuffer(file);
      fileAudio.onload = ()=>{
        let file_data_array = audioblob.result;
//        const audioblob= new Blob([new Uint8Array(file_data_array)], { type: "audio/wav" });
//       const audioSrc = (window.URL || webkitURL).createObjectURL(audioblob);

 	     let sampleBuf = new Uint8Array(file_data_array);
 	     let CHUNK_SIZE = 960; // for asr chunk_size [5, 10, 5]
 	     while (sampleBuf.length >= chunk_size) {
             let sendBuf = sampleBuf.slice(0, CHUNK_SIZE);
              sampleBuf = sampleBuf.slice(CHUNK_SIZE, sampleBuf.length);
              ws.send(sendBuf);
          }
          
          //stop
          let chunk_size = new Array(5, 10, 5);
          	 var request = {
       			 "chunk_size": chunk_size,
        		 "wav_name": "h5",
        		 "is_speaking": false,
        		 "chunk_interval": 10,
        		 "mode": 'offline',
    		};
    		if (sampleBuf.length > 0) {
        		ws.send(sampleBuf);
    		    sampleBuf = new Int16Array();
   			 }
   			 ws.send(JSON.stringify(request));
      }
}
相关推荐
A_aspectJ7 小时前
【Bootstrap V4系列】学习入门教程之 组件-输入组(Input group)
前端·css·学习·bootstrap·html
想睡好13 小时前
圆角边框 盒子阴影 文字阴影
前端·css·html
zfyljx13 小时前
2048 html
前端·css·html
神仙别闹14 小时前
基于HTML+JavaScript+CSS实现教学网站
javascript·css·html
wxl78122714 小时前
坐席业绩数据分析
html·js·csv·bi
逊嘘20 小时前
【Web前端开发】HTML基础
前端·html
Leo.yuan21 小时前
热力图是什么?三分钟学会热力图数据分析怎么做!
大数据·数据库·数据挖掘·数据分析·html
GanGuaGua1 天前
CSS:盒子模型
开发语言·前端·css·html
2401_837088501 天前
CSS vertical-align
前端·html
Hello server2 天前
利用 Python pyttsx3实现文字转语音(TTS)
python·学习·语音识别