-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

09 16

Web Audio APIで雨降りアプリを作った。

どうも、火頭です。

以前紹介した、神ウェブアプリ「レインマン」を公開しましたので宣伝します。

こちら↓
imrainman.com

3種類の音源をXHRでダウンロードし、Web Audio APIを使って再生、ボリュームや環境をコントロールできるという神アプリです。
ループ再生によって何時間でも雨降らせます。

実は近い内、音楽用のウェブサイトを公開する予定で、サーバー契約や事前に動作確認をしておきたいなと思い、ならついでにレインマンのドメインも取ってしまおう、んでそっちで動作確認をしたらいいや~ ということでこちらが先に公開になったのです。

なんでもやってみるもので、サーバーを使っての環境ではローカルと挙動が違うところがあり、XHR(Ajax通信)は今まで避けていた技術だけに勝手がわからず苦労ざんまいでした。

さらにローカルでの作業と違い、音源のファイルサイズがネックに。

Web Audio APIではwavファイルがとても速く処理出来るので、音源は全てwavにしていたのですが、サーバー使用での環境ではファイルをダウンロードするのに結構時間がかかることが判明(当たり前か)。

3種の音源を準備するので、3倍の時間がかかるわけですね。再生が始るまで3分とか、とても我慢できない時間でしたので、(田舎住まいの私は光回線ではないので、光ならもう少し速かったのかもしれません)音源は全てmp3に変更。

mp3にすると今度はWeb Audio API側の処理、decodeAudioDataという変換処理みたいなものに時間がかかります。ただしダウンロードに比べ、こちらは数秒程度の話でしたので、我慢することに。

Web Audio APIで気づいたこととしては...

・PCの設定と同じサンプルレートの音源の方がデコード処理が速いっぽい(ユーザーの大多数はデフォルトの44.1kHZ 16bitでしょう)。

・mp3のbpsは128でも192でもデコード処理の速度に大して変化なし。音質的に192bpsの方が安心。

・今回のような音量が均一の音源ではループ再生の繋ぎ目がどうしても気になる。ファイルを長くすると当然ループする頻度は落ちるのですが、ファイルサイズとの兼ね合いがあるので5分以上は避けたい。音源の方に短いフェードイン、フェードアウトをかけておくのが良いかも。

などです。

再生までの時間を早めたいのであれば、以前node.jsでトライしたストリーミング再生の機構が使えるか?と思ったのですが、今回のように複数の音源を扱うことは考えていなかったので、不採用。複数のファイルを平行してダウンロードし、それぞれをリアルタイムに組み立てていくのは私にはハードル高すぎます。

一つだけの音源を少しでも早く再生させたいなら使えそうですが、音源が一つなら結局ダウンロード時間も減るので今回はそこまで恩恵はないかと、音源が30分あるとかなら話は別ですが。

様々な苦労を経てサイトはどうにか動作し、ちゃっかりSNSボタンやアドセンスまで組み込んであります。

あとは大金が転がりこんでくるのを願うばかりです。

それでは良い雨を。


追記:
javascript関連は苦労してもまだ楽しいのですが、HTML&CSSは全然楽しくない。表示関係の挙動は本当に嫌いで、勉強する気もおきません。

あとライブラリは一切使っていないので、ブラウザ間の違いが完全に乗り越えられません。

クローム、Firefoxは動作確認済みです(キチンと更新されていれば)。たぶんIEでは動きません、動かす気もなし。

私は某アンドロイド系しゅまほ☆(スマホ)を使っているのですが、機体自体がWeb Audio APIに対応しておらず、動作しません。iOS系は対応しているはずですが、持っていないので実機確認は出来ません。たぶんサイトのレイアウトは崩れます。

というわけで、レインマンはデスクトップで雨を延々と降らせながら作業したい雨野朗に向けたアプリですので、そこんとこヨロシク。

レインマン
Comment
Trackback
Comment form
 管理者にだけ表示を許可する

火頭

Author:火頭

火頭工房の中の人。 

ギター弾きます。
ゲームします。
お酒飲みます。

新ブログ


火頭工房のサイト

プロフィール
PR

Page Top
Powered by FC2 Blog | | Template Design by スタンダード・デザインラボ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。