FirefoxOSで音を使ってみる

FirefoxOSで音を使ってみる

2013/08/31

河野　聡

13年9月2日月曜日

自己紹介

河野　聡

@esperia09

R e : K a y o - S y s t e m

趣味: プログラム、作曲、絵描いたりとか


ふぉくすけあざます！


でもLT何しよう…


＼はっ／


以前LT用に作ったアプリ

http://sequentic.appspot.com/13年9月2日月曜日

http://sequentic.appspot.com

http://sequentic.appspot.com

これをFirefoxOS上でも動かしたい！


とりあえず、HTML5で音を扱うAPIを再調査した


音を扱うHTML5 API

•Web Audio API• Googleが提案

• ↑先ほどのアプリはこちらを使ってます

•Audio Data API• Mozillaが提案

• ↑非推奨・削除予定


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は未サポート)


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は未サポート)

つい最近！！


Audio Data API


• Firefox 4.0 (2011-03-02)


肝心のFirefoxOSは…？


http://www.slideshare.net/dynamis/firefox-os-updates-201308




Firefox ver ≒ Gecko ver

https://developer.mozilla.org/ja/docs/Mozilla/Gecko/Versions




•Firefox 18 ≒ Gecko 18

•Web Audio API (>= Firefox 23)

•→今はまだ使えない！


(́・ω・`)


だがしかし






http://forum.xda-developers.com/showthread.php?t=2388237

既に1.2ビルドされてたり




もうすぐ使えるようになる！！


++


現状での選択肢

• Web Audio APIがサポートされるまで待つ

• Audio Data APIを使えなくなること覚悟で使う


<audio>

忘れられてね？


現状での選択肢

• Web Audio APIがサポートされるまで待つ

• Audio Data APIを使えなくなること覚悟で使う

• <audio>要素を利用する


現状でも音が鳴らせないわけじゃない


音楽を鳴らす

<audio src="src/music.ogg" controls></audio>


こんな感じ


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>


デモ


ご清聴ありがとうございました


Technology

FirefoxOSで音を使ってみる