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

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

SoundManager2のダウンロード

 SoundManager2のサイトからファイルをダウンロードします。今回はバージョン2.94a.20090206(2009年4月28日時点の最新版)を利用します。

 ダウンロードしたファイルを解凍すると様々なファイルが格納されていますが、最低限必要なものはJavaScriptが格納された「script」ディレクトリと、swfファイルが格納された「swf」ディレクトリのみ。今回は以下のような構成でミュージックプレイヤーを開発しましょう。

musicplayer/
    |
    +--- player.html  ← ミュージックプレイヤーのHTMLファイル
    |
    +--- script/ ← SoundManager2が提供するJavaScriptファイル
    |       |
    |       +--- soundmanager2.js
    |
    +--- swf/    ← SoundManager2が提供するswfファイル
    |       |
    |       +--- soundmanager2.swf
    |       +--- soundmanager2_flash9.swf
    |
    +--- css/    ← CSSファイル
    |       |
    |       +--- main.css
    |
    +--- sound/ ← mp3ファイル
            |
            +--- sample1.mp3
            +--- sample2.mp3

SoundManager2の使い方

 まずは一番簡単な使い方です。HTMLヘッダでSoundManager2を読み込みます。


 次にJavaScriptでSoundManager2のプロパティの設定と、Soundオブジェクトを作成します。


 最後にHTMLで再生と停止ボタンを記述します。

sample1 再生 停止
SoundManager2で作成したミュージックプレイヤー SoundManager2で作成したミュージックプレイヤー

 非常にシンプルな記述ですが、これで再生リンクをクリックすると音楽を再生し、停止を押すと停止します。

 ここでポイントなのが、変数「sound_sample1」に格納されているSoundオブジェクトを作成するタイミングです。音楽を鳴らすにはSoundオブジェクトを作成しなければならないのですが、このオブジェクトはSoundManagerオブジェクトのcreateSoundメソッドを利用して作成します。

 SoundManagerオブジェクトはHTMLヘッダで読み込んだsoundmanager2.js内で作成される(最終行の「soundManager = new SoundManager();」)のですが、soundManagerオブジェクトは、インスタンス化された後も内部でいくつか処理を行っている関係上、createSoundメソッドをすぐに呼べない仕組みになっています。

 そのため、SoundManagerオブジェクトにはonloadハンドラが用意されており、完全に初期化が済んだ際にフックする仕組みが提供されています。なので、createSoundメソッドを実行する際には、必ずonloadハンドラを利用して実行してください。

 さて、単純に音楽を再生、停止するだけであればこれで十分ですが、通常ミュージックプレイヤーには様々な機能が用意されています。すくなくとも、シーク(好きなところから再生)する機能がないとプレイヤーとは呼べません。なので、次のページでシーク機能の実装方法を紹介します。

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