実際にSoundJSを使ってみて分かったこと
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 2,602 views

第4回 CreateJS勉強会 発表資料

第4回 CreateJS勉強会 発表資料

Statistics

Views

Total Views
2,602
Views on SlideShare
2,596
Embed Views
6

Actions

Likes
7
Downloads
7
Comments
0

2 Embeds 6

https://twitter.com 3
https://kcw.kddi.ne.jp 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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