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

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

文档

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

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


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

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

<!-- 原生input也行,第三方ui库也可以 -->
<a-upload
  action="#"
  :limit="1"
  :customRequest="customUploadHandler"
  >
  <a-button>点击上传</el-button>
</a-upload>
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));
      }
}

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5通过Web Speech API提供了实现语音文字的功能。这个API可以在浏览器中使用,无需下载或安装插件。具体实现语音文字的步骤如下: 1. 在HTML页面中引入SpeechRecognition对象。使用以下代码: ``` window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; ``` 2. 创建SpeechRecognition实例,并进行必要的配置。使用以下代码: ``` const recognition = new SpeechRecognition(); recognition.lang = 'zh-CN'; // 设置语言为中文 recognition.continuous = true; // 设置为连续识别模式 ``` 3. 为SpeechRecognition对象添加事件监听器,以监听语音识别过程中的不同阶段。包括开始语音识别、结束语音识别、获得识别结果等。使用以下代码: ``` recognition.onstart = function() { // 开始语音识别 }; recognition.onresult = function(event) { // 获取语音识别结果。event.results包含了识别出的所有文本结果 const transcript = event.results[event.results.length - 1][0].transcript; // 将识别结果展示在页面中 document.getElementById('text').textContent = transcript; }; recognition.onend = function() { // 结束语音识别 }; recognition.onerror = function(event) { // 处理语音识别错误 }; ``` 4. 启动语音识别功能。使用以下代码: ``` recognition.start(); ``` 5. 最后,将语音识别结果换成文字,可以通过修改页面元素的textContent或者使用Ajax将结果发送到服务器进行处理。 上述步骤简要介绍了在HTML5中实现语音文字的过程。通过Web Speech API,开发者可以轻松实现语音识别功能,为用户提供更加智能和便利的交互体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值