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));
      }
}
相关推荐
学前端的小朱1 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
兩尛3 小时前
HTML-CSS(day01)
前端·html
lfl183261621604 小时前
thingsboard 自定义html
java·前端·html
温轻舟6 小时前
前端开发 -- 自定义鼠标指针样式
开发语言·前端·javascript·css·html·温轻舟
Luke Ewin9 小时前
基于3D-Speaker进行区分说话人项目搭建过程报错记录 | 通话录音说话人区分以及语音识别 | 声纹识别以及语音识别 | pyannote-audio
人工智能·语音识别·声纹识别·通话录音区分说话人
PieroPc11 小时前
Python tkinter写的《电脑装配单》和 Html版 可打印 可导出 excel 文件
python·html·电脑
幽络源小助理11 小时前
Python使用requests_html库爬取掌阅书籍(附完整源码及使用说明)
python·html·python爬虫·爬虫教程·requests_html·爬取书籍·掌阅
前端Hardy11 小时前
HTML&CSS:惊!3D 折叠按钮
css·3d·html
18号房客12 小时前
计算机视觉-人工智能(AI)入门教程一
人工智能·深度学习·opencv·机器学习·计算机视觉·数据挖掘·语音识别
IT女孩儿14 小时前
JavaScript--WebAPI查缺补漏(二)
开发语言·前端·javascript·html·ecmascript