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

沖津貴智(moonlinxチーフエンジニア)
2009-07-31 20:35:01
  • このエントリーをはてなブックマークに追加

 本連載「オープンソースソフトウェアでクリエイターを支援する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を使って簡単なミュージックプレイヤーを作ってみましょう。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]