第4回 CreateJS勉強会 発表資料

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

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

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

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

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

6. サウンドを再生する
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}
};

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

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

9. 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");
createjs.Sound.play("bgm");
}

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

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

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

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

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

15. プラグインを指定する
createjs.Sound.registerPlugins([
createjs.WebAudioPlugin,
createjs.HTMLAudioPlugin,
createjs.FlashPlugin
]);
createjs.Sound.addEventListener("fileload", fileLoadHandler);
createjs.Sound.registerSound("bgm.mp4");
function fileLoadHandler(e) {
createjs.Sound.play(e.src);
};

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

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

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

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

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

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

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

23. 複数のファイル形式を指定する その1
createjs.Sound.addEventListener("fileload", fileLoadHandler);
createjs.Sound.registerSound("bgm.mp4|bgm.wav");
function fileLoadHandler(e) {
createjs.Sound.play(e.src);
};

24. 複数のファイル形式を指定する その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");
createjs.Sound.play("bgm");
}

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

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

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