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

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

シーク機能を実装する

 シークを行うためには、シークバーが必要になります。YouTubeなどでよく見る、再生した後に左から右へと線が延びていくあのバーです。

 完成系を先に見た方がイメージしやすいと思いますので、下の画像をご覧下さい。

ミュージックプレイヤーの完成系 ミュージックプレイヤーの完成系

 シークバーには、最低限以下の2つの機能が必要になります。

  • 現在どこまでファイルをロードしたか
  • 現在どこまで再生したか

 これらはSoundManager2の以下のハンドラを利用することで実現できます。

  • whileloading:ローディング中に繰り返し処理を行うハンドラ
  • whileplaying:再生中に繰り返し処理を行うハンドラ

 これらはcreateSoundメソッドの引数として設定できます。以下は設定例です。

    soundManager.onload = function() {
      //createSoundメソッドでSoundオブジェクトを生成する
      sound = soundManager.createSound({
      id: 'sample1', //一意である任意のid
      url: 'sound/sample2.mp3', //mp3ファイルへのパス
      volume: 80, //ボリューム
      whileloading:function(){
          //ローディングの状態を描画する。
          loadingProgress();
      },
      whileplaying:function(){
         //再生の状態を描画する。
        showProgress();
      }
      });      
    }

loadingProgress()、showProgress()関数は以下のような処理になっています。

    function loadingProgress(){
        document.getElementById("loading").style.width = sound.duration*100/sound.durationEstimate+"%";
    }
    
    function showProgress(){
        document.getElementById("progress").style.width = sound.position*100/sound.durationEstimate+"%";
    }    

 SoundManager2のAPIを利用して、現在どこまでロードされているか、また再生されているかをパーセンテージとして取得し、DOMを利用して画面(HTML)を描画しています。シークバーのHTMLは以下のような構造になっています(CSSの詳細は割愛します)。

    

 これで再生ボタンを押すとローディングバー(グレー)と再生バー(緑)が左から右に動くようになります。ここまできたら、あとは好きな場所から再生できるようにするのみです。バーをクリックした箇所から再生できるようにしてみましょう。

 シークバーを表現しているdiv要素に対して、onmousedownイベントを付与します。

    

 上記で指定しているseek関数は以下の通りです。

    //シーク処理を行う
    function seek(event){
        //シークした箇所を特定する
        var seekposition = getSeekPosition(event);
        //指定した時間にジャンプする
        sound.setPosition(Math.min(sound.durationEstimate, seekposition));
    }
    
    //シーク(クリック)した箇所の時間をミリ秒で返却する
    //例) 1:34秒の箇所をクリックした場合 -> 134000
    function getSeekPosition(event){
      var posx = event.clientX - getCurrentLeftPosition(event.target);
      var offwidth = document.getElementById("seekbar").offsetWidth;
      return Math.floor((sound.durationEstimate) * posx / offwidth);
    }

    function getCurrentLeftPosition(obj){
    var curleft = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            } while (obj = obj.offsetParent);
        return curleft;
        }
    }

 ここではバーをクリックしたタイミングで、クリックした個所から時間を特定し、その時間から再生する処理を記述しています。時間が特定できた後にsoundオブジェクトが提供するsetPositionメソッドを利用して、該当再生個所にジャンプしています。

 これでJavaScriptによるミュージックプレイヤーが完成しました。JavaScriptだけでも、デザイン面を含めて自由度の高いプレイヤーを作れることが分かったと思います。

 今回作ったものは、こちらからダウンロードしてお使いください。ライセンスはMITライセンスとします。また、サンプルのMP3は「Royalty Free Music」の音源を利用しています。

moonlinxでは複数曲の再生に対応するアルバムプレイヤーも提供

 今回はJavaScriptによるミュージックプレイヤーを説明しました。SoundManager2を利用することで、比較的簡単にミュージックプレイヤーを作成することができます。

 moonlinxでは、複数曲の再生ができるアルバムプレイヤーも提供しています。SoundManager2のAPIには面白い機能がまだまだたくさんありますので、是非調べて利用してみてください。

 次回は、Flash(ActionScript 3.0)について説明します。

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