Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

複数のサウンドを再生する 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"); };

Slide 9

Slide 9 text

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"); }

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

プラグインを指定する 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); };

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

複数のファイル形式を指定する その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"); }

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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