AngularJSとWeb Audio APIはじめてみました

Angular meetup #2での資料です

Transcript

1. AngularJSͱWeb Audio API
   ͸͡ΊͯΈ·ͨ͠
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. pastelInc
   ژ౎ࡏॅ
   ࢓ࣄͰ͸PHP
   ΑΖ͓͘͠ئ͍͠·͢
   

   View Slide

4. ࠓ೔ͷ໨ඪ
   

   View Slide

5. • Web Audio APIͷϫΫϫΫΛײͯ͡΋Β͏
   • AngularͰ΋࢖͑Δ͜ͱΛ஌ͬͯ΋Β͏
   • Web Audio APIΛҰճ৮Γ͍ͨͱࢥͬͯ΋Β
   ͏
   

   View Slide

6. Web Audio APIͷ
   ৺͕༂ΔαʔϏεୡ
   

   View Slide

7. X-Sound
   https://github.com/Korilakkuma/X-Sound
   

   View Slide

8. Audio Trackr
   https://github.com/chrisbateman/Audio-Trackr
   

   View Slide

9. ઌ೔ͷYAPCʹͯ
   

   View Slide

10. WebAudio 300bps FSK
    modem
    https://github.com/cho45/WebAudio-Modem
    http://cho45.stfuawsc.com/WebAudio-Modem/FSK/modem.html
    

    View Slide

11. AngularҎ֎ʹ΋΋ͪΖΜ͋Γ·͢
    http://chromium.googlecode.com/svn/
    trunk/samples/audio/index.html
    

    View Slide

12. Web Audio API
    ͷ͜ͱΛ஌Δ
    

    View Slide

13. Web Audio APIͷ໨ඪ
    • WebϕʔεͷήʔϜɺΠϯλϥΫςΟϒͳମ
    ݧΛఏڙ͢Δ
    • ϛΩγϯάɺϓϩηγϯάɺϑΟϧλϦϯάॲ
    ཧػೳΛ΋ͨͤΔ
    

    View Slide

14. Web Audio APIͷػೳ
    • ௿ϨΠςϯγʔͳԻͷ࠶ੜ
    • JavaScriptͰͷΦʔσΟΦετϦʔϜͷ߹੒ͱՃ޻
    • ҟͳΔAudioNodeΛ೚ҙʹܨ͛Δػೳ

    ʢϞδϡϥʔϧʔςΟϯάʣ
    • 3DήʔϜΛαϙʔτ͢ΔۭؒԻڹʹυοϓϥʔͱ͔
    • ΦγϨʔλʹൃৼث

    ʢपظੑΛ΋ͭ࣋ଓతͳৼಈΛൃੜͤ͞Δ૷ஔʣ
    

    View Slide

15. ϞδϡϥʔϧʔςΟϯάʁ
    

    View Slide

16. ྫ
    

    View Slide

17. ϞδϡϥʔϧʔςΟϯά
    • ͢΂ͯͷ઀ଓ͸AudioContext಺෦ͰߦΘΕΔ
    • ιʔεϊʔυʹ͸ೖྗ͕ͳ͍
    • σΟεςΟωʔγϣϯϊʔυʹ͸ग़ྗ͕ͳ͍
    • σΟεςΟωʔγϣϯϊʔυ͕࠷ऴతͳΦʔσΟΦϋʔ
    υ΢ΣΞʹͭͳ͕Δ
    • ϑΟϧλͳͲͷϊʔυ͸͜ͷ̎ͭͷؒʹ഑ஔ͢Δ
    

    View Slide

18. AudioNode
    • ೖྗ΍ग़ྗΛ࣋ͭ
    • ೖྗΛॲཧ͠ɺग़ྗʹΦʔσΟΦ৴߸ΛૹΓ
    ग़͢
    • ग़ྗ͸1ͭҎ্ͷνϟϯωϧΛ࣋ͭ
    • ෳ਺ͷೖྗʹରͯ͠଍͋͠ΘͤΛߦ͏
    

    View Slide

19. ιʔεͱͳΔAudioNode
    • OscillatorNode

    ʹൃৼثɻपظతͳ೾ܗΛग़ྗɻप೾਺ͱ೾ܗઃఆ͕Ͱ͖Δ
    • AudioBufferSourceNode

    ʹόοϑΝσʔλΛग़ྗɻ࠶ੜ଎౓ɺϧʔϓઃఆ͕Ͱ͖Δ
    • MediaElementAudioSourceNode

    ʹaudioλάΛιʔεʹͯ͠ग़ྗɻ
    • MediaStreamAudioSourceNode

    =WebRTCͷMediaStreamΛιʔεʹग़ྗɻϚΠΫ৴߸ͳͲ
    

    View Slide

20. AudioContext
    • Web Audio APIͷى఺
    • AudioNodeͷ࡞੒Λ੍ޚ͢Δ
    • ೖग़ྗ༻ͷAudioNodeͷੜ੒΋͔͜͜Β
    • ҰͭͷΠϯελϯεͰෳ਺ͷೖྗʹରԠͰ͖
    Δ
    

    View Slide

21. Πϝʔδͣ͠Β͍
    ͱࢥͬͨΒ
    

    View Slide

22. Web Audio PlayGround
    https://github.com/cwilso/WebAudio
    

    View Slide

23. Web Audio APIͷ
    ͸͡Ί͔ͨ
    in Angular
    

    View Slide

24. ୊ࡐ
    • ਖ਼ݭ೾ϓϨΠϠʔ
    • ؆୯ͳྫͰϞδϡϥʔϧʔςΟϯάΛཧղ͢
    Δ
    • start/stopϘλϯͰൃੜΛίϯτϩʔϧ
    • ৼ෯ௐઅػೳ΋͚ͭΔ
    

    View Slide

25. ܨ͛Δϊʔυͨͪ
    • ιʔεϊʔυ

    ʹOscillatorNode
    • ϘϦϡʔϜૢ࡞

    ʹGainNode
    • σεςΟωʔγϣϯϊʔυ

    ʹAudioDestinationNode
    

    View Slide

26. ਤʹ͢Δͱ
    

    View Slide

27. context
    • factoryϝιουͰAudioContextΛαʔϏεʹ
    ొ࿥
    • Ұ౓ΠϯελϯεΛ࡞੒ͨ͠ΒͦΕ͖ͬΓͰ
    ͍͍
    • AudioContextΛϥοϓͯ͋͛͠Δ͚ͩ
    

    View Slide

28. oscillator
    • ਖ਼ݭ೾Λίϯτϩʔϧ͢ΔαʔϏε
    • start/stop/volumeΛίϯτϩʔϧͰ͖Δ
    

    View Slide

29. player
    • ΧελϜdirectiveʹ࣮૷
    • ϢʔβʔͷϘλϯΫϦοΫʹ߹ΘͤͯΦγϨʔ
    λΛ࢖͏
    

    View Slide

30. ਖ਼ݭ೾ฉ͑ͨ͜ʂ
    

    View Slide

31. stopͯ͠࠶౓start
    

    View Slide

32. Ͱ͖ͳ͍ʂ
    

    View Slide

33. ͳͥͳΒ
    • Ұ౓start→stopͤͨ͞ιʔεϊʔυ͸࠶౓
    ࡞ͬͯ઀ଓͯ͋͛͠ͳ͍ͱ͍͚ͳ͍
    • Ұ౓startͨ͠ιʔεϊʔυʹ࠶౓startΛ͢Δ
    ͱΤϥʔͳͷͰ࠶౓start͢Δલʹ͸stopΛߦ
    ͏
    

    View Slide

34. Ͳ͏͢Δ͔
    • stopͨ͠λΠϛϯάͰ࠶౓ΦγϨʔλͷ࡞
    ੒ɺ઀ଓΛߦ͏
    • $watchͰϓϨΠϠʔͷ࠶ੜঢ়گΛνΣοΫ͠
    ͯstopͨ͠λΠϛϯάʹˢΛߦ͏
    • playerʹ࣮૷ͨ͠
    

    View Slide

35. ݁Ռ
    

    View Slide

36. ࠔͬͨ໰୊
    • GainNodeҎ֎ͷAudioNode͕૿͑ͨͱ͖Ͳ
    ͏͢Δͷ͔
    • start/stopͷνΣοΫ͸directive?service?Ͳͪ
    Βʹॻ͘ͷ͔໎ͬͨ
    • Իָ΍৴߸ॲཧͷઐ໳༻ޠ͕ଟͯ͘ΦʔσΟ
    ΦɺԻ೾ʹؔ͢Δ஌͕ࣝٻΊΒΕΔ
    

    View Slide

37. ·ͱΊ
    • Web Audio API͸͢Ͱʹ਺ଟ࣮͘૷ྫ͕͋Δ

    ϥΠϒϥϦ΋زΒ͔͋Δ
    • AudioContext͕ར༻ͷى఺ʹͳΔ
    • OscillatorNode͸stopΛ࣮ߦ͢Δͱ࠶ੜ੒͠
    ͯ͋͛Δඞཁ͕͋Δ
    

    View Slide

38. ษڧͨ͠৘ใݩ
    • https://webmusicdevelopers.appspot.com/
    codelabs/webaudio/index.html?ja-jp
    • http://g200kg.github.io/web-audio-api-ja/
    • http://mmckegg.github.io/web-audio-school/
    • http://qiita.com/mohayonao/items/
    d79e9fc56b4e9c157be1
    

    View Slide

39. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide