2012年2月13日月曜日

Audio Data APIのサンプル

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つ作成したので,そのチェック用です.上は周波数を基準周波数と基準からの相対値で指定します.下は周波数を直接指定します.詳しくはソースを読んでいただければ幸いです.







このエントリーをはてなブックマークに追加

2012年2月3日金曜日

最近のツイートのまとめ 20120203

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環境として活用できるので期待しています.

Sugar: A Javascript library for working with native objects.

http://sugarjs.com/

JavaScriptのネイティブオブジェクトを拡張するライブラリです.ソースコードを見ながら拡張して行ったら「Ruby並に便利になるんじゃね?」と期待が膨らみます.

CSS3 breadcrumbs

http://www.red-team-design.com/css3-breadcrumbs

パンくずリストを作成するためのCSSです.以前にも他のサイトで見た気がしますが,メモが残っていないので今度こそ残しておきます.@skuare 様より.

VMware Toolsのインストールと時刻合わせ

http://d.hatena.ne.jp/hsksnote/20111211/1323618653

Scientific Linuxの話ですが,GUI無しでVMware Toolsをインストールする方法と時刻合わせの方法です.

クライアントサイドだけでファイルを保存する「FileSaver.js」

http://www.moongift.jp/2012/01/20120120-2/

サーバを介さずにブラウザ側のみでファイルを生成(?)してダウンロードするライブラリです.

「crocro.jscam」JavaScriptでWebカメラの画像を取得するライブラリ

http://crocro.com/html5/jscam/wiki.cgi

タイトル通りですが,もはやJavaScriptに限界は無い感じです.

RRubyでのBenchmarkの取り方をば。

http://a-newcomer.heroku.com/29

意外と知らないけど,知っていると便利です.

オレオレDropBoxをrsyncで作る。

http://d.hatena.ne.jp/takuya_1st/20120116/1326735955

ZFS+rsyncサーバ+WebDavで,クライアントにこれを入れれば十分かな?そのうち試してみます.

SRWare Iron

Windows版 : http://www.srware.net/en/software_srware_iron_download.php

Linux版 : http://www.srware.net/forum/viewtopic.php?f=18&t=2934

Mac版 : http://www.srware.net/forum/viewtopic.php?f=18&t=2962

Google Chromeの元となっているChromiumをベースに軽量化されたブラウザIronです.ChromeからGoogle社への情報提供機能やアップデートチェック,PDF Viewerを取り除いたと思えばだいたい合っています.20日間ほど使用したところ,特に問題は見られませんでした.

Node.js と Titanium で SlideShare リモコンを作ってみた

http://d.hatena.ne.jp/scalar/20120112/1326395054

MeSHと同じようなことをやっているけど,JavaScriptに慣れた人が作るといろいろ便利という例.@sugyan 様より.

Twitter の特定のユーザーの最新ツイートを JavaScript で取得する方法

http://weble.org/2011/08/01/twitter-recent-tweet

すみません,twitter APIを読み解く時間がありませんでした.そのうち試してみます. @soraiy 様より.

最近のWeb制作で必ず1度はお世話になる便利なジェネレーターまとめ6つ

http://w3q.jp/t/1065

最近のCSSは複雑になってしまったので手打ちできないです.素直にジェネレータを使います.

html5のW3C FileAPIについて、調べてまとめた。

http://d.hatena.ne.jp/takuya_1st/20120106/1325835641

いつも分かりやすい解説をありがとうございます.と3回感謝しても足りないレベルです.

ブラウザキャプチャサービス【無料】

http://www.cman.jp/BrowserCapture/

様々なブラウザや解像度で,自分のサイトのスクリーンショットを表示してくれるサービスです.

homebrew でMacコマンドをLinuxのGNU風に置換する

http://d.hatena.ne.jp/takuya_1st/20111230/1325272152

環境のちょっとした差に敏感な人はどうぞ.

このエントリーをはてなブックマークに追加