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

Web Launchpad

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
520
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
210
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
150
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.8k
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
0
930
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
250
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
140
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
340
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
MUSUBIXとは
Avatar for Hisaho nahisaho
0
130

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
240
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
320
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
92
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
120
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
140
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170

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!