From 369f2ff8838569351c26d909407b497ab16d3bcf Mon Sep 17 00:00:00 2001
From: zhaomingwork <61895407+zhaomingwork@users.noreply.github.com>
Date: 星期二, 20 六月 2023 11:08:50 +0800
Subject: [PATCH] add html5 local access asr service directly (#654)
---
funasr/runtime/html5/static/wsconnecter.js | 7 +
funasr/runtime/html5/readme.md | 14 +++
funasr/runtime/html5/static/index.html | 25 +++++
funasr/runtime/html5/static/main.js | 192 +++++++++++++++++++++++++++++++++++++++++------
4 files changed, 207 insertions(+), 31 deletions(-)
diff --git a/funasr/runtime/html5/readme.md b/funasr/runtime/html5/readme.md
index 1e9031e..0c1eba0 100644
--- a/funasr/runtime/html5/readme.md
+++ b/funasr/runtime/html5/readme.md
@@ -51,8 +51,18 @@
# https://30.220.136.139:1337/static/index.html
```
-### modify asr address in html according to your environment
-asr address in index.html must be wss
+### open browser to open html5 file directly without h5Server
+you can run html5 client by just clicking the index.html file directly in your computer.
+1) lauch asr service without ssl, it must be in ws mode as ssl protocol will prohibit such access.
+2) copy whole directory /funasr/runtime/html5/static to your computer
+3) open /funasr/runtime/html5/static/index.html by browser
+4) enter asr service ws address and connect
+
+
+```shell
+
+```
+
## Acknowledge
diff --git a/funasr/runtime/html5/static/index.html b/funasr/runtime/html5/static/index.html
index 99aa9b4..23d6fec 100644
--- a/funasr/runtime/html5/static/index.html
+++ b/funasr/runtime/html5/static/index.html
@@ -21,14 +21,35 @@
<br>
<input id="wssip" type="text" style=" width: 100%;height:100%" value="wss://127.0.0.1:10095/"/>
<br>
+ <br>
+ <div style="border:2px solid #ccc;">
+ 閫夋嫨褰曢煶妯″紡:<br/>
+
+ <label><input name="recoder_mode" onclick="on_recoder_mode_change()" type="radio" value="mic" checked="true"/>楹﹀厠椋� </label>
+ <label><input name="recoder_mode" onclick="on_recoder_mode_change()" type="radio" value="file" />鏂囦欢 </label>
+
+ </div>
+
<br>
- <div style="border:2px solid #ccc;">
+ <div id="mic_mode_div" style="border:2px solid #ccc;display:block;">
閫夋嫨asr妯″瀷妯″紡:<br/>
+
<label><input name="asr_mode" type="radio" value="2pass" checked="true"/>2pass </label>
<label><input name="asr_mode" type="radio" value="online" />online </label>
- <label><input name="asr_mode" type="radio" value="offline" />offline </label>
+ <label><input name="asr_mode" type="radio" value="offline" />offline </label>
+
+ </div>
+
+ <div id="rec_mode_div" style="border:2px solid #ccc;display:none;">
+
+
+ <input type="file" id="upfile">
+
</div>
<br>
+
+
+
璇煶璇嗗埆缁撴灉鏄剧ず锛�
<br>
diff --git a/funasr/runtime/html5/static/main.js b/funasr/runtime/html5/static/main.js
index 22f53c1..35e533a 100644
--- a/funasr/runtime/html5/static/main.js
+++ b/funasr/runtime/html5/static/main.js
@@ -32,15 +32,121 @@
btnConnect= document.getElementById('btnConnect');
btnConnect.onclick = start;
-var rec_text="";
-var offline_text="";
+var rec_text=""; // for online rec asr result
+var offline_text=""; // for offline rec asr result
var info_div = document.getElementById('info_div');
-//var now_ipaddress=window.location.href;
-//now_ipaddress=now_ipaddress.replace("https://","wss://");
-//now_ipaddress=now_ipaddress.replace("static/index.html","");
-//document.getElementById('wssip').value=now_ipaddress;
+var upfile = document.getElementById('upfile');
+
+
+var isfilemode=false; // if it is in file mode
+var file_data_array; // array to save file data
+var isconnected=0; // for file rec, 0 is not begin, 1 is connected, -1 is error
+var totalsend=0;
+
+upfile.onchange = function () {
+銆�銆�銆�銆�銆�銆�var len = this.files.length;
+ for(let i = 0; i < len; i++) {
+ let fileAudio = new FileReader();
+ fileAudio.readAsArrayBuffer(this.files[i]);
+ fileAudio.onload = function() {
+ var audioblob= fileAudio.result;
+ file_data_array=audioblob;
+ console.log(audioblob);
+ btnConnect.disabled = false;
+ info_div.innerHTML='璇风偣鍑昏繛鎺ヨ繘琛岃瘑鍒�';
+
+ }
+銆�銆�銆�銆�銆�銆�銆�銆�銆�銆�fileAudio.onerror = function(e) {
+銆�銆�銆�銆�銆�銆�銆�銆�銆�銆�銆�銆�console.log('error' + e);
+銆�銆�銆�銆�銆�銆�銆�銆�銆�銆�}
+ }
+ }
+
+function play_file()
+{
+ var audioblob=new Blob( [ new Uint8Array(file_data_array)] , {type :"audio/wav"});
+ var audio_record = document.getElementById('audio_record');
+ audio_record.src = (window.URL||webkitURL).createObjectURL(audioblob);
+ audio_record.controls=true;
+ audio_record.play();
+}
+function start_file_send()
+{
+ sampleBuf=new Int16Array( file_data_array );
+
+ var chunk_size=960; // for asr chunk_size [5, 10, 5]
+
+
+
+
+
+ while(sampleBuf.length>=chunk_size){
+
+ sendBuf=sampleBuf.slice(0,chunk_size);
+ totalsend=totalsend+sampleBuf.length;
+ sampleBuf=sampleBuf.slice(chunk_size,sampleBuf.length);
+ wsconnecter.wsSend(sendBuf,false);
+
+
+ }
+
+ stop();
+
+
+
+}
+function start_file_offline()
+{
+ console.log("start_file_offline",isconnected);
+ if(isconnected==-1)
+ {
+ return;
+ }
+ if(isconnected==0){
+
+ setTimeout(start_file_offline, 1000);
+ return;
+ }
+ start_file_send();
+
+
+
+
+}
+
+function on_recoder_mode_change()
+{
+ var item = null;
+ var obj = document.getElementsByName("recoder_mode");
+ for (var i = 0; i < obj.length; i++) { //閬嶅巻Radio
+ if (obj[i].checked) {
+ item = obj[i].value;
+ break;
+ }
+
+
+ }
+ if(item=="mic")
+ {
+ document.getElementById("mic_mode_div").style.display = 'block';
+ document.getElementById("rec_mode_div").style.display = 'none';
+
+ btnConnect.disabled=false;
+ isfilemode=false;
+ }
+ else
+ {
+ document.getElementById("mic_mode_div").style.display = 'none';
+ document.getElementById("rec_mode_div").style.display = 'block';
+ btnConnect.disabled = true;
+ isfilemode=true;
+ info_div.innerHTML='璇风偣鍑婚�夋嫨鏂囦欢';
+
+
+ }
+}
function getAsrMode(){
var item = null;
@@ -53,7 +159,12 @@
}
+ if(isfilemode)
+ {
+ item= "offline";
+ }
console.log("asr mode"+item);
+
return item;
}
@@ -78,6 +189,18 @@
varArea.value=rec_text;
console.log( "offline_text: " + asrmodel+","+offline_text);
console.log( "rec_text: " + rec_text);
+ if (isfilemode==true){
+ console.log("call stop ws!");
+ play_file();
+ wsconnecter.wsStop();
+
+ info_div.innerHTML="璇风偣鍑昏繛鎺�";
+ isconnected=0;
+ btnStart.disabled = true;
+ btnStop.disabled = true;
+ btnConnect.disabled=false;
+ }
+
}
@@ -86,14 +209,11 @@
function getConnState( connState ) {
if ( connState === 0 ) {
- //rec.open( function(){
- // rec.start();
- // console.log("寮�濮嬪綍闊�");
- //});
- btnStart.disabled = false;
- btnConnect.disabled = true;
info_div.innerHTML='杩炴帴鎴愬姛!璇风偣鍑诲紑濮�';
+ if (isfilemode==true){
+ info_div.innerHTML='璇疯�愬績绛夊緟,澶ф枃浠剁瓑寰呮椂闂存洿闀�';
+ }
} else if ( connState === 1 ) {
//stop();
} else if ( connState === 2 ) {
@@ -102,36 +222,52 @@
alert("杩炴帴鍦板潃"+document.getElementById('wssip').value+"澶辫触,璇锋鏌sr鍦板潃鍜岀鍙ｏ紝骞剁‘淇漢5鏈嶅姟鍜宎sr鏈嶅姟鍦ㄥ悓涓�涓煙鍐呫�傛垨鎹釜娴忚鍣ㄨ瘯璇曘��");
btnStart.disabled = true;
-
+ isconnected=0;
+
info_div.innerHTML='璇风偣鍑昏繛鎺�';
}
}
function record()
{
+
rec.open( function(){
rec.start();
console.log("寮�濮�");
btnStart.disabled = true;
});
+
}
+
+
+
// 璇嗗埆鍚姩銆佸仠姝€�佹竻绌烘搷浣�
function start() {
// 娓呴櫎鏄剧ず
clear();
//鎺т欢鐘舵�佹洿鏂�
-
+ console.log("isfilemode"+isfilemode+","+isconnected);
info_div.innerHTML="姝ｅ湪杩炴帴asr鏈嶅姟鍣紝璇风瓑寰�...";
//鍚姩杩炴帴
var ret=wsconnecter.wsStart();
if(ret==1){
isRec = true;
- btnStart.disabled = true;
+ btnStart.disabled = false;
btnStop.disabled = false;
btnConnect.disabled=true;
-
+ if (isfilemode)
+ {
+ console.log("start file now");
+ start_file_offline();
+
+ btnStart.disabled = true;
+ btnStop.disabled = true;
+ btnConnect.disabled = true;
+ }
+ return 1;
}
+ return 0;
}
@@ -152,21 +288,26 @@
}
wsconnecter.wsSend( JSON.stringify(request) ,false);
+
+
-
-
-
+ //isconnected=0;
// 鎺т欢鐘舵�佹洿鏂�
+
isRec = false;
- info_div.innerHTML="璇风瓑鍊�...";
- btnStop.disabled = true;
- setTimeout(function(){
- console.log("call stop ws!");
- wsconnecter.wsStop();
+ info_div.innerHTML="鍙戦�佸畬鏁版嵁,璇风瓑鍊�,姝ｅ湪璇嗗埆...";
+
+ if(isfilemode==false){
+ btnStop.disabled = true;
btnStart.disabled = true;
btnConnect.disabled=false;
+ setTimeout(function(){
+ console.log("call stop ws!");
+ wsconnecter.wsStop();
+ isconnected=0;
info_div.innerHTML="璇风偣鍑昏繛鎺�";}, 3000 );
+
rec.stop(function(blob,duration){
console.log(blob);
@@ -189,8 +330,9 @@
},function(errMsg){
console.log("errMsg: " + errMsg);
});
+ }
// 鍋滄杩炴帴
-
+
}
diff --git a/funasr/runtime/html5/static/wsconnecter.js b/funasr/runtime/html5/static/wsconnecter.js
index 676a94a..b9098bb 100644
--- a/funasr/runtime/html5/static/wsconnecter.js
+++ b/funasr/runtime/html5/static/wsconnecter.js
@@ -15,8 +15,7 @@
this.wsStart = function () {
var Uri = document.getElementById('wssip').value; //"wss://111.205.137.58:5821/wss/" //璁剧疆wss asr online鎺ュ彛鍦板潃 濡� wss://X.X.X.X:port/wss/
-
- if(Uri.match(/wss:\S*/))
+ if(Uri.match(/wss:\S*|ws:\S*/))
{
console.log("Uri"+Uri);
}
@@ -25,6 +24,7 @@
alert("璇锋鏌ss鍦板潃姝ｇ‘鎬�");
return 0;
}
+
if ( 'WebSocket' in window ) {
speechSokt = new WebSocket( Uri ); // 瀹氫箟socket杩炴帴瀵硅薄
speechSokt.onopen = function(e){onOpen(e);}; // 瀹氫箟鍝嶅簲鍑芥暟
@@ -80,6 +80,7 @@
speechSokt.send( JSON.stringify(request) );
console.log("杩炴帴鎴愬姛");
stateHandle(0);
+ isconnected=1;
}
function onClose( e ) {
@@ -92,9 +93,11 @@
}
function onError( e ) {
+ isconnected=-1;
info_div.innerHTML="杩炴帴"+e;
console.log(e);
stateHandle(2);
+
}
--
Gitblit v1.9.1