実際にSoundJSを使ってみて分かったこと

実際にSoundJSを
使ってみて分かったこと
沖良矢（世路庵）
2013.7.26 (Fri)
第4回 CreateJS勉強会

自己紹介
沖良矢 / OKI Yoshiya
@448jp
インタラクションデザイナー
UNIQLO HAPPY GIFT (2013) Web Designing (2009～)McCANN WG JAPAN (2012)

今日話すこと
SoundJS、基本の「き」
サウンドを再生する仕組み
ファイル形式に注意！

SoundJS、基本の「き」
とりあえず音を鳴らしてみよう

SoundJSを
使ったことありますか？

サウンドを再生する
createjs.Sound.addEventListener("fileload", fileLoadHandler);
createjs.Sound.registerSound("bgm.mp4");
function fileLoadHandler(e) {
createjs.Sound.play(e.src);
console.log(e); // {target: function, type: "fileload", src: "bgm.mp4", id: undefined,
data: 2}
};

SoundJSの動作に
canvas要素やEaselJSは不要です。
（もちろん使ってもOK）

複数のサウンドを再生する
createjs.Sound.registerSound("bgm.mp4", "bgm");
createjs.Sound.registerSound("se.mp3", "se");
createjs.Sound.play("bgm");
//createjs.Sound.play("se");
};

PreloadJSとの組み合わせ
var queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
queue.addEventListener("complete", handler);
var manifest = [
{src: "bgm.mp4", id: "bgm"},
{src: "se.mp3", id: "se"}
];
queue.loadManifest(manifest);
function handler(e) {
queue.removeEventListener("complete");
}

サウンドを再生する仕組み
動作原理を理解しよう

ところで、
SoundJSは
どうやって
サウンドを
再生しているのでしょう？

SoundJSのプラグイン
 HTMLAudioPlugin
 WebAudioPlugin
 FlashPlugin

SoundJSを支える3つのテクノロジー
 <audio>
 Web Audio
 Flash

つまり、
Webブラウザが
audio要素、
Web Audio、
Flash、
のいずれかを
サポートしている
必要があります。

プラグインを指定する
createjs.Sound.registerPlugins([
createjs.WebAudioPlugin,
createjs.HTMLAudioPlugin,
createjs.FlashPlugin
]);
createjs.Sound.registerSound("bgm.mp4");
};

audio要素のサポート状況
via. http://caniuse.com

Web Audioのサポート状況
via. http://caniuse.com

Flashのサポート状況
言わなくても
分かりますね

SoundJSのテスト環境
 Internet Explorer 9、10
 Chrome
 Firefox
 Safari
 Opera
 iOS 6以上
 Android Chrome
※FlashPluginを使うとInternet Explorer 7、8も動作可能。
※BlackBerryブラウザでも簡易テストをしています。

ファイル形式に注意！
鳴らない、サウンド

SoundJSが想定しているファイル形式
mp3
ogg
mpeg
wav
m4a
mp4
aiff
wma
mid

ファイル形式のサポート状況
Webブラウザ MP3 WAV PCM WebM Vorbis AAC Ogg Vorbis
Internet Explorer 9 × × 9 ×
Google Chrome ○ ○ ○ ○ ○
Firefox 21 & Win ○ ○ 21 & Win ○
Opera ○ ○ ○ ○ ○
Safari ○ ○ × ○ ○
※Internet Explorer以外は基本的に最新バージョンを想定。

複数のファイル形式を指定するその1
createjs.Sound.registerSound("bgm.mp4|bgm.wav");
};

複数のファイル形式を指定するその2
var queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
queue.addEventListener("complete",
handler);
var manifest = [
{src: "bgm.mp4", id: "bgm"},
{src: "bgm.wav", id: "bgm"},
{src: "se.mp3", id: "se"},
{src: "se.wav", id: "se"}
];
queue.loadManifest(manifest);
function handler(e) {
queue.removeEventListener("complete");
}

まとめ
実際にSoundJSを使ってみて分かったこと

まとめ
意外とカンタン
プラグインとファイル形式には注意が必要
モバイルでは時期尚早かもしれない

Thank you !
Photo Credit:
Lst1984
Marco Bellucci
Abdulmajeed
Al.mutawee

実際にSoundJSを使ってみて分かったこと

More Related Content

実際にSoundJSを使ってみて分かったこと