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
Autify Company Deck
autifyhq
2
44k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
無理しない AI 活用サービス / #jazug
koudaiii
0
100
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Automating Front-end Workflow
addyosmani
1370
200k
What's in a price? How to price your products and services
michaelherold
246
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Done Done
chrislema
184
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
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
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ