Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
実際にSoundJSを使ってみて分かったこと
448jp | OKI Yoshiya
July 29, 2013
Programming
1
2.9k
実際にSoundJSを使ってみて分かったこと
第4回 CreateJS勉強会 発表資料
448jp | OKI Yoshiya
July 29, 2013
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
448jp
0
63
448jp
1
170
448jp
3
980
448jp
2
1.2k
448jp
3
1.5k
448jp
2
460
448jp
1
870
448jp
0
90
448jp
0
520
Other Decks in Programming
See All in Programming
mizzsugar
1
220
mihyaeru21
0
370
satoshun
0
110
kanga333
0
110
mackee
0
660
grapecity_dev
0
190
aftiopk
0
100
grapecity_dev
1
210
joergneumann
0
130
andpad
3
290
meemeelab
0
310
minamijoyo
3
520
Featured
See All Featured
trallard
14
720
ufuk
56
5.4k
sugarenia
233
860k
robhawkes
52
2.8k
nonsquared
81
3.4k
tenderlove
53
3.5k
lauravandoore
10
1.6k
phodgson
87
3.9k
bryan
100
11k
shpigford
369
42k
bkeepers
408
58k
maltzj
502
36k
Transcript
実際に 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.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"); };
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"); }
サウンドを再生する仕組み 動作原理を理解しよう
ところで、 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.addEventListener("fileload", fileLoadHandler); createjs.Sound.registerSound("bgm.mp4"); function
fileLoadHandler(e) { createjs.Sound.play(e.src); };
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.addEventListener("fileload", fileLoadHandler); createjs.Sound.registerSound("bgm.mp4|bgm.wav"); function fileLoadHandler(e) { createjs.Sound.play(e.src); };
複数のファイル形式を指定する その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"); }
まとめ 実際にSoundJSを使ってみて分かったこと
まとめ 意外とカンタン プラグインとファイル形式には注意が必要 モバイルでは時期尚早かもしれない
Thank you ! Photo Credit: Lst1984 Marco Bellucci Abdulmajeed Al.mutawee