JavaScriptで作るミュージックプレイヤー：moonlinxを支えるOSS

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　本連載「オープンソースソフトウェアでクリエイターを支援するmoonlinx」では、ウェブメディア「moonlinx」を支えるオープンソースソフトウェアと、その構築と運用方法を紹介しています。

　前回は「Capistrano」でアプリケーションのデプロイ作業を効率化する方法を説明しました。今回はウェブのフロント技術によりフォーカスし、moonlinxでも利用しているJavaScript製のミュージックプレイヤーについて説明します。

HTML＋CSS＋JavaScriptなミュージックプレイヤーを作る

　ウェブ上のミュージックプレイヤーと言えば、Last.fmに代表されるようなFlash製のものが主流です。しかし、JavaやRubyエンジニアの方は、まだまだFlashに対して免疫がない場合が多く、本能的に避けてしまっている分野のようにも思えます。Flashの場合は別途、開発環境をそろえる必要もあるため、面倒だと感じて手を出していない方も多いと思います。

　そういったエンジニアでも、「JavaScriptで作れる」となると親近感もわき、試してみたくなるものではないでしょうか？

　今回は、HTML＋CSS＋JavaScriptで完結するミュージックプレイヤーについて説明 したいと思います。

音楽再生用JavaScriptライブラリ「SoundManager2」

　ミュージックプレイヤーをイチから全て作成するのか？というと、当然そうではありません。「SoundManager2」という素晴らしいJavaScriptライブラリが既に提供されていますので、利用しない手はありません。

　SoundManager2は、mp3の再生や停止、ボリューム調整といった操作を行うためのAPIを、JavaScriptのライブラリとして提供しています。実はこのライブラリは内部的にFlashを利用していますが、Flashを全く意識することなく利用できます。

　SoundManager2のサイトには多くのサンプルプログラムがあるのですが、中でも目を惹くのがドラムマシンの「MPC」をJavaScriptで再現したサンプル「SoundManager Javascript MPC Sampler Demo」です。

　キーボードの入力に反応する仕組みになっているため、ブラウザ上で本当にパッドを叩いているような気分が味わえます。こういったサンプルを見ても、SoundManager2の出来の良さがわかると思います。

　それでは早速、SoundManage2を使って簡単なミュージックプレイヤーを作ってみましょう。