-- --

スポンサーサイト

上記の広告は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系は対応しているはずですが、持っていないので実機確認は出来ません。たぶんサイトのレイアウトは崩れます。

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

レインマン
09 05

東にログインしたこと

こんにちは。 ハーブ系男子の火頭です。

久しぶりに関東に行きました。
むかーし、ハーブを植えた庭の様子がすっかり様変わりしていましたので、写真を貼ります ↓
9_5.png

ローズマリーなどはこんな感じになっております。
ハーブさんの生命力はすごいですね。

1週間の関東滞在を経て、西に再度ログインしました。

夏も終わりの様子ですので、秋以降の畑の予定を立てなければいけません。

それでは皆様、良い秋を。
07 31

エブリデイ イズ ドシャ降り

( -ω-) ...梅雨が終わってしまった...

( -ω-)...毎日あっつい。

( -ω-) やる気でねぇ。

ずっと梅雨が続けば良かったのに...
あー雨ふらねぇかな...

( ゚ω゚)  !?

( ゚Д゚) ハゥアッ!

なら「レインマン」すればいいじゃない!
火頭さんの神ウェブアプリ「レインマン」すればいいじゃない!


はい、というわけで私が個人的に楽しむために作ったウェブアプリ「レインマン(非公開)」にまつわるお話です。

javascriptのWeb Audio APIを使って雨音をループ再生し続けるという神アプリですが、実は数ヶ月前に動作しなくなっているのを確認しました。 (元ネタはレイニームード Rainy Moodという雨音を再生するサイト様です)

クロスオリジン制約(クロスドメイン?)というのが原因だそうで、ローカルファイルのアクセスが不可とのことでした。↓コレ

rainman_error.png

これ私がAjaxの学習を断念する原因になったやつなんですよね。
かつてはこのエラーを回避すべく、別のやり方を模索しなんとか成功に辿り付いたのに、ブラウザのアップデートによって制限が追いついてしまった形になりました。

梅雨が終わって雨音が恋しくなってきたので修正することに。

いままでは音源を自動再生するようにしていたのですが、今回はFileApiを使うことにしました。これを使うとファイルを選ぶ手間が増えるのですが仕方ありません。

おなじみのこういうヤツ。↓

rainman_file.png

これで3つの音源を一斉に読み込むと、FileAPIiさんが下準備をしてくれます。
あとは再生ボタンで雨音を再生し、音量や環境など、自分好みのコントロールをするというだけ。

rainman.png

それぞれのスライダーで音量を調節できます。
一番下のRoom Environmentはお部屋で聴く雨の音をシミュレートするためにローパスフィルターを使いました。

さらに今回は一定期間で音量をランダムに変化させる機能を付けました。
普段は分数を指定しますが、下の動画では待ち時間をさけるため、5秒ごとに音量を変化させています。



この神アプリにて、私の梅雨は続行となりました。
06 11

エディブル × エディブル

こんにちは、ハーブ系男子の火頭です。 

鉢植えしたナスタチウムが開花しました ↓
edible.jpg

かわいいなぁ...と数秒愛でた後、おいしく頂きました。 


え? つまらない冗談言うなって?

いいえ、この花、食べられます。
(葉も食べられます) 

それがエディブルフラワー!!

味はクレソンみたいで、ピリリとおいしいです。


食べるためには農薬を使っていないことが重要ですので、
ホームセンターなどで売っている苗には注意が必要です。
03 31

赤黒木をがんばってみた。 javascript

こんにちは火頭です。

好きなメソッドは console.log()です。
ということでプログラミング関連のお話です。

赤黒木に魅せられたここ一ヶ月でした。
ルールを調べあげ、その複雑さに顔が赤黒くなりながらも、ようやくテストプログラムが完成しました。 

なぜ赤黒木かというと...いや自分でも全くわからないんですけど。

強いて言えば、
ルールを与えることで、自分でバランスを取り、頑なにデータを維持するその姿に、熟練の職人に通じる何かを感じたためでしょうか。(私が作ったテストプログラムはバグだらけで、データを簡単にロストするんですけど)

これを作ったからといって私の生活に何ら影響を与えないので、完全に趣味です。


まず赤黒木を知らない人のために簡単に説明します。

(Wikiより抜粋)
赤黒木(あかくろぎ)は、コンピュータ科学のデータ構造である平衡二分木の一種で、主に連想配列の実装に用いられている。 

赤黒木は、探索、挿入、削除などの操作における最悪時間計算量がO(log n) (nはツリーの要素数)と短く、複雑ではあるが実用的なデータ構造として知られている。


...だそうです。詳しく知りたい人は自分でググってもらいたいと思いますが、要はデータの格納や管理の仕方です。平衡二分木というものはこういう見た目をしています。↓
Binary_search_tree.png

例えば「6を探して」という命令を出した時、一番上にある「8」からチェックを開始して「6は8より小さい」→左へ→「6は3より大きい」→右へ→「6を発見」→ありましたよ。という具合に探索します。データが数万件とかの場合に、1、2、3、4、5、6…と探すより手間が省けるというお話です。

平衡二分木の一種である赤黒木、いざ制作に取り掛かったのは良いのですが、javascriptでの実装はコードが落ちてなくて他の言語のコードの意味を調べる必要が出てきてかなり大変でした。

さらに「回転」についての理解が甘かったり、葉はnullで扱っていたため「葉は黒である」という便利ルールを採用していないことになり例外処理を延々と書き続けるはめになったのです。

何はともあれ、とりあえず一段落しましたし、これ以上の実装は時間の問題ということで。

これから実装に挑戦する方は(よっぽどモノ好きだと思います)何よりルールをよぉ~く理解しておくことをおすすめします。

私はいきなり赤黒木から始めたのですが、2分探索木→AVL木→赤黒木 と順を追って学習しておくと効率が良いと思います。普通そうするでしょうけど。

特に気をつけることとして「左右の回転」。
回転の影響は、本人の「子世代~爺世代」までにおよびます。
私は「本人とその親」の視点だけに注目してたので、失敗が続きました。

「子の親を付け替える・爺の子を付け替える」これらを忘れるとエラーが出ると思います。これは意味上は「親の子をつけかえる・親の親をつけかえる」などと同じ意味になりますが、PCには関係ありません、きちんとプログラムに書いておかないと、関係がめちゃくちゃになります。

あとは挿入・削除の場合分け処理のときに、あるノードが木の内側なのか・外側なのかを調べる処理が必ず必要になります。親の右子の右子が黒だから外側で、その場合は親が爺に左回転で…等、頭がこんがらがるので、わかりやすくメモしておきましょう。

というわけで実際に画面を見ましょう。頭を左へ傾けながら見てください。RとBで赤と黒を表現しています。


1から順にループで数字を入れているので、やや右に傾いていますが、これでバランスがとれているということになります。
右と左どちら側から上に辿っても黒の数が同じということになります。(横には数えませんよ)

ここにノード(数字)を追加すると...

ほら


ほらぁ!!


数字の位置が移動して、できるだけ左右に均等に配置されるように、木が自動でバランスを取ります。なんと美しいことでしょう。

削除も同様、データを入れ替え、必要あればバランスを取ります。

こんな感じに。


制作はとても大変だったのですが、オブジェクト指向を考える良い機会になったかもしれません。アルゴリズムって素敵。

...
え?これが何の役に立つのかって?




火頭

Author:火頭

火頭工房の中の人。 

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

新ブログ


火頭工房のサイト

プロフィール
PR

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