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
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
220
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.3k
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
130
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
120
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
189
11k
RailsConf 2023
tenderlove
30
1.1k
Speed Design
sergeychernyshev
32
1k
How to Ace a Technical Interview
jacobian
278
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fireside Chat
paigeccino
37
3.5k
Writing Fast Ruby
sferik
628
62k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Invisible Side of Design
smashingmag
301
51k
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
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ