h5技术和java_java & H5 语音技术实例

各位小伙伴们  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