第11回 html5とか勉強会 gyuque
TRANSCRIPT
![Page 1: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/1.jpg)
サウンドAPI第11回 HTML5とか勉強会
id: gyuque
2010年10月14日木曜日
![Page 2: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/2.jpg)
前置き
2010年10月14日木曜日
![Page 3: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/3.jpg)
ウェブブラウザのサウンド関連機能
• embed / object
• Windows Media Player
• Quicktime Player
• Flash も、この一種
音声、映像を再生する古典的な方法
→ もちろん今でも使えるただし、これらはプラグイン
2010年10月14日木曜日
![Page 4: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/4.jpg)
ありがちなこと
Flash!
2010年10月14日木曜日
![Page 5: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/5.jpg)
ありがちなこと
Silverlight!
2010年10月14日木曜日
![Page 6: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/6.jpg)
ありがちなこと
Windows Media!
2010年10月14日木曜日
![Page 7: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/7.jpg)
ありがちなこと
QuickTime!
2010年10月14日木曜日
![Page 8: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/8.jpg)
Plugin sucks
• インストールが面倒
• 余計な物まで入る
• そもそもインストール出来ない場合も…
• そろそろ静止画並みに簡単に扱えるようにして欲しい
2010年10月14日木曜日
![Page 9: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/9.jpg)
<video> <audio>
2010年10月14日木曜日
![Page 10: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/10.jpg)
プラグインの追放、の次
2010年10月14日木曜日
![Page 11: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/11.jpg)
data URI で音声ファイルの動的生成
詳しくは http://www.slideshare.net/moriyoshi/adobe-max-japan-2009-jui-javascript
2010年10月14日木曜日
![Page 12: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/12.jpg)
data URI で音声ファイルを動的生成して、データ通信
<audio>
data:audio/wav... (・!・) < ピーガガガ
変調した信号をwavファイル化する
2010年10月14日木曜日
![Page 13: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/13.jpg)
2010年10月14日木曜日
![Page 14: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/14.jpg)
2010年10月14日木曜日
![Page 15: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/15.jpg)
2010年10月14日木曜日
![Page 16: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/16.jpg)
2010年10月14日木曜日
![Page 17: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/17.jpg)
ストリーミング方式の動的生成
Mozilla Audio Data API
現在再生中
音声データを継ぎ足しJS
無限に再生
https://wiki.mozilla.org/Audio_Data_API
WRITING APIs
2010年10月14日木曜日
![Page 18: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/18.jpg)
media file
再生中の音声データの取り込み
Mozilla Audio Data API
現在再生中 音声データを取り込みJS
https://wiki.mozilla.org/Audio_Data_API
READING APIs
2010年10月14日木曜日
![Page 19: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/19.jpg)
再生中の音声データの取り込み
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日木曜日
![Page 20: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/20.jpg)
動画の音声トラックも取れます(現状、WebMのみ)
2010年10月14日木曜日
![Page 21: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/21.jpg)
音声認識
speech 属性(現在は x-webkit-speech 属性)<input type="text" x-webkit-speech>
• キーボードの代わりに、声でテキストボックスに入力できる• HTML/JS からは、普通のテキストボックスとして扱える(ブラックボックス)
≫ 試したい方は、Chromium で。http://build.chromium.org/buildbot/snapshots/
2010年10月14日木曜日
![Page 22: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/22.jpg)
マイク音声のアップロード
≫ 試せません (未実装)
HTML Media Capture API
2010年10月14日木曜日
![Page 23: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/23.jpg)
マイク音声の取り込み
≫ 試せません (未実装)
HTML Media Capture API
2010年10月14日木曜日
![Page 24: 第11回 HTML5とか勉強会 gyuque](https://reader033.vdocuments.mx/reader033/viewer/2022060115/55762480d8b42a4e1c8b4f22/html5/thumbnails/24.jpg)
まとめ
▶ 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日木曜日