第11回 html5とか勉強会 gyuque

サウンド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日木曜日