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

第4回 CreateJS勉強会 発表資料

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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以外は基本的に最新バージョンを想定。
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide