preloadjsとsoundjsの使い方メモ

, ,

createjsは「Flasherのためのーー」とか言われてるから、easeljsとか使わなくちゃpreloadjssoundjsも使えないと思ってる人がいるが、全然そんなことありません。単体で使えます。超便利です。

いつも使うたびにググっちゃってるからそれを直すためメモ。


// 使用ライブラリ
// http://code.createjs.com/preloadjs-0.3.1.min.js
// http://code.createjs.com/soundjs-0.4.1.min.js

// プリロードしたいファイルを記述
var manifest = [
    { src: 'images/1.jpg' },
    { src: 'images/2.jpg' },
    { src: 'images/3.jpg' },
    { src: 'sound/hoge.mp3|hoge.wav', id: 'hoge'}
];

// インスタンス作成
var preload = new createjs.LoadQueue(false);

var i   = 0,
    len = manifest.length,
    percent = $('#percent')[0]; // パーセンテージを表示するためのDOM

// ファイルを読み込むたびに呼ばれるメソッド
// パーセンテージとか表示したい時に使う
preload.onProgress = function() {
    i++;
    percent.innerText = Math.floor(((i / len) * 100) / 2) + '%';
};

// すべてのファイルが読み込み終わったら呼ばれるメソッド
preload.onComplete = function() {
    // ローディング画面を消す(ここは必要に応じて)
    $('#loading').fadeOut(120);
};

// soundjsを使うための記述
preload.installPlugin(createjs.Sound);

// manifestファイルを引数に入れて、読み込みを開始
preload.loadManifest(manifest);