语音识别H5 SDK

简介

HI,您好,欢迎使用学而思网校AI开放平台语音识别 H5版 SDK。本文档主要针对需要开发语音识别H5端的技术研发工程师,详细描述开发语音识别H5端相关的技术内容。包含成人语音识别(英文语音识别、K12中文语音识别、儿童英文识别

完整小程序代码请发送邮件至linqi@100tal.com免费领取!

将H5 SDK文件下载到本地。

(1)打开电脑上的终端。然后安装http-server  (目的是打开本地服务)

npm i -g http-server

(2)然后在h5SDK文件夹下,在终端上运行http-server

(3)在浏览器中运行终端上给出的网址。例如:mac :http://127.0.0.1:8082     windows: http://127.0.0.1:8082/index.html 

【禁】不要直接运行本地的文件

 

补充说明:安装http-server目的是打开本地服务,它依赖于node环境。如若没有安装node(不能使用npm)。

您可自行安装本地server,如:Tomcat,weblogic、nginx 等


测评内容

参数名 类型 是否必选 赋值说明 样例
app_key string

应用标识

8102b22a5e81e840176d9f381ec6f837
接口名称 接口能力简要描述 api 地址
英文语音识别 链接websocket的url
ws://openapiai.xueersi.com/v1/api/speech/evl/en?app_key=8102b22a5e81e840176d9f381ec6f837
K12中文语音识别 链接websocket的url
ws://openapiai.xueersi.com/v1/api/speech/evl/zh?app_key=8102b22a5e81e840176d9f381ec6f837

链接sdk主要参数说明

识别sdk主要参数说明

参数名 类型 是否必选 赋值说明 样例
ceping
int

1:中文测评

2:英文测评

3 :  英文识别

4:K12中文语音识别

 ceping = '1' ||  ceping = '2'
sid
string

sid,全局唯一

sid='7dbb864c-33e9-4abf-98b6-16d65b3c6748"'
idx
string

分段音频的次序,最后一个包用负值表示(如:-100)

"1"  /  "2"  /  "-n(数值)"
compress
string

【默认为0】

0:pcm(16K采样率) 或 wav(16K采样率)

2:mp3(16K) 或 aac(16K)

compress='0'
vad_max_sec
string
默认30s, 最大说话时长,最大可设置90s
vad_max_sec = '90'
vad_pause_sec
string
默认5s, 说话后静音停止时间
vad_pause_sec = '3'
long_speech
string

【默认为""】

"1",开启长语音识别

非"1",不开启长语音识别

long_speech = '1'
vad_st_sil_sec
string
默认为10s, 说话前最大静音时长
vad_st_sil_sec = '3'
audio
string
音频字节流base64编码之后的字符串
 

注:参数列表为识别SDK,请根选择测评类别编辑正确的阅读文本、参考录音路径 请仔细阅读列表文档

json示例

{

    "common": {

        "sid": "7dbb864c-33e9-4abf-98b6-16d65b3c6748",

        "idx": "1",

        "compress": "2"

    },

    "spec": {

        "vad_max_sec": "15",

        "vad_pause_sec": "3",

        "vad_st_sil_sec": "5",

        "long_speech": "1",

        "extra": {}

    },

    "audio": "audio-bytes"

}

操作步骤

1、 新建一个文件夹,里面有index.html和js文件夹(下面一一介绍里面的内容)

2、index.html

  •  引入js文件进来
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ise.js"></script>

 

  • html里面的代码  注:根据按钮提示展现不同内容
	<div class="title-box" style="margin-top:30px">
		<button id="Evaluationzh" onclick="showcontent('Evaluationzh')">  测评中文 </button>
		<button id="Evaluationen" onclick="showcontent('Evaluationen')">  测评英文 </button>
		<button id="Distinguishzh" onclick="showcontent('Distinguishzh')">  识别中文 </button>
		<button id="Distinguishen" onclick="showcontent('Distinguishen')">  识别英文 </button>
     	<button id="Distinguishen" onclick="showcontent('Distinguishenchildren_en')">  儿童英文识别 </button>
	</div>	



<button id="start">开始</button>
	<button id="end">结束</button>
	<div>
		<div>
			音量:
			<span id="volume"></span>
		</div>
		<div>
			结果:
			<span id="result"></span>
		</div>
		<div>
			音频
			<audio src="" id="audio" controls></audio>
		</div>
	</div>
  • js代码请求示例:

只需要修改changeShape这个属性。en是英文 zh是中文 。就可以直接进行中英文切换
var changeShape = 'en'

  1. 点击开始按钮

在这个方法里面,放置向websocket传入的参数(注意中英文的切换和单句多句测评模式选择)

补充说明: 多句测评    例子:中文: 好雨知时节 | 润物细无声;; 英文:how are you | what do you say。

                   语音识别:区分中文英文测评  

	// 1是英文测评 2是中文测评  3是K12中文语音识别  4英文识别
		function showcontent(data){
			switch (data) {
				case 'Evaluationen':
					changeShape = '1'
					break;
				case 'Evaluationzh':
					changeShape = '2'
					break;
				case 'Distinguishzh':
					changeShape = '3'
				case 'Distinguishen':
					changeShape = '4'
					break;
			}
			$(".operation").show()
			showitem();
		}
		function showitem () {
			if(changeShape === '1') {
				$('.showflag').show()
				$('#textHtml').html('Whatever is worth doing is worth doing well.')
				$('#audioOrigin').attr('src', './en.mp3')
			} else if(changeShape === '2'){
				$('.showflag').show()
				$('#textHtml').html('任何值得做的 | 就把它做好')
				$('#audioOrigin').attr('src', './zh.mp3')
			} else if (changeShape === '3' || changeShape === '4' || changeShape === '5'){
				$('.showflag').hide()
			} 
		}
		// 当点击了开始
		function showstart(){
			// 判断测评的中英文的文字展示
			// 不能重复点击
			if (process.state == 1) return;
			process.state = 1
			var params = {}
			var webscoketURL = function (url, id){
				params.webscoketURL=url
				params.pid=id;
			}
			var world = $('#textHtml').text()
			console.log('params.ise_word', world)
			if(changeShape === '1' || changeShape === '2'){
				params.spec = {
					"assess_ref": world,
					"vad_max_sec": "15",

					"vad_pause_sec": "3",
			
					"vad_st_sil_sec": "5",
			
					"sil_tips_sec": "200",
			
					"voiceless_penal": "1",
					//单句测评与多句测评模式选项,多句测评模式置为1 单句测评为0
					"multi_sent_loop": multiSentLoop,
			
					"need_out_wd_sec": "0",
				}
			} else if (changeShape === '3' || changeShape === '4' || changeShape === '5'){
				
				params.spec = {
					"vad_max_sec": "15",

					"vad_pause_sec": "3",
			
					"vad_st_sil_sec": "5",
			
					"long_speech": '1'
				}
			}
			switch (changeShape) {
				case '1':
					webscoketURL("ws://openapiai.xueersi.com/v1/api/speech/evl/en?app_key=8102b22a5e81e840176d9f381ec6f837", "1103101")
					break;
				case '2':
					// 中文
					webscoketURL("ws://openapiai.xueersi.com/v1/api/speech/evl/zh?app_key=8102b22a5e81e840176d9f381ec6f837", "1103103")
					break;
				case '3':
					// 中文
					webscoketURL("ws://openapiai.xueersi.com/v1/api/speech/asr/zh?app_key=8102b22a5e81e840176d9f381ec6f837", "")
					break;
				case '4':
					// 英文
					webscoketURL("ws://openapiai.xueersi.com/v1/api/speech/asr/en?app_key=8102b22a5e81e840176d9f381ec6f837", "")
					break;
                case '4':
					// 英文儿童识别
					webscoketURL("ws://openapiai.xueersi.com/v1/api/speech/asr/children_en?app_key=8102b22a5e81e840176d9f381ec6f837", "")
					break;
			}
			session.start(params)
		}

(2)音量和mp3等数据的展示。

// 回调事件	
		var on = {
			// 音量发生变化时
			volume : function (value){
				$("#volume").text(value)
			},
			// 点击开始
			start : function (){
				$("#volume").text('');
				$("#audio").attr('src','');
				$("#result").text('');
				$("#error").text('');
			},
			// 点击结束
			stop : function (){
				var file = session.getMp3Blob();
				var url = URL.createObjectURL(file);
	           	$("#audio").attr('src',url);
			},
			// 录音中
			record : function () {
				process.state = 2
			},
			// 处理返回结果
			result : function (result) {
				process.state = 4
				console.log(result)
				result = JSON.stringify(result)
				$("#result").html($("#result").text()+'<br/>'+result);
			},
			// 处理错误
			error : function (err) {
				process.state = 5
				console.log(err)
				$("#error").html(err);
			},
			// 音量太小提示
			low : function () {

			}
		}
		var session = new XueASR({
			"callback":{
				"onResult" : on.result,
				"onVolume": on.volume,
				"onError": on.error,
				"onProcess":function(status){
					switch (status){
						// 录音中
						case 'onRecord':
							on.record();
							break;
						// 停止
						case 'onStop':
							on.stop();
							break;
						// 开始
						case 'onStart':
							on.start();
							break;
						// 声音过小
						case 'lowVolume':
							on.low();
							break;
						default:
					}
				}
			}
		});

3、js文件夹里面放入5个js文件。(但是只在index.html页面引进jquery.min.js和ise.js 两个就行,上面有示例。)

  •      (1 )check-volume.js  :用来检测音量的

  •      (2) lame.min.js+worker-realtime.js: 用来将音波转换成MP3格式的二进制流

  •      (3)ise.js :用来进行功能交互的

  •      (4)jquery.min.js

Back to top