mirror of
https://github.com/modelscope/FunASR
synced 2025-09-15 14:48:36 +08:00
add html5 local access asr service directly (#654)
This commit is contained in:
zhaomingwork
GitHub
parent
a557a55b8b
commit
369f2ff883
@ -51,8 +51,18 @@ https://127.0.0.1:1337/static/index.html
|
||||
# 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
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -32,15 +32,121 @@ btnStart.disabled = true;
|
||||
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 @@ function getAsrMode(){
|
||||
|
||||
|
||||
}
|
||||
if(isfilemode)
|
||||
{
|
||||
item= "offline";
|
||||
}
|
||||
console.log("asr mode"+item);
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
@ -78,6 +189,18 @@ function getJsonMessage( jsonMsg ) {
|
||||
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 getJsonMessage( jsonMsg ) {
|
||||
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 @@ function getConnState( connState ) {
|
||||
|
||||
alert("连接地址"+document.getElementById('wssip').value+"失败,请检查asr地址和端口，并确保h5服务和asr服务在同一个域内。或换个浏览器试试。");
|
||||
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 @@ function stop() {
|
||||
}
|
||||
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 stop() {
|
||||
},function(errMsg){
|
||||
console.log("errMsg: " + errMsg);
|
||||
});
|
||||
}
|
||||
// 停止连接
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -15,8 +15,7 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
|
||||
|
||||
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 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
|
||||
alert("请检查wss地址正确性");
|
||||
return 0;
|
||||
}
|
||||
|
||||
if ( 'WebSocket' in window ) {
|
||||
speechSokt = new WebSocket( Uri ); // 定义socket连接对象
|
||||
speechSokt.onopen = function(e){onOpen(e);}; // 定义响应函数
|
||||
@ -80,6 +80,7 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
|
||||
speechSokt.send( JSON.stringify(request) );
|
||||
console.log("连接成功");
|
||||
stateHandle(0);
|
||||
isconnected=1;
|
||||
}
|
||||
|
||||
function onClose( e ) {
|
||||
@ -92,9 +93,11 @@ function WebSocketConnectMethod( config ) { //定义socket连接方法类
|
||||
}
|
||||
|
||||
function onError( e ) {
|
||||
isconnected=-1;
|
||||
info_div.innerHTML="连接"+e;
|
||||
console.log(e);
|
||||
stateHandle(2);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user