読者です 読者をやめる 読者になる 読者になる

新・日々の暮らしに疲れてない?

一人バンド、火頭工房

雨降りサイト「レインマン」

旧ブログで紹介したサイト「レインマン」をこちらでも紹介します。

Web Audio APIの学習のために作ったサイトです。

概要は「雨音」「雨音2」「雷」の3種類の音源をXHRでダウンロードし、Web Audio APIを使って再生、ボリュームや室内の環境をコントロールできる、というもの。ループ再生によって何時間でも雨音を楽しめます。

 

こちら↓

http://imrainman.com/main.html

 

3種の音源をダウンロードするので、ネット環境によっては結構時間がかかるのがネックです。私は貧弱なネット環境で生活していますので、動作確認が大変でした。

 

音源を再生するには、XHRで取って来たファイルに対しWeb Audio APIのdecodeAudioDataという変換処理を施します、これには数秒時間がかかります。wavファイルにするとかなり速く処理できるのですが、ファイルサイズが大きくなると結局ダウンロード時間が増えてしまうので、mp3にしています。

 

後はWeb Audio APIゲインノードというものを通せば、音量がコントロールでき、フィルターを通せば音のこもりかた(室内シミュレート)がコントロール出来ます。

 

その他、Web Audio APIで気づいたこととしては...

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

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

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

などです、間違っていたらすみません。

 

追加機能として、一定時間でランダムにパラメーターを変化させるランダマイズ機能をつけたり、Webstorageを使って気に入った設定を保存・ロードできるようにしました、ちなみに設定は一度ロードしたら消えます。

 

もっとデザインをキレイにしたら良いんですけど...億劫です。

 

ちなみに、ライブラリは一切使っていないので、ブラウザ間の違いが乗り越えられません。クロームFirefoxOperaは動作確認済みです(キチンと更新されていれば)。たぶんIEでは動きません、動かす気もなし。

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

 

f:id:hiatama:20151207172024p:plain