Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularJSとWeb Audio APIはじめてみました
Search
Kenichiro Okada
August 30, 2015
Technology
0
370
AngularJSとWeb Audio APIはじめてみました
Angular meetup #2での資料です
Kenichiro Okada
August 30, 2015
Tweet
Share
More Decks by Kenichiro Okada
See All by Kenichiro Okada
100%の傾聴を実践する
pastelinc
0
110
組織を変革する最初の一歩に躓いたけど、それはそれで良かった話
pastelinc
1
1.5k
ひとりでも安定して 組織を変える活動を続けていくための ストレスマネジメント
pastelinc
0
2k
慣習から旅立つチーム
pastelinc
0
1.3k
Progressive Web Apps
pastelinc
0
390
AngularJSを通してDockerと触れ合った
pastelinc
0
960
Other Decks in Technology
See All in Technology
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
ビギナーであり続ける/beginning
ikuodanaka
3
760
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What's in a price? How to price your products and services
michaelherold
246
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Balancing Empowerment & Direction
lara
1
430
The Cult of Friendly URLs
andyhume
79
6.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
42k
Optimizing for Happiness
mojombo
379
70k
Transcript
AngularJSͱWeb Audio API ͡ΊͯΈ·ͨ͠
ࣗݾհ
pastelInc ژࡏॅ ࣄͰPHP ΑΖ͓͘͠ئ͍͠·͢
ࠓͷඪ
• Web Audio APIͷϫΫϫΫΛײͯ͡Β͏ • AngularͰ͑Δ͜ͱΛͬͯΒ͏ • Web Audio APIΛҰճ৮Γ͍ͨͱࢥͬͯΒ
͏
Web Audio APIͷ ৺͕༂ΔαʔϏεୡ
X-Sound https://github.com/Korilakkuma/X-Sound
Audio Trackr https://github.com/chrisbateman/Audio-Trackr
ઌͷYAPCʹͯ
WebAudio 300bps FSK modem https://github.com/cho45/WebAudio-Modem http://cho45.stfuawsc.com/WebAudio-Modem/FSK/modem.html
AngularҎ֎ʹͪΖΜ͋Γ·͢ http://chromium.googlecode.com/svn/ trunk/samples/audio/index.html
Web Audio API ͷ͜ͱΛΔ
Web Audio APIͷඪ • WebϕʔεͷήʔϜɺΠϯλϥΫςΟϒͳମ ݧΛఏڙ͢Δ • ϛΩγϯάɺϓϩηγϯάɺϑΟϧλϦϯάॲ ཧػೳΛͨͤΔ
Web Audio APIͷػೳ • ϨΠςϯγʔͳԻͷ࠶ੜ • JavaScriptͰͷΦʔσΟΦετϦʔϜͷ߹ͱՃ • ҟͳΔAudioNodeΛҙʹܨ͛Δػೳ ʢϞδϡϥʔϧʔςΟϯάʣ
• 3DήʔϜΛαϙʔτ͢ΔۭؒԻڹʹυοϓϥʔͱ͔ • ΦγϨʔλʹൃৼث ʢपظੑΛͭ࣋ଓతͳৼಈΛൃੜͤ͞Δஔʣ
ϞδϡϥʔϧʔςΟϯάʁ
ྫ
ϞδϡϥʔϧʔςΟϯά • ͯ͢ͷଓAudioContext෦ͰߦΘΕΔ • ιʔεϊʔυʹೖྗ͕ͳ͍ • σΟεςΟωʔγϣϯϊʔυʹग़ྗ͕ͳ͍ • σΟεςΟωʔγϣϯϊʔυ͕࠷ऴతͳΦʔσΟΦϋʔ υΣΞʹͭͳ͕Δ
• ϑΟϧλͳͲͷϊʔυ͜ͷ̎ͭͷؒʹஔ͢Δ
AudioNode • ೖྗग़ྗΛ࣋ͭ • ೖྗΛॲཧ͠ɺग़ྗʹΦʔσΟΦ৴߸ΛૹΓ ग़͢ • ग़ྗ1ͭҎ্ͷνϟϯωϧΛ࣋ͭ • ෳͷೖྗʹରͯ͋͠͠ΘͤΛߦ͏
ιʔεͱͳΔAudioNode • OscillatorNode ʹൃৼثɻपظతͳܗΛग़ྗɻपͱܗઃఆ͕Ͱ͖Δ • AudioBufferSourceNode ʹόοϑΝσʔλΛग़ྗɻ࠶ੜɺϧʔϓઃఆ͕Ͱ͖Δ • MediaElementAudioSourceNode ʹaudioλάΛιʔεʹͯ͠ग़ྗɻ
• MediaStreamAudioSourceNode =WebRTCͷMediaStreamΛιʔεʹग़ྗɻϚΠΫ৴߸ͳͲ
AudioContext • Web Audio APIͷى • AudioNodeͷ࡞Λ੍ޚ͢Δ • ೖग़ྗ༻ͷAudioNodeͷੜ͔͜͜Β •
ҰͭͷΠϯελϯεͰෳͷೖྗʹରԠͰ͖ Δ
Πϝʔδͣ͠Β͍ ͱࢥͬͨΒ
Web Audio PlayGround https://github.com/cwilso/WebAudio
Web Audio APIͷ ͡Ί͔ͨ in Angular
ࡐ • ਖ਼ݭϓϨΠϠʔ • ؆୯ͳྫͰϞδϡϥʔϧʔςΟϯάΛཧղ͢ Δ • start/stopϘλϯͰൃੜΛίϯτϩʔϧ • ৼ෯ௐઅػೳ͚ͭΔ
ܨ͛Δϊʔυͨͪ • ιʔεϊʔυ ʹOscillatorNode • ϘϦϡʔϜૢ࡞ ʹGainNode • σεςΟωʔγϣϯϊʔυ ʹAudioDestinationNode
ਤʹ͢Δͱ
context • factoryϝιουͰAudioContextΛαʔϏεʹ ొ • ҰΠϯελϯεΛ࡞ͨ͠ΒͦΕ͖ͬΓͰ ͍͍ • AudioContextΛϥοϓͯ͋͛͠Δ͚ͩ
oscillator • ਖ਼ݭΛίϯτϩʔϧ͢ΔαʔϏε • start/stop/volumeΛίϯτϩʔϧͰ͖Δ
player • ΧελϜdirectiveʹ࣮ • ϢʔβʔͷϘλϯΫϦοΫʹ߹ΘͤͯΦγϨʔ λΛ͏
ਖ਼ݭฉ͑ͨ͜ʂ
stopͯ͠࠶start
Ͱ͖ͳ͍ʂ
ͳͥͳΒ • Ұstart→stopͤͨ͞ιʔεϊʔυ࠶ ࡞ͬͯଓͯ͋͛͠ͳ͍ͱ͍͚ͳ͍ • Ұstartͨ͠ιʔεϊʔυʹ࠶startΛ͢Δ ͱΤϥʔͳͷͰ࠶start͢ΔલʹstopΛߦ ͏
Ͳ͏͢Δ͔ • stopͨ͠λΠϛϯάͰ࠶ΦγϨʔλͷ࡞ ɺଓΛߦ͏ • $watchͰϓϨΠϠʔͷ࠶ੜঢ়گΛνΣοΫ͠ ͯstopͨ͠λΠϛϯάʹˢΛߦ͏ • playerʹ࣮ͨ͠
݁Ռ
ࠔͬͨ • GainNodeҎ֎ͷAudioNode͕૿͑ͨͱ͖Ͳ ͏͢Δͷ͔ • start/stopͷνΣοΫdirective?service?Ͳͪ Βʹॻ͘ͷ͔໎ͬͨ • Իָ৴߸ॲཧͷઐ༻ޠ͕ଟͯ͘ΦʔσΟ ΦɺԻʹؔ͢Δ͕ࣝٻΊΒΕΔ
·ͱΊ • Web Audio API͢Ͱʹଟ࣮͘ྫ͕͋Δ ϥΠϒϥϦزΒ͔͋Δ • AudioContext͕ར༻ͷىʹͳΔ • OscillatorNodestopΛ࣮ߦ͢Δͱ࠶ੜ͠
ͯ͋͛Δඞཁ͕͋Δ
ษڧͨ͠ใݩ • 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
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ