Your SlideShare is downloading. ×
0
FirefoxOSで
音を使ってみる
2013/08/31
河野 聡
13年9月2日月曜日
自己紹介
河 野 聡
@esperia09
R e : K a y o - S y s t e m
趣味: プログラム、作曲、絵描いたりとか
13年9月2日月曜日
ふぉくすけあざます!
13年9月2日月曜日
でもLT何しよう…
13年9月2日月曜日
\はっ/
13年9月2日月曜日
以前LT用に作ったアプリ
http://sequentic.appspot.com/
13年9月2日月曜日
これをFirefoxOS上でも
動かしたい!
13年9月2日月曜日
とりあえず、HTML5で
音を扱うAPIを再調査した
13年9月2日月曜日
音を扱うHTML5 API
•Web Audio API
• Googleが提案
• ↑先ほどのアプリはこちらを使ってます
•Audio Data API
• Mozillaが提案
• ↑非推奨・削除予定
13年9月2日月曜日
Web Audio API
• サポートブラウザ
• Chrome 10 (2011-03-08)
• Safari 6 (2012-07-25)
• Opera 15.0 (2013-07-02)
• Firefox 23.0 (2013-0...
Web Audio API
• サポートブラウザ
• Chrome 10 (2011-03-08)
• Safari 6 (2012-07-25)
• Opera 15.0 (2013-07-02)
• Firefox 23.0 (2013-0...
Audio Data API
• サポートブラウザ
• Firefox 4.0 (2011-03-02)
13年9月2日月曜日
肝心のFirefoxOSは…?
13年9月2日月曜日
http://www.slideshare.net/dynamis/firefox-os-updates-201308
13年9月2日月曜日
Firefox ver ≒ Gecko ver
https://developer.mozilla.org/ja/docs/Mozilla/Gecko/Versions
13年9月2日月曜日
•Firefox 18 ≒ Gecko 18
•Web Audio API (>= Firefox 23)
•→今はまだ使えない!
13年9月2日月曜日
(́・ω・`)
13年9月2日月曜日
だがしかし
13年9月2日月曜日
http://www.slideshare.net/dynamis/firefox-os-updates-201308
13年9月2日月曜日
http://forum.xda-developers.com/showthread.php?t=2388237
既に1.2ビルドされてたり
13年9月2日月曜日
もうすぐ使えるように
なる!!
13年9月2日月曜日
++
13年9月2日月曜日
現状での選択肢
• Web Audio APIがサポートされるまで
待つ
• Audio Data APIを使えなくなること
覚悟で使う
13年9月2日月曜日
<audio>
忘れられてね?
13年9月2日月曜日
現状での選択肢
• Web Audio APIがサポートされるまで
待つ
• Audio Data APIを使えなくなること
覚悟で使う
• <audio>要素を利用する
13年9月2日月曜日
現状でも音が
鳴らせないわけじゃない
13年9月2日月曜日
音楽を鳴らす
<audio src="src/music.ogg" controls></audio>
13年9月2日月曜日
こんな感じ
13年9月2日月曜日
JavaScriptで制御可能
<body>
<audio src="src/music.ogg" id="audio-main" controls></
audio>
<button id="btn-play">Play</button>
<...
デモ
13年9月2日月曜日
ご清聴ありがとうございました
13年9月2日月曜日
Upcoming SlideShare
Loading in...5
×

FirefoxOSで音を使ってみる

770

Published on

"関西Firefox OS勉強会 3rd GIG"のLT資料です。
http://atnd.org/events/41743

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
770
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "FirefoxOSで音を使ってみる"

  1. 1. FirefoxOSで 音を使ってみる 2013/08/31 河野 聡 13年9月2日月曜日
  2. 2. 自己紹介 河 野 聡 @esperia09 R e : K a y o - S y s t e m 趣味: プログラム、作曲、絵描いたりとか 13年9月2日月曜日
  3. 3. ふぉくすけあざます! 13年9月2日月曜日
  4. 4. でもLT何しよう… 13年9月2日月曜日
  5. 5. \はっ/ 13年9月2日月曜日
  6. 6. 以前LT用に作ったアプリ http://sequentic.appspot.com/ 13年9月2日月曜日
  7. 7. これをFirefoxOS上でも 動かしたい! 13年9月2日月曜日
  8. 8. とりあえず、HTML5で 音を扱うAPIを再調査した 13年9月2日月曜日
  9. 9. 音を扱うHTML5 API •Web Audio API • Googleが提案 • ↑先ほどのアプリはこちらを使ってます •Audio Data API • Mozillaが提案 • ↑非推奨・削除予定 13年9月2日月曜日
  10. 10. 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日月曜日
  11. 11. 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日月曜日
  12. 12. Audio Data API • サポートブラウザ • Firefox 4.0 (2011-03-02) 13年9月2日月曜日
  13. 13. 肝心のFirefoxOSは…? 13年9月2日月曜日
  14. 14. http://www.slideshare.net/dynamis/firefox-os-updates-201308 13年9月2日月曜日
  15. 15. Firefox ver ≒ Gecko ver https://developer.mozilla.org/ja/docs/Mozilla/Gecko/Versions 13年9月2日月曜日
  16. 16. •Firefox 18 ≒ Gecko 18 •Web Audio API (>= Firefox 23) •→今はまだ使えない! 13年9月2日月曜日
  17. 17. (́・ω・`) 13年9月2日月曜日
  18. 18. だがしかし 13年9月2日月曜日
  19. 19. http://www.slideshare.net/dynamis/firefox-os-updates-201308 13年9月2日月曜日
  20. 20. http://forum.xda-developers.com/showthread.php?t=2388237 既に1.2ビルドされてたり 13年9月2日月曜日
  21. 21. もうすぐ使えるように なる!! 13年9月2日月曜日
  22. 22. ++ 13年9月2日月曜日
  23. 23. 現状での選択肢 • Web Audio APIがサポートされるまで 待つ • Audio Data APIを使えなくなること 覚悟で使う 13年9月2日月曜日
  24. 24. <audio> 忘れられてね? 13年9月2日月曜日
  25. 25. 現状での選択肢 • Web Audio APIがサポートされるまで 待つ • Audio Data APIを使えなくなること 覚悟で使う • <audio>要素を利用する 13年9月2日月曜日
  26. 26. 現状でも音が 鳴らせないわけじゃない 13年9月2日月曜日
  27. 27. 音楽を鳴らす <audio src="src/music.ogg" controls></audio> 13年9月2日月曜日
  28. 28. こんな感じ 13年9月2日月曜日
  29. 29. 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日月曜日
  30. 30. デモ 13年9月2日月曜日
  31. 31. ご清聴ありがとうございました 13年9月2日月曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×