じまぐてっく: PreloadJS x SoundJSの基本的な使い方

version = preloadjs:0.3.0 , soundjs:0.4.0

PreloadJSで読み込んだ音楽ファイルをSoundJSに渡して再生・停止を行うための簡単な説明です。
PreloadJSとSoundJSはどちらもCreateJSのライブラリの一つです。簡単に連携がとれるので使い方を覚えておけばかなり強力な味方になってくれる予感がします。

PreloadJSの基本的な使い方は前のエントリを参照

SoundJSのドキュメント:http://www.createjs.com/Docs/SoundJS/modules/SoundJS.html

使用準備

 <script src="./preloadjs-0.3.0.min.js"></script>
 <script src="./psoundjs-0.4.0.min.js"></script>

installPlugin

preloadjsのインスタンスにsoundjsのクラスを渡してあげます。

   var queue = new createjs.LoadQueue(true);
   queue.installPlugin(createjs.Sound);

その後ファイルをqueueに登録して、fileloadイベントでsoundjsのインスタンスを作るfunctionに渡してあげます。

  var manifest = [
   {"src":"./bgm.mp3","id":"sound1"}
  ];
  queue.loadManifest(manifest,true);
  queue.addEventListener('fileload',handleFileLoad);

  function handleFileLoad(event){
   var item = event.item;
   var type = item.type;
   if(createjs.LoadQueue.SOUND === type){
    startSound(item.id);
   }
  }

createjs.Sound.createInstance

  function startSound(soundid){
   var instance = createjs.Sound.createInstance(soundid); // SoundJSのインスタンスを再生(idを指定)
   instance.setVolume(0.1); // 再生時の音量調整
   function doPlay(){
    instance.play();  // 再生
   }
   function doStop(){
    instance.stop();  // 停止
   }
   document.getElementById('play').addEventListener('click',doPlay); // playボタンにdoPlayを割り当てる
   document.getElementById('stop').addEventListener('click',doStop); // stopボタンにdoStopを割り当てる
  }

HTMLに再生と停止のイベントを登録する2つのボタンを用意します

サンプルコード

全部まとめたHTMLはこんな感じ

<html>
<head>
 <script src="./preloadjs-0.3.0.min.js"></script>
 <script src="./soundjs-0.4.0.min.js"></script>
 <script>
  function init(){
   var queue = new createjs.LoadQueue(true);
    queue.installPlugin(createjs.Sound);
   var manifest = [
    {"src":"./bgm.mp3","id":"sound1"}
   ];
   queue.loadManifest(manifest,true);
   queue.addEventListener('fileload',handleFileLoad);
   queue.installPlugin(createjs.Sound);

   function handleFileLoad(event){
    var item = event.item;
    var type = item.type;

    if(createjs.LoadQueue.SOUND === type){
     startSound(item.id);
    }
   }
   function startSound(soundid){
    var instance = createjs.Sound.createInstance(soundid);
    instance.setVolume(0.1);
    function doStop(){
     instance.stop();
    }
    function doPlay(){
     instance.play();
    }
    document.getElementById('stop').addEventListener('click',doStop);
    document.getElementById('play').addEventListener('click',doPlay);
   }
  }
  window.onload = function(){
   init();
  }
 </script>
</head>
<body>
 <input type="button" id="play" value="play">
 <input type="button" id="stop" value="stop">
</body>
</html>

メソッドいろいろ

作成したインスタンスには色々なメソッドが用意されています。play() , stop()以外にも一時停止や再生位置の取得、ミュートなどなどいずれもインスタンスから操作することがでいます。

 var instance = createjs.Sound.createInstance(id);
  instance.play();    // 再生
  instance.stop();    // 停止
  instance.pause();    // 一時停止
  instance.resume();    // 一時停止した場所から再生
  instance.getVolute();   // 現在の音量を取得   (戻り値 Number)
  instance.setVolume(value);  // 音量を設定する  Ex) instance.setVolume(0.5);
  instance.setMute();    // ミュートにする
  instance.getMute();    // ミュート状態かどうかの判定 (戻り値 true/false)
  instance.getPosition();   // 現在の再生位置の取得  (戻り値 Number)
  instance.setPosition(value); // 再生位置の指定
  instance.getDuration();   // 再生時間の取得    (戻り値 Number)

Ex)再生時間の半分の位置を指定する

公式のドキュメントにあるものを紹介します。setPosition()の引数にgetDuration()で取得した値を2で割った値を入れます。

 instance.setPosition(instance.getDuration()/2);

play()に引数を与えて再生を行う

play()メソッドに再生時の初期値として繰り返しの有無やボリュームなどを指定することができます。
現在の仕様だと引数の順番が変えられないため、ボリュームだけを指定したい場合にも、それより前の4つの値を指定する必要があります。
その場合setVolume()を使用したほうがいいかもしれません。

 instance.play([interrupt="none"],[delay=0],[offset=0],[loop=0],[volume=1],[pan=0]);
 // カッコを省略可
 instance.play("none",0,0,0,1,0);
 /* 
  interrupt = "割り込み再生を許すかどうか(?)"
  delay  = "再生を遅らせる。msで指定"
  offset  = "再生位置を指定。msで指定"
  loop   = "ループ回数。-1を指定すると無限ループ"
  volume  = "音量を指定"
  pan   = "左右のどちらに音を振るか(HTML Audioでは動かない?"
 */

おわりに

PreloadJSを読み込む際に指定したidでSoundJSによる再生が行えるので、コード的にもかなりわかりやすく書けるのではないでしょうか。
またSoundJSを利用することでブラウザのAPIに依存しない形でオーディオの再生が行えるのも素敵ですね。

2013年3月11日月曜日

PreloadJS x SoundJSの基本的な使い方