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));
      }
}
相关推荐
willow2 天前
html5基础整理
html
anOnion4 天前
构建无障碍组件之Radio group pattern
前端·html·交互设计
前端Hardy5 天前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
前端Hardy6 天前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html
前端Hardy6 天前
HTML&CSS:纯CSS实现随机转盘抽奖机——无JS,全靠现代CSS黑科技!
css·html
DeathGhost6 天前
分享URL地址到微信朋友圈没有缩略图?
前端·html
前端Hardy7 天前
HTML&CSS:高颜值产品卡片页面,支持主题切换
css·html
未来之窗软件服务7 天前
AI人工智能(二十三)错误示范ASR 语音识别C#—东方仙盟练气期
人工智能·c#·语音识别·仙盟创梦ide·东方仙盟
山河君7 天前
四麦克风声源定位实战:基于 GCC-PHAT + 最小二乘法实现 DOA
算法·音视频·语音识别·信号处理·最小二乘法·tdoa
Never_Satisfied7 天前
在HTML & CSS中,nth-child、nth-of-type详解
前端·css·html