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
380
1

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

More Decks by Orlando Del Aguila

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

Other Decks in Programming

See All in Programming
AI がコードを書く時代における新卒エンジニアの仕事風景 (2026) / New Graduate Engineers in the Era of AI Coding (2026)
Avatar for sushichan044 sushichan044
0
200
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
1k
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
300
SREは、MCPとSRE Agentをこう使え！
Avatar for kazumax55 kazumax55
0
130
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
4
1.6k
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
Avatar for TomoyaKitaura tomoyakitaura
7
1k
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
980
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
830
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
Avatar for kotetu (kotetuco) kotetuco
0
160
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
350
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
1
240
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
1
250

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
510
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.6k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
220
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
180
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
170
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
610
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
500
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k

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!