MeSH日記: 2012/02

JavaScriptでサウンド合成

HTML5のおかげでFlashが不要になると言われています．では，これまでFlashを使わなければならなかった用途に何があるでしょうか？グラフィックス描画，フォント，アニメーション，通信などがメジャーなところですが，それ以外にもサウンド出力があります．合成した波形を音として出力する機能は，特に欲しい機能でした．厳密には，Javaでも合成サウンドの出力は可能だったのですが，それだけのためにJavaを使う人は私以外にいないはずなので，Flashの独壇場と言えるでしょう．

ところが，HTML5の旗印のもと，様々な機能がJavaScriptから利用できる時代になりました．Firefoxに実装された，Audio Data APIもその一つです．Audio Data APIとは何かと言うと，合成した波形を音として出力するAPIです．と言う訳で，今回はAudio Data APIを利用して，簡単な合成音を鳴らしてみたいと思います．

Audio Data API入門

Audio Data APIは非常にシンプルなAPIです．音を扱うAPIとして，Webkit系に実装されているWeb Audio APIも存在して，一括りにされることが多いのですが，狙いが全く異なります．Web Audio APIは，音源位置を指定したり，FFTしたり，一定間隔でバッファに記録する機能を持つなど，様々な機能を持っています．よって，これら2つのAPIは，別物と捉えておいたほうがすっきりします．

ではAudio Data APIの使い方ですが，必要な手順は5つです．

1. Audioのインスタンス作成

2. 1で作成したオブジェクトにチャンネル数とサンプリングレートを設定

3. Float32Arrayのインスタンスを生成し，波形データを生成

4. 3で生成したオブジェクトを1で生成したオブジェクトと結びつける

5. 再生する

言葉にするとイメージが掴みづらい箇所もありますが，手順としてはシンプルです．それでは実際のコードで見てみましょう．

Audio Data APIのサンプル

Firefox限定ですが，実際に耳で確かめてください．以下のボタンをクリックすると，ボタンに書いてある周波数の音を再生します．上3つと下3つは，鳴らすためのパラメータ指定方法を2つ作成したので，そのチェック用です．上は周波数を基準周波数と基準からの相対値で指定します．下は周波数を直接指定します．詳しくはソースを読んでいただければ幸いです．

Twitterでつぶやいたことを後々探そうとしても出てこないことが多いので，このページにまとめておきます．内容はブログ用に編集しています．リツイートは元情報の方のお名前を付けておきます．リンク集＋αと思ってください．

JavaScriptでPhotoshopファイルを解析する「psd.js」

http://dothtml5.com/archives/20120201_psdjs.html

データを読み込んで利用することは，プログラム言語よりもデータ構造を知ることができるか否かにかかっています．とは言え，まさかJavaScriptでPhotoshopのデータを読み込めるようになるとは思っていませんでした．@RSS_hateb_Roy 様より．

Node.js 日本ユーザグループ

http://nodejs.jp/

node.jsのバージョンアップを受け，ドキュメントが最新開発版（v0.7.2）に対応したようです．関係者の方々，ありがとうございます．@meso 様より．

HyperZebra Preview Release

http://web.me.com/pgoo/Site/HyperZebra.html

MacOS6の頃にMac会を席巻していたカード型データベース（っぽい環境）HyperCardが蘇ります．当時としてはちょっとしたデータを整理したり，ちょっとしたアプリを作ったりと便利に使っていました．@openspc 様より．

CSS3で吹き出し付丸ボタン

http://coder.blog.uhuru.co.jp/css/css3-balloon-btn

タイトル通りですが，CSSを使って丸いボタン（画像付き）の作り方です．ボタンの内容をフキダシで表示できるのもグッドです．@chimiochimio 様より．

この完成度に震えが止まらない！Node.js史上最高のIDE、Cloud9をインストールしよう。

http://codedehitokoto.blogspot.com/2012/01/nodeidecloud9.html

node.jsの開発環境としてviを使ってきましたが，デバッグしづらいのが難点でした．その辺りを解消してくれるIDEです．

Mac OS X Lion(10.7)にCloud9 IDEをインストール

http://r.otsuya.co/post/11045590787/cloud9-ide

上記のCloud9に関連した補足です．タイトル通りですが，Mac OS X LionにCloud9をインストールする方法です．

Twitter Bootstrapが大幅バージョンアップ！して凄まじいことに・・・

http://www.ideaxidea.com/archives/2012/02/twitter_bootstrap_v2.html

Twitter社によるWebデザイン素材Bootstrapの新バージョン（v2.0）です．以前のバージョンも便利でしたが，さらに強力になりました．Github上のBootstrapは以下からどうぞ．

http://twitter.github.com/bootstrap/index.html

テスト問題作成ツール – QuizGenerator – クイズジェネレータ

http://quizgenerator.net/2012/01/ibooks_embed/

iBooks2では，これまでの「本」に相当する静的なコンテンツだけでなく，JavaScriptを用いた動的なコンテンツにも対応しています．動的なコンテンツの一環としてクイズ問題を埋め込むツールの紹介です．@realbasic2009 様より．

これは便利！コピペで使える実用的なCSSテクニックいろいろまとめ9つ

http://w3q.jp/t/1207

CSSの利便性が急激に向上しているまでは理解できるとして，どのように作れば良いのかになるとお手上げ気味です．

CSSのelement()関数

http://hail2u.net/blog/webdesign/element-css-function.html

任意の要素を画像として参照するelement()関数の紹介です．まだFirefoxにしか実装されていないようですが，確実に便利です．

iBooks AuthorでHTML5の電子書籍作ってみた

http://ascii.jp/elem/000/000/665/665232/

iBooks AuthorでiBooksコンテンツ内にウィジェットを仕込むためのハウツーです．その他，JavaScirptのプログラムの埋込みや，HTML5 audio要素の埋込み，Google Mapの埋め込みについても書かれています．まだ試していませんが，HTML5 video要素を埋め込むことができればe-Learning環境として活用できるので期待しています．