Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Angular meetup #2での資料です

Kenichiro Okada

August 30, 2015
Tweet

More Decks by Kenichiro Okada

Other Decks in Technology

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. ϞδϡϥʔϧʔςΟϯά • ͢΂ͯͷ઀ଓ͸AudioContext಺෦ͰߦΘΕΔ • ιʔεϊʔυʹ͸ೖྗ͕ͳ͍ • σΟεςΟωʔγϣϯϊʔυʹ͸ग़ྗ͕ͳ͍ • σΟεςΟωʔγϣϯϊʔυ͕࠷ऴతͳΦʔσΟΦϋʔ υ΢ΣΞʹͭͳ͕Δ

    • ϑΟϧλͳͲͷϊʔυ͸͜ͷ̎ͭͷؒʹ഑ஔ͢Δ
  17. AudioNode • ೖྗ΍ग़ྗΛ࣋ͭ • ೖྗΛॲཧ͠ɺग़ྗʹΦʔσΟΦ৴߸ΛૹΓ ग़͢ • ग़ྗ͸1ͭҎ্ͷνϟϯωϧΛ࣋ͭ • ෳ਺ͷೖྗʹରͯ͠଍͋͠ΘͤΛߦ͏

  18. ιʔεͱͳΔAudioNode • OscillatorNode
 ʹൃৼثɻपظతͳ೾ܗΛग़ྗɻप೾਺ͱ೾ܗઃఆ͕Ͱ͖Δ • AudioBufferSourceNode
 ʹόοϑΝσʔλΛग़ྗɻ࠶ੜ଎౓ɺϧʔϓઃఆ͕Ͱ͖Δ • MediaElementAudioSourceNode
 ʹaudioλάΛιʔεʹͯ͠ग़ྗɻ

    • MediaStreamAudioSourceNode
 =WebRTCͷMediaStreamΛιʔεʹग़ྗɻϚΠΫ৴߸ͳͲ
  19. AudioContext • Web Audio APIͷى఺ • AudioNodeͷ࡞੒Λ੍ޚ͢Δ • ೖग़ྗ༻ͷAudioNodeͷੜ੒΋͔͜͜Β •

    ҰͭͷΠϯελϯεͰෳ਺ͷೖྗʹରԠͰ͖ Δ
  20. Πϝʔδͣ͠Β͍ ͱࢥͬͨΒ

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

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

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

  24. ܨ͛Δϊʔυͨͪ • ιʔεϊʔυ
 ʹOscillatorNode • ϘϦϡʔϜૢ࡞
 ʹGainNode • σεςΟωʔγϣϯϊʔυ
 ʹAudioDestinationNode

  25. ਤʹ͢Δͱ

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

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

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

  29. ਖ਼ݭ೾ฉ͑ͨ͜ʂ

  30. stopͯ͠࠶౓start

  31. Ͱ͖ͳ͍ʂ

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

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

  34. ݁Ռ

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

  36. ·ͱΊ • Web Audio API͸͢Ͱʹ਺ଟ࣮͘૷ྫ͕͋Δ
 ϥΠϒϥϦ΋زΒ͔͋Δ • AudioContext͕ར༻ͷى఺ʹͳΔ • OscillatorNode͸stopΛ࣮ߦ͢Δͱ࠶ੜ੒͠

    ͯ͋͛Δඞཁ͕͋Δ
  37. ษڧͨ͠৘ใݩ • 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
  38. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ