博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web语音处理 - Web Audio API & WebRTC
阅读量:6174 次
发布时间:2019-06-21

本文共 2280 字,大约阅读时间需要 7 分钟。

hot3.png

概述

很多设备都具备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设备上类似。

转载于:https://my.oschina.net/u/2274721/blog/1574050

你可能感兴趣的文章
prometheus收集springboot指标
查看>>
global gtags的配置
查看>>
iOS开发 — Quartz 2D知识点应用 (制作了一个Demo,源代码)
查看>>
Creating a Windows Image on OpenStack
查看>>
jquery图片自动缩放
查看>>
ie6 失真问题
查看>>
Regular Expression
查看>>
你到了第几层?图片式标题、按钮与隐藏文本
查看>>
大话重构连载14:我们是这样自动化测试的
查看>>
我的友情链接
查看>>
iis6 php安装 (一)
查看>>
关于,在Mysql中,外键是否会影响性能的问题???
查看>>
利用javascript设置图片等比例缩小
查看>>
dedeCMS如何给频道页添加缩略图
查看>>
CoreSeek快速安装
查看>>
Linux 网络性能调试工具Netstat
查看>>
我的友情链接
查看>>
报表下载SSH
查看>>
我的友情链接
查看>>
Raid磁盘阵列真的是100%的安全吗?raid有哪些常见的故障?
查看>>