実際に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 ...
SoundJSの動作に
canvas要素やEaselJSは不要です。
(もちろん使ってもOK)
複数のサウンドを再生する
createjs.Sound.addEventListener("fileload", fileLoadHandler);
createjs.Sound.registerSound("bgm.mp4", "bgm");...
PreloadJSとの組み合わせ
var queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
queue.addEventListener("c...
サウンドを再生する仕組み
動作原理を理解しよう
ところで、
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
]);
cr...
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を使うとInte...
ファイル形式に注意!
鳴らない、サウンド
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 2...
複数のファイル形式を指定する その1
createjs.Sound.addEventListener("fileload", fileLoadHandler);
createjs.Sound.registerSound("bgm.mp4|bgm...
複数のファイル形式を指定する その2
var queue = new createjs.LoadQueue(false);
queue.installPlugin(createjs.Sound);
queue.addEventListener(...
まとめ
実際にSoundJSを使ってみて分かったこと
まとめ
意外とカンタン
プラグインとファイル形式には注意が必要
モバイルでは時期尚早かもしれない
Thank you !
Photo Credit:
Lst1984
Marco Bellucci
Abdulmajeed
Al.mutawee
Upcoming SlideShare
Loading in …5
×

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

5,636 views

Published on

第4回 CreateJS勉強会 発表資料

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,636
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
15
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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

  1. 1. 実際にSoundJSを 使ってみて分かったこと 沖 良矢(世路庵) 2013.7.26 (Fri) 第4回 CreateJS勉強会
  2. 2. 自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー UNIQLO HAPPY GIFT (2013) Web Designing (2009~)McCANN WG JAPAN (2012)
  3. 3. 今日話すこと SoundJS、基本の「き」 サウンドを再生する仕組み ファイル形式に注意!
  4. 4. SoundJS、基本の「き」 とりあえず音を鳴らしてみよう
  5. 5. SoundJSを 使ったことありますか?
  6. 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. 7. SoundJSの動作に canvas要素やEaselJSは不要です。 (もちろん使ってもOK)
  8. 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. 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. 10. サウンドを再生する仕組み 動作原理を理解しよう
  11. 11. ところで、 SoundJSは どうやって サウンドを 再生しているのでしょう?
  12. 12. SoundJSのプラグイン  HTMLAudioPlugin  WebAudioPlugin  FlashPlugin
  13. 13. SoundJSを支える3つのテクノロジー  <audio>  Web Audio  Flash
  14. 14. つまり、 Webブラウザが audio要素、 Web Audio、 Flash、 のいずれかを サポートしている 必要があります。
  15. 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. 16. audio要素のサポート状況 via. http://caniuse.com
  17. 17. Web Audioのサポート状況 via. http://caniuse.com
  18. 18. Flashのサポート状況 言わなくても 分かりますね
  19. 19. SoundJSのテスト環境  Internet Explorer 9、10  Chrome  Firefox  Safari  Opera  iOS 6以上  Android Chrome ※FlashPluginを使うとInternet Explorer 7、8も動作可能。 ※BlackBerryブラウザでも簡易テストをしています。
  20. 20. ファイル形式に注意! 鳴らない、サウンド
  21. 21. SoundJSが想定しているファイル形式 mp3 ogg mpeg wav m4a mp4 aiff wma mid
  22. 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. 23. 複数のファイル形式を指定する その1 createjs.Sound.addEventListener("fileload", fileLoadHandler); createjs.Sound.registerSound("bgm.mp4|bgm.wav"); function fileLoadHandler(e) { createjs.Sound.play(e.src); };
  24. 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. 25. まとめ 実際にSoundJSを使ってみて分かったこと
  26. 26. まとめ 意外とカンタン プラグインとファイル形式には注意が必要 モバイルでは時期尚早かもしれない
  27. 27. Thank you ! Photo Credit: Lst1984 Marco Bellucci Abdulmajeed Al.mutawee

×