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
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。