第11回 html5とか勉強会 gyuque
TRANSCRIPT
サウンドAPI第11回 HTML5とか勉強会
id: gyuque
2010年10月14日木曜日
前置き
2010年10月14日木曜日
ウェブブラウザのサウンド関連機能
• embed / object
• Windows Media Player
• Quicktime Player
• Flash も、この一種
音声、映像を再生する古典的な方法
→ もちろん今でも使えるただし、これらはプラグイン
2010年10月14日木曜日
ありがちなこと
Flash!
2010年10月14日木曜日
ありがちなこと
Silverlight!
2010年10月14日木曜日
ありがちなこと
Windows Media!
2010年10月14日木曜日
ありがちなこと
QuickTime!
2010年10月14日木曜日
Plugin sucks
• インストールが面倒
• 余計な物まで入る
• そもそもインストール出来ない場合も…
• そろそろ静止画並みに簡単に扱えるようにして欲しい
2010年10月14日木曜日
<video> <audio>
2010年10月14日木曜日
プラグインの追放、の次
2010年10月14日木曜日
data URI で音声ファイルの動的生成
詳しくは http://www.slideshare.net/moriyoshi/adobe-max-japan-2009-jui-javascript
2010年10月14日木曜日
data URI で音声ファイルを動的生成して、データ通信
<audio>
data:audio/wav... (・!・) < ピーガガガ
変調した信号をwavファイル化する
2010年10月14日木曜日
2010年10月14日木曜日
2010年10月14日木曜日
2010年10月14日木曜日
2010年10月14日木曜日
ストリーミング方式の動的生成
Mozilla Audio Data API
現在再生中
音声データを継ぎ足しJS
無限に再生
https://wiki.mozilla.org/Audio_Data_API
WRITING APIs
2010年10月14日木曜日
media file
再生中の音声データの取り込み
Mozilla Audio Data API
現在再生中 音声データを取り込みJS
https://wiki.mozilla.org/Audio_Data_API
READING APIs
2010年10月14日木曜日
再生中の音声データの取り込み
Mozilla Audio Data APIhttps://wiki.mozilla.org/Audio_Data_API
READING APIs
• 現在のところ、Ogg Vorbis / WebM を再生している時のみ機能する• WebM の場合は、動画を再生しながら音声トラックの情報を取れる
≫ 試したい方は、Firefox 4 beta で。http://www.mozilla.com/en-US/firefox/beta/
2010年10月14日木曜日
動画の音声トラックも取れます（現状、WebMのみ）
2010年10月14日木曜日
音声認識
speech 属性（現在は x-webkit-speech 属性）<input type="text" x-webkit-speech>
• キーボードの代わりに、声でテキストボックスに入力できる• HTML/JS からは、普通のテキストボックスとして扱える（ブラックボックス）
≫ 試したい方は、Chromium で。http://build.chromium.org/buildbot/snapshots/
2010年10月14日木曜日
マイク音声のアップロード
≫ 試せません （未実装）
HTML Media Capture API
2010年10月14日木曜日
マイク音声の取り込み
≫ 試せません （未実装）
HTML Media Capture API
2010年10月14日木曜日
まとめ
▶ Play ● Record
Mozilla Audio Data API
<audio>speech
Mic
HTML Media Capture
Flash
File
High Level API
Low Level API 現在Flashで実現できる範囲↓
JS/HTML が侵食しつつある
2010年10月14日木曜日