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

Web Launchpad

Avatar for Orlando Del Aguila Orlando Del Aguila
October 23, 2015
Programming
1
340

Web Launchpad

Using Web Audio API and Web MIDI API to sample with a Novation Launchpad in the Browser

Avatar for Orlando Del Aguila

Orlando Del Aguila

October 23, 2015
Tweet

More Decks by Orlando Del Aguila

See All by Orlando Del Aguila
Open Source + Nonprofits = 💪
Avatar for Orlando Del Aguila orlando
0
98
Web APIs 2019
Avatar for Orlando Del Aguila orlando
0
150
Managing remote teams
Avatar for Orlando Del Aguila orlando
0
72
How to be a Senior Software Engineer
Avatar for Orlando Del Aguila orlando
0
150
Terraform Workshop
Avatar for Orlando Del Aguila orlando
1
170
Infrastructure as Code with Terraform
Avatar for Orlando Del Aguila orlando
0
310
Concurrencia, Paralelismo y el Event-loop
Avatar for Orlando Del Aguila orlando
0
380
Talking Web Apps
Avatar for Orlando Del Aguila orlando
0
120
Web Launchpad - Chelajs
Avatar for Orlando Del Aguila orlando
0
240

Other Decks in Programming

See All in Programming
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
150
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.5k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
660
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
800
CSC307 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
570
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
240
Rails Girls Tokyo 18th GMO Pepabo Sponsor Talk
Avatar for Yuto Kondo yutokyokutyo
0
110
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
330
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2.1k
Head of Engineeringが現場で回した生産性向上施策 2025→2026
Avatar for gessy0129 gessy0129
PRO
0
140
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
190

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
It's Worth the Effort
Avatar for 3n 3n
188
29k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
290
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
250
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
490

Transcript

  1. Web Launchpad

  2. None

  3. orlando.delagui.la hashlabs.com eatcodetravel.com

  4. Web Launchpad

  5. Web MIDI API + Web Audio API

  6. Web MIDI API

  7. None

  8. and Opera

  9. Web Audio API

  10. None
  11. None

  12. Web Audio API

  13. AudioContext

  14. .decodeAudioData() .createBufferSource()

  15. Web MIDI API

  16. MIDIAccess

  17. .inputs() .outputs() onstatechange

  18. MIDIInputMap

  19. value.onmidimessage

  20. [144, 10, 127]

  21. [144, 10, 127] channel key note

  22. [144, 10, 0] channel key note

  23. ♥

  24. Demo

  25. Resources

  26. orlando/web-launchpad

  27. developer.mozilla.org html5rocks.com

  28. Thanks!