May 19, 2015

Note: HTML5 识别语音相关的一些资源

By Gideon Div / Css / XML / HTML5 / SVG 0 Comments

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

原文：http://segmentfault.com/a/1190000000418680

Just Code

Note: HTML5 识别语音相关的一些资源

speechRecognition API

getUserMedia API 以及 AudioContext

Audio 处理的模型

About Author

Gideon

Add a Comment

speechRecognition API

getUserMedia API 以及 AudioContext

Audio 处理的模型

Related Posts

Related Posts

About Author

Gideon

Add a Comment