概述
很多设备都具备native的语音输入功能,并提供App来提供语言录入等功能。如果你想开发一些语言应用,那么针对不同的设备平台,包括desktop和移动设备如ios、android,你可能需要使用不同的语言、不同的api来做开发。跨平台性差带来的工作量无疑是个问题。
如果用web应用来实现,开发语言统一,并且跨平台的问题减弱为跨浏览器的问题,这对开发的难度和用户的推广肯定是能带来益处的。
本文主要介绍如果想在web网页中来使用语音处理功能,以在线语音录入为例,如何利用HTML5提供的一些API来实现。API使用细节不会讨论太多;会涉及到对不同设备和不同浏览器的支持情况。
Web Audio API & WebRTC
web audio api是一组在web上对音频文件进行处理的api,允许用户获取音频的不同类型通道,对其添加特效、合并分离声道等,以使音频可视化或添加空间效果等等。
其API基本使用是创建一个音频上下文(AudioContext),在其中创建不同功能的音频结点(AudioNode)来控制实现相关处理。下面的代码段创建了这两类对象。在不同的浏览器中,AudioContext有不同的prefix前缀,在chrome里是webkit前缀。
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio contextvar analyser = audioCtx.createAnalyser();var distortion = audioCtx.createWaveShaper();var gainNode = audioCtx.createGain();var biquadFilter = audioCtx.createBiquadFilter();
具体的API可以参考MDN的说明:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
WebRTC (Web Real-Time Communications) 是一种能让web应用捕获音频流或视频流的技术,获取的流可以作为raw data供其他api处理,或通过特定协议实现点到点的远程通信。这一切都不需要插件或第三方软件,只需要浏览器支持这一标准。
其API基本使用如下:针对不同浏览器设定不同的prefix;设定要获取的是音频还是视频流;获取流并实现不同的fallback。
// fork getUserMedia for multiple browser versions, for those// that need prefixesnavigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);navigator.getUserMedia ( // constraints - only audio needed for this app { audio: true }, // Success callback function(stream) { source = audioCtx.createMediaStreamSource(stream); //TBD }, // Error callback function(err) { console.log('The following gUM error occured: ' + err); }
不同设备及不同浏览器支持情况
这两类API属于HTML5中较新的一些标准,不同的浏览器以及同一浏览器的不同版本的支持情况都不同。
个人实测,在desktop上,主流的firefox和chrome都支持;在android设备上的ff和chrome也都支持;而在ios(只测了ipad)上,safari并不支持webRTC,由于chrome on ios也是基于safari的,所以也不支持。
针对更多的浏览器和设备,可以从这个网站上看看相应的支持情况:http://mobilehtml5.org
在线语言录入的实现方法
首先需要你的设备有音频输入设备,如microphone。
对于支持WebRTC的平台比较简单,如上文提到的API,直接使用getUserMedia()
.获取音频流即可。
而对于不支持WebRTC的平台,一个方法则是需要通过调用到设备的原生输入app,得到流文件再作处理。如:
在desktop上,会弹出文件选择框,让用户选择一个音频文件;而在ios的safari上,则会打开microphone app,让用户录一小段音频然后再发回给网页;在android设备上类似。