speechRecognition API
Speech API 只支持 Chrome,
http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API
speech = new webkitSpeechRecognition speech.onresult = (event) -> console.log event.results[0][0] speech.lang = 'cmn-Hans-CN' speech.continous = yes speech.start()
Chrome 启用语音识别的接口需要每次用户确认
推测是只有 HTTPS 的页面才能保存用户设置, 避免每次重复手动必用
按照 Chromium 的 Issue 里的写的, 设计上就是这样子的
https://code.google.com/p/chromium/issues/detail?id=248987
写了个简单的页面进行测试, 确实 HTTPS 的页面即便刷新权限还是保留的:
<!DOCTYPE html> <html> <head> <title>Speech</title> <script defer src="src/main.js"></script> </head> <body> <div id="entry">Entry</div> </body> </html> entry = document.querySelector '#entry' entry.onclick = -> speech = new webkitSpeechRecognition speech.start()
关于 HTTPS 权限问题, 下面的文章也涉及讲了一些
http://shapeshed.com/html5-speech-recognition-api/
getUserMedia API 以及 AudioContext
音频内容可以通过 navigator.getUserMedia() 来获取
W3C 有文档但是没法看懂
http://dev.w3.org/2011/webrtc/editor/getusermedia.html
StackOverflow 找到的问题的解答:
http://stackoverflow.com/questions/11979528/record-audio-stream-from-getusermedia/19238153#19238153
网上找到一个随时读取音频, 绘制图表的例子:
http://www.webaudiodemos.appspot.com/AudioRecorder/index.html
https://github.com/cwilso/AudioRecorder
这份代码的结构, 除了 audioplayer.js 其他都和音频处理相关:
index.html main.js audioplayer.js recorderjs/ recorder.js recorderWorker.js
recorder.js 主要是对另一个 web worker 文件的封装
worker 文件在后台处理音频编解码的工作, 通过消息传回 recorder.js
数据从 main.js 里调用 getUserMedia 取出, 经过 new AudioContext() 处理
Audio 处理的模型
比较复杂, 我无法转述
还行的一篇中文的解释可以看这里:
http://html5online.com.cn/articles/2013030901.html