音を出す Firefox OS アプリを作るには

20150704-hackathon.md

Firefox OS アプリ作成入門

開発環境の構築と Hello World から、センサーを利用したアプリの作成を解説したスライドです：

<iframe src="//www.slideshare.net/slideshow/embed_code/key/f1MZoTzNlcIm0L" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

Firefox OSアプリ開発ハンズオン(Hello World編) from Noritada Shimizu

Audio 要素についてのドキュメント

• audio 要素：タグのレファレンスです
• HTML5 の audio 要素と video 要素の使用：使い方を解説したチュートリアルとなっています

なお、開発期である Fx0 では次のコーデックを利用できます：

• 動画：MPEG4, H.263, H.264, VP8, Theora
• オーディオ：WAVE (PCM), MP3, AAC-LC, AAC+, eAAC+,Vorbis, AMR (NB/WB), EVRC, QCELP

JavaScript から audio 要素を操作するときは、こちら にある API が利用できます：HTMLMediaElement

Web Audio API

高度に音声を操作するには Web Audio API を利用します。

• チュートリアル
  • Web Audio API の基礎
  • Web Audio API の利用
  • Visualizations with Web Audio API
  • Web Audio API を使用したゲーム用音声の開発
• 解説
  • Web Audio API 解説：利用例とサンプルコードが豊富です
  • WEB SOUNDER：同様にサンプルコードが豊富です
• レファレンス：Web Audio API
• 他のアプリの起動

Web Audio Editor を使うと、Audio Node の接続関係が可視化され、デバッグに便利です。

デモサイト

サイト	解説
WEB AUDIO VOCODER	ヴォコーダーを JavaScript で実装したデモ。マイクやファイルからの入力を、ロボットボイスに変換します
Web Audio Synth v2	Web Audio API を利用したシンセサイザーです。OscillatorNode を使うと、こういうツールがつくれます
Web Audio Toy	音声にイフェクトをかけられるサイトです。パッチを繋ぎかえることで、イフェクトの内容が変わります

サンプルコード

• 照度センサーを使ったテルミン
• クロスフェーダ
• 音をリアルタイムの可視化
• マウスの座標に応じて音の高さと音量が変わるデモ
• クリックした周辺の色の平均値を表示するデモ
• シーケンサの例