java & H5 语音技术实例
荒墨丶迷失 发布于2018-01 浏览:41898 回复:100
16
收藏
最后编辑于2023-10

各位小伙伴们  2018 又和大家见面了!

新的一年还需要继续努力,突破创新......

今天,给大家带来的是 Global-AI1.0 语音技术的内容,什么是Global-AI1.0呢?

Global-AI1.0 是基于百度的AI接口,通过我这边测试和开发,实现了H5的各个技术的应用示例集合项目。

预计会包括语音技术,人脸识别,UNIT,自然语言,以及图像处理的AI应用,有这一些技术实践的小伙伴也可以一起分享。

好啦,说说今天分享的【语音技术】,主要接入语音识别 和 语音合成 ,在之前的帖子中分别简单的介绍这些实现的原理和Demo源码,可以翻一翻之前的帖子!

当然还是收到许多小伙伴的吐槽,毕竟开源有风险的,哈哈 ~

当然今天分享的内容,会在之前的例子上有所改善和突破,总体如下:

1.H5录音 通过音频流文件上传到后台后,不再是保存为wav格式的音频,而是处理流的形式转为二进制数组,直接调用百度语音识别SDK方法,返回识别结果。

2.前端录音操作,不再是手动的点击结束录音然后上传,而是通过音量控制判断是否需要结束,优化了操作体验。

3.语音合成,返回的音频二进制数组,不再是先保存为MP3格式音频,然后前台用audio播放MP3路径,而是将二进制数据传到前台先转base64然后转化为Blob对象,合成一个Blob音频路径,然后audio直接播放这个Blob音频路径即可

总结:就是增加不说话主动停止录音,语音识别和语音合成播放都通过流转化操作,不再保存任何格式文件形式。

当然了,具体还是根据大家反应的建议,努力提供最好的开源,下面看看这个语音交互页面吧!

下面先简单的讲解上面三条内容的实现方式吧~

1.H5录音 通过音频流文件上传到后台后,不再是保存为wav格式的音频,而是处理流的形式转为二进制数组,直接调用百度语音识别SDK方法,返回识别结果。springMVC 用 MultipartFile 来接收前台上传的音频文件

//音频文件 转化为 byte[]
InputStream content = audioData.getInputStream();
ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
byte[] buff = new byte[100];
int rc = 0;
while ((rc = content.read(buff, 0, 100)) > 0) {
	swapStream.write(buff, 0, rc);
}
// 获得二进制数组
byte[] byte1 = swapStream.toByteArray();
String Rtext = vsc.getVoiceBySdk(byte1);
System.out.println("语音识别内容:"+Rtext);
modelMap.put("Rtext", Rtext);

通过上述代码 即可将音频文件转化Byte数组的形式调用语音识别。

 

2.前端录音操作,不再是手动的点击结束录音然后上传,而是通过音量控制判断是否需要结束,优化了操作体验。

// 音频采集
		recorder.onaudioprocess = function(e) {
			var data= e.inputBuffer.getChannelData(0);
			var l = Math.floor(data.length / 10);
	        var vol = 0;
	        for(var i = 0; i < l ; i++){
	            vol += Math.abs(data[i*10]);
	        }
	        emptyCheckCount ++;
	        console.log(vol);
	        if(vol < 30){ //设置音量  数值越大越容易停
	            emptydatacount ++;
	            console.log(emptydatacount);
	            if(emptydatacount > 30){  //设置静音停止次数
	            	console.log('stoped');
	            	self.recordStop();
	            }
	        } else {
	            emptydatacount = 0;
	        }
			audioData.input(e.inputBuffer.getChannelData(0));
		};

音频采集的过程中(录音过程),判断输入音量的大小是否小于设置的值,小于的话就停止录音。

 

3.语音合成,返回的音频二进制数组,不再是先保存为MP3格式音频,然后前台用audio播放MP3路径,而是将二进制数据传到前台先转base64然后转化为Blob对象,合成一个Blob音频路径,然后audio直接播放这个Blob音频路径即可

//根据base64音频数据 转化为 blob对象
	function getBlob(base64Data){
		var dataURI = "data:audio/wav;base64,"+base64Data; //base64 字符串
	    var mimeString =  dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
	    var byteString = atob(dataURI.split(',')[1]); //base64 解码
	    var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
	    var intArray = new Uint8Array(arrayBuffer); //创建视图
	    for (i = 0; i < byteString.length; i += 1) {
	         intArray[i] = byteString.charCodeAt(i);
	    }
	    return new Blob([intArray], { type:  "audio/wav" }); //转成blob
	}        

根据后台获取base64音频数据调用上诉的方法 转化为 blob对象,再用window.URL.createObjectURL设置audio的src然后播放~

 

关于如何项目部署,大家可以在本贴下方的源码地址,下载Global-AI1.0 进行测试。

如果在测试过程中有任何问题,欢迎下方留言!

git下载地址:https://gitee.com/liyingming/Global_AI_1.0

收藏
点赞
16
个赞
共100条回复 最后由192******42回复于2023-10
#67荒墨丶迷失回复于2018-05

啊哈 最近出差忙数博会了  各位楼上的兄弟们不好意思了~

下载地址:https://gitee.com/liyingming/Global_AI_1.0

1
#66gavin_laiba回复于2018-05

楼主,能把这个语音识别用到我自己项目中吗

0
#65gel_bd回复于2018-05

急需这个东西,git上没有权限,二维码扫进去又是个没人活动的鬼群。好想请大佬出来冒个泡

0
#63上天ing回复于2018-05

楼主大大,链接失效请重新分享

 

0
#62cai13996430872回复于2018-05

楼主,git上没有权限

0
#59夏末听雨声1回复于2018-04

大佬,能给份源代码吗

1
#58荒墨丶迷失回复于2018-04
#55 tc19880926回复
gitee访问受限啊!?

目前这一块我需要重新改造并加入自己的东西  所以关闭了...

1
#57荒墨丶迷失回复于2018-04
#53 大鹏酷酷酷酷回复
[图片] 想请教下我提供ajax请求token为什么会一直报错 Failed to load https://openapi.baidu.com/oauth/2.0/token: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.98' is therefore not allowed access.
展开

你这个应用获取的token有编辑其他的应用嘛?

1
#56荒墨丶迷失回复于2018-04
#54 moqz3回复
这样服务器储存是不是越来越大?

服务器并没有存储呀?

1
#55tc19880926回复于2018-04

gitee访问受限啊!?

0
#54moqz3回复于2018-04

这样服务器储存是不是越来越大?

0
#53大鹏酷酷酷酷回复于2018-04

想请教下我提供ajax请求token为什么会一直报错

Failed to load https://openapi.baidu.com/oauth/2.0/token: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.98' is therefore not allowed access.

0
#52荒墨丶迷失回复于2018-04
#48 菜比菜比回复
通过http+域名公网访问的方式,会报错,显示getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS,有没有可以http+域名进行h5界面录音的方式呢?
展开

你好 这个报错是正常的  如果本地部署是可以http  但是如果跨服务器访问 会受到谷歌浏览器的限制 需要安全的https 你可以试着注册一个https看看呢~

1
#51荒墨丶迷失回复于2018-04
#47 xyz103053回复
想学,可是不会部署,请问大佬们,一开始从哪里入手呢,我现在自己写了几行html,下最终实现调用这个语音识别,接下来大概要怎么做牙,有没有好心的大佬讲一讲……
展开

可以慢慢学 不理解的问我也行 我有想法出一些基础的教程开始 但是需要看个人时间安排~

1
#50荒墨丶迷失回复于2018-04
#46 梁欣欣0回复
请问下 百度的语音识别接口 收费的 速度能提高吗

你好  百度的接口基本都是免费的 速度上来说调用都是有响应时间 跟网速有关~

1
#49菜比菜比回复于2018-04

而且有测试过 苹果手机的浏览器吗?我试了下..貌似录音不了

0
#48菜比菜比回复于2018-04

通过http+域名公网访问的方式,会报错,显示getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS,有没有可以http+域名进行h5界面录音的方式呢?

0
#47xyz103053回复于2018-04

想学,可是不会部署,请问大佬们,一开始从哪里入手呢,我现在自己写了几行html,下最终实现调用这个语音识别,接下来大概要怎么做牙,有没有好心的大佬讲一讲……

0
#46梁欣欣0回复于2018-04
#45 荒墨丶迷失回复
哈哈  大晚上的发现了个问题 明天回复你.....

请问下 百度的语音识别接口 收费的 速度能提高吗

0
#45荒墨丶迷失回复于2018-03
#44 梁欣欣0回复
好的,谢谢您,还有个问题 想请教您, 在判断音量那 HZRecord.js 这个文件中 var l = Math.floor(data.length / 10); var vol = 0; for(var i = 0; i < l ; i++){ vol += Math.abs(data[i*10]); } 这段代码能解释下吗 为啥这么计算出来的就是音量大小呢
展开

哈哈  大晚上的发现了个问题 明天回复你.....

0
TOP
切换版块