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

Web Launchpad

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Orlando Del Aguila Orlando Del Aguila
October 23, 2015
Programming
1
350

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
100
Web APIs 2019
Avatar for Orlando Del Aguila orlando
0
150
Managing remote teams
Avatar for Orlando Del Aguila orlando
0
77
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
390
Talking Web Apps
Avatar for Orlando Del Aguila orlando
0
130
Web Launchpad - Chelajs
Avatar for Orlando Del Aguila orlando
0
250

Other Decks in Programming

See All in Programming
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
200
AWS Infrastructure as Code の新機能 2025 総まとめ 〜SA 4人による怒涛のデモ祭り〜
Avatar for Kenji Kono konokenj
10
3.4k
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.5k
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.1k
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
270
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
230
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
210
AIコードレビューの導入・運用と AI駆動開発における「AI4QA」の取り組みについて
Avatar for ハゲワシ hagevvashi
0
510
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1.1k
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
280
[SF Ruby Feb'26] The Silicon Heel
Avatar for Vladimir Dementyev palkan
0
120
ポーリング処理廃止によるイベント駆動アーキテクチャへの移行
Avatar for Seitaro Fujigaki seitarof
3
1.1k

Featured

See All Featured
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
320
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
200
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.1k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
690
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
140
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
270
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
290
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k

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!