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
330

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
90
Web APIs 2019
Avatar for Orlando Del Aguila orlando
0
140
Managing remote teams
Avatar for Orlando Del Aguila orlando
0
71
How to be a Senior Software Engineer
Avatar for Orlando Del Aguila orlando
0
150
Terraform Workshop
Avatar for Orlando Del Aguila orlando
1
160
Infrastructure as Code with Terraform
Avatar for Orlando Del Aguila orlando
0
290
Concurrencia, Paralelismo y el Event-loop
Avatar for Orlando Del Aguila orlando
0
360
Talking Web Apps
Avatar for Orlando Del Aguila orlando
0
110
Web Launchpad - Chelajs
Avatar for Orlando Del Aguila orlando
0
220

Other Decks in Programming

See All in Programming
AIを駆使して新しい技術を効率的に理解する方法
Avatar for nogu nogu66
1
660
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
Avatar for Shunsuke KITADA shunk031
11
5.8k
Level up your Gemini CLI - D&D Style!
Avatar for Riccardo Carlesso palladius
1
110
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
5.8k
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
Avatar for Matsumoto Moeka moeka__c
5
2.2k
Developing Specifications - Jakarta EE: a Real World Example
Avatar for ivargrimstad ivargrimstad
0
190
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Micro Frontendsで築いた 共通基盤と運用の試行錯誤 / Building a Shared Platform with Micro Frontends: Operational Learnings
Avatar for Yuto Kaneko kyntk
0
130
モビリティSaaSにおけるデータ利活用の発展
Avatar for Nealle nealle
1
620
ゼロダウンタイムでミドルウェアの バージョンアップを実現した手法と課題
Avatar for つっつん wind111
0
210
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
Avatar for Maple fuuki12
0
100
AIの弱点、やっぱりプログラミングは人間が(も)勉強しよう / YAPC AI and Programming
Avatar for Naoki Kishida kishida
13
5.3k

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
970
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
192
59k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Done Done
Avatar for chrislema chrislema
186
16k

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!