firefoxosで音を使ってみる
DESCRIPTION
"関西Firefox OS勉強会 3rd GIG"のLT資料です。 http://atnd.org/events/41743TRANSCRIPT
![Page 1: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/1.jpg)
FirefoxOSで音を使ってみる
2013/08/31
河野 聡
13年9月2日月曜日
![Page 2: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/2.jpg)
自己紹介
河 野 聡
@esperia09
R e : K a y o - S y s t e m
趣味: プログラム、作曲、絵描いたりとか
13年9月2日月曜日
![Page 3: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/3.jpg)
ふぉくすけあざます!
13年9月2日月曜日
![Page 4: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/4.jpg)
でもLT何しよう…
13年9月2日月曜日
![Page 5: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/5.jpg)
\はっ/
13年9月2日月曜日
![Page 6: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/6.jpg)
以前LT用に作ったアプリ
http://sequentic.appspot.com/13年9月2日月曜日
![Page 7: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/7.jpg)
これをFirefoxOS上でも動かしたい!
13年9月2日月曜日
![Page 8: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/8.jpg)
とりあえず、HTML5で音を扱うAPIを再調査した
13年9月2日月曜日
![Page 9: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/9.jpg)
音を扱うHTML5 API
•Web Audio API• Googleが提案
• ↑先ほどのアプリはこちらを使ってます
•Audio Data API• Mozillaが提案
• ↑非推奨・削除予定
13年9月2日月曜日
![Page 10: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/10.jpg)
Web Audio API
•サポートブラウザ
• Chrome 10 (2011-03-08)
• Safari 6 (2012-07-25)
• Opera 15.0 (2013-07-02)
• Firefox 23.0 (2013-08-06)
• (IEは未サポート)
13年9月2日月曜日
![Page 11: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/11.jpg)
Web Audio API
•サポートブラウザ
• Chrome 10 (2011-03-08)
• Safari 6 (2012-07-25)
• Opera 15.0 (2013-07-02)
• Firefox 23.0 (2013-08-06)
• (IEは未サポート)
つい最近!!
13年9月2日月曜日
![Page 12: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/12.jpg)
Audio Data API
•サポートブラウザ
• Firefox 4.0 (2011-03-02)
13年9月2日月曜日
![Page 13: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/13.jpg)
肝心のFirefoxOSは…?
13年9月2日月曜日
![Page 14: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/14.jpg)
http://www.slideshare.net/dynamis/firefox-os-updates-201308
13年9月2日月曜日
![Page 15: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/15.jpg)
Firefox ver ≒ Gecko ver
https://developer.mozilla.org/ja/docs/Mozilla/Gecko/Versions
13年9月2日月曜日
![Page 16: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/16.jpg)
•Firefox 18 ≒ Gecko 18
•Web Audio API (>= Firefox 23)
•→今はまだ使えない!
13年9月2日月曜日
![Page 17: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/17.jpg)
(́・ω・`)
13年9月2日月曜日
![Page 18: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/18.jpg)
だがしかし
13年9月2日月曜日
![Page 19: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/19.jpg)
http://www.slideshare.net/dynamis/firefox-os-updates-201308
13年9月2日月曜日
![Page 20: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/20.jpg)
http://forum.xda-developers.com/showthread.php?t=2388237
既に1.2ビルドされてたり
13年9月2日月曜日
![Page 21: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/21.jpg)
もうすぐ使えるようになる!!
13年9月2日月曜日
![Page 22: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/22.jpg)
++
13年9月2日月曜日
![Page 23: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/23.jpg)
現状での選択肢
• Web Audio APIがサポートされるまで待つ
• Audio Data APIを使えなくなること覚悟で使う
13年9月2日月曜日
![Page 24: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/24.jpg)
<audio>
忘れられてね?
13年9月2日月曜日
![Page 25: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/25.jpg)
現状での選択肢
• Web Audio APIがサポートされるまで待つ
• Audio Data APIを使えなくなること覚悟で使う
• <audio>要素を利用する
13年9月2日月曜日
![Page 26: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/26.jpg)
現状でも音が鳴らせないわけじゃない
13年9月2日月曜日
![Page 27: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/27.jpg)
音楽を鳴らす
<audio src="src/music.ogg" controls></audio>
13年9月2日月曜日
![Page 28: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/28.jpg)
こんな感じ
13年9月2日月曜日
![Page 29: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/29.jpg)
JavaScriptで制御可能<body> <audio src="src/music.ogg" id="audio-main" controls></audio> <button id="btn-play">Play</button> <button id="btn-stop">Stop</button> <script type="text/javascript"> var audio = document.getElementById('audio-main'); //var audio = new Audio('src/music.ogg'); document.getElementById('btn-play') .addEventListener('click', function(e) { audio.play(); }, false); document.getElementById('btn-stop') .addEventListener('click', function(e) { audio.pause(); }, false); </script></body>
13年9月2日月曜日
![Page 30: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/30.jpg)
デモ
13年9月2日月曜日
![Page 31: FirefoxOSで音を使ってみる](https://reader034.vdocuments.mx/reader034/viewer/2022052315/5485ae8cb4af9f6e0d8b4ee2/html5/thumbnails/31.jpg)
ご清聴ありがとうございました
13年9月2日月曜日