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

Angular meetup #2での資料です

Transcript

1. AngularJSͱWeb Audio API ͸͡ΊͯΈ·ͨ͠
2. ࣗݾ঺հ
3. pastelInc ژ౎ࡏॅ ࢓ࣄͰ͸PHP ΑΖ͓͘͠ئ͍͠·͢
4. ࠓ೔ͷ໨ඪ
5. • Web Audio APIͷϫΫϫΫΛײͯ͡΋Β͏ • AngularͰ΋࢖͑Δ͜ͱΛ஌ͬͯ΋Β͏ • Web Audio APIΛҰճ৮Γ͍ͨͱࢥͬͯ΋Β ͏
6. Web Audio APIͷ ৺͕༂ΔαʔϏεୡ
7. X-Sound https://github.com/Korilakkuma/X-Sound
8. Audio Trackr https://github.com/chrisbateman/Audio-Trackr
9. ઌ೔ͷYAPCʹͯ
10. WebAudio 300bps FSK modem https://github.com/cho45/WebAudio-Modem http://cho45.stfuawsc.com/WebAudio-Modem/FSK/modem.html
11. AngularҎ֎ʹ΋΋ͪΖΜ͋Γ·͢ http://chromium.googlecode.com/svn/ trunk/samples/audio/index.html
12. Web Audio API ͷ͜ͱΛ஌Δ
13. Web Audio APIͷ໨ඪ • WebϕʔεͷήʔϜɺΠϯλϥΫςΟϒͳମ ݧΛఏڙ͢Δ • ϛΩγϯάɺϓϩηγϯάɺϑΟϧλϦϯάॲ ཧػೳΛ΋ͨͤΔ
14. Web Audio APIͷػೳ • ௿ϨΠςϯγʔͳԻͷ࠶ੜ • JavaScriptͰͷΦʔσΟΦετϦʔϜͷ߹੒ͱՃ޻ • ҟͳΔAudioNodeΛ೚ҙʹܨ͛Δػೳ
 ʢϞδϡϥʔϧʔςΟϯάʣ • 3DήʔϜΛαϙʔτ͢ΔۭؒԻڹʹυοϓϥʔͱ͔ • ΦγϨʔλʹൃৼث
 ʢपظੑΛ΋ͭ࣋ଓతͳৼಈΛൃੜͤ͞Δ૷ஔʣ
15. ϞδϡϥʔϧʔςΟϯάʁ
16. ྫ
17. ϞδϡϥʔϧʔςΟϯά • ͢΂ͯͷ઀ଓ͸AudioContext಺෦ͰߦΘΕΔ • ιʔεϊʔυʹ͸ೖྗ͕ͳ͍ • σΟεςΟωʔγϣϯϊʔυʹ͸ग़ྗ͕ͳ͍ • σΟεςΟωʔγϣϯϊʔυ͕࠷ऴతͳΦʔσΟΦϋʔ υ΢ΣΞʹͭͳ͕Δ • ϑΟϧλͳͲͷϊʔυ͸͜ͷ̎ͭͷؒʹ഑ஔ͢Δ
18. AudioNode • ೖྗ΍ग़ྗΛ࣋ͭ • ೖྗΛॲཧ͠ɺग़ྗʹΦʔσΟΦ৴߸ΛૹΓ ग़͢ • ग़ྗ͸1ͭҎ্ͷνϟϯωϧΛ࣋ͭ • ෳ਺ͷೖྗʹରͯ͠଍͋͠ΘͤΛߦ͏
19. ιʔεͱͳΔAudioNode • OscillatorNode
 ʹൃৼثɻपظతͳ೾ܗΛग़ྗɻप೾਺ͱ೾ܗઃఆ͕Ͱ͖Δ • AudioBufferSourceNode
 ʹόοϑΝσʔλΛग़ྗɻ࠶ੜ଎౓ɺϧʔϓઃఆ͕Ͱ͖Δ • MediaElementAudioSourceNode
 ʹaudioλάΛιʔεʹͯ͠ग़ྗɻ • MediaStreamAudioSourceNode
 =WebRTCͷMediaStreamΛιʔεʹग़ྗɻϚΠΫ৴߸ͳͲ
20. AudioContext • Web Audio APIͷى఺ • AudioNodeͷ࡞੒Λ੍ޚ͢Δ • ೖग़ྗ༻ͷAudioNodeͷੜ੒΋͔͜͜Β • ҰͭͷΠϯελϯεͰෳ਺ͷೖྗʹରԠͰ͖ Δ
21. Πϝʔδͣ͠Β͍ ͱࢥͬͨΒ
22. Web Audio PlayGround https://github.com/cwilso/WebAudio
23. Web Audio APIͷ ͸͡Ί͔ͨ in Angular
24. ୊ࡐ • ਖ਼ݭ೾ϓϨΠϠʔ • ؆୯ͳྫͰϞδϡϥʔϧʔςΟϯάΛཧղ͢ Δ • start/stopϘλϯͰൃੜΛίϯτϩʔϧ • ৼ෯ௐઅػೳ΋͚ͭΔ
25. ܨ͛Δϊʔυͨͪ • ιʔεϊʔυ
 ʹOscillatorNode • ϘϦϡʔϜૢ࡞
 ʹGainNode • σεςΟωʔγϣϯϊʔυ
 ʹAudioDestinationNode
26. ਤʹ͢Δͱ
27. context • factoryϝιουͰAudioContextΛαʔϏεʹ ొ࿥ • Ұ౓ΠϯελϯεΛ࡞੒ͨ͠ΒͦΕ͖ͬΓͰ ͍͍ • AudioContextΛϥοϓͯ͋͛͠Δ͚ͩ
28. oscillator • ਖ਼ݭ೾Λίϯτϩʔϧ͢ΔαʔϏε • start/stop/volumeΛίϯτϩʔϧͰ͖Δ
29. player • ΧελϜdirectiveʹ࣮૷ • ϢʔβʔͷϘλϯΫϦοΫʹ߹ΘͤͯΦγϨʔ λΛ࢖͏
30. ਖ਼ݭ೾ฉ͑ͨ͜ʂ
31. stopͯ͠࠶౓start
32. Ͱ͖ͳ͍ʂ
33. ͳͥͳΒ • Ұ౓start→stopͤͨ͞ιʔεϊʔυ͸࠶౓ ࡞ͬͯ઀ଓͯ͋͛͠ͳ͍ͱ͍͚ͳ͍ • Ұ౓startͨ͠ιʔεϊʔυʹ࠶౓startΛ͢Δ ͱΤϥʔͳͷͰ࠶౓start͢Δલʹ͸stopΛߦ ͏
34. Ͳ͏͢Δ͔ • stopͨ͠λΠϛϯάͰ࠶౓ΦγϨʔλͷ࡞ ੒ɺ઀ଓΛߦ͏ • $watchͰϓϨΠϠʔͷ࠶ੜঢ়گΛνΣοΫ͠ ͯstopͨ͠λΠϛϯάʹˢΛߦ͏ • playerʹ࣮૷ͨ͠
35. ݁Ռ
36. ࠔͬͨ໰୊ • GainNodeҎ֎ͷAudioNode͕૿͑ͨͱ͖Ͳ ͏͢Δͷ͔ • start/stopͷνΣοΫ͸directive?service?Ͳͪ Βʹॻ͘ͷ͔໎ͬͨ • Իָ΍৴߸ॲཧͷઐ໳༻ޠ͕ଟͯ͘ΦʔσΟ ΦɺԻ೾ʹؔ͢Δ஌͕ࣝٻΊΒΕΔ
37. ·ͱΊ • Web Audio API͸͢Ͱʹ਺ଟ࣮͘૷ྫ͕͋Δ
 ϥΠϒϥϦ΋زΒ͔͋Δ • AudioContext͕ར༻ͷى఺ʹͳΔ • OscillatorNode͸stopΛ࣮ߦ͢Δͱ࠶ੜ੒͠ ͯ͋͛Δඞཁ͕͋Δ
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
39. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ