Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
190
Infrastructure as Code with Terraform
Avatar for Orlando Del Aguila orlando
0
340
Concurrencia, Paralelismo y el Event-loop
Avatar for Orlando Del Aguila orlando
0
410
Talking Web Apps
Avatar for Orlando Del Aguila orlando
0
150
Web Launchpad - Chelajs
Avatar for Orlando Del Aguila orlando
0
260

Other Decks in Programming

See All in Programming
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
180
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
460
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
120
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
Avatar for 赤神青空 akagami
PRO
0
150
週末にAI-DLCを本気で回したら$1,600溶けた
Avatar for Atsushi Shimizu hbashimizu
0
130
VueプロジェクトをTypeScript7に対応させる- Side-by-Side戦略による一部高速化 -
Avatar for kouki.miura koukimiura
0
100
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
180
AI × TiDD / 2026.09.05 Redmine 大阪
Avatar for tokudiro tokudiro
1
150
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
150
ハーネス設計入門 〜プロンプト、コンテキストの次〜
Avatar for kinopee kinopeee
56
38k
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
Avatar for SlashNephy slashnephy
0
230
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
0
980

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Side Projects
Avatar for Sacha Greif sachag
456
43k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
240
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
330
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
420
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
560
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
450

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!