$30 off During Our Annual Pro Sale. View Details »

Web Launchpad

Orlando Del Aguila
October 23, 2015
Programming
1
260

Web Launchpad

Using Web Audio API and Web MIDI API to sample with a Novation Launchpad in the Browser

Orlando Del Aguila

October 23, 2015
Tweet

More Decks by Orlando Del Aguila

See All by Orlando Del Aguila
Open Source + Nonprofits = 💪
orlando
0
45
Web APIs 2019
orlando
0
73
Managing remote teams
orlando
0
45
How to be a Senior Software Engineer
orlando
0
89
Terraform Workshop
orlando
1
110
Infrastructure as Code with Terraform
orlando
0
250
Concurrencia, Paralelismo y el Event-loop
orlando
0
270
Talking Web Apps
orlando
0
43
Web Launchpad - Chelajs
orlando
0
150

Other Decks in Programming

See All in Programming
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
yuhei_fujita
6
2.6k
個人から始める開発生産性向上
takamin55
1
220
ChatGPTをソフトウェア開発に活用する
fbei_ot
0
140
状態設計から「なんとなく」を無くそう
qnighy
0
200
クソアプリを作ってみた💩 / kusojaku
uhooi
0
180
Scala Left Fold Parallelisation - Three Approaches
philipschwarz
PRO
0
280
安心してリリース！〜Blue/Greenデプロイ戦略の実体験〜 - NIFTY Tech Day 2023
niftycorp
0
140
10年モノのAndroidアプリのコード品質を改善していく、3つの取り組み
okuzawats
0
660
アクセシビリティを理解するとフロントエンドのテストが楽になる！
nano72mkn
1
1.9k
supabaseとSvelteKitで作るバックエンドレスなサーバーレスWebサイト / Creating with supabase and SvelteKit Backend-less serverless websites
seike460
PRO
3
1.8k
文化祭入退場システムCracker (at U-22プログラミング・コンテスト)
pocopota
0
130
アーキテクチャ刷新の現場 / Scene of architectural renewal
nrslib
6
890

Featured

See All Featured
A Philosophy of Restraint
colly
194
15k
Happy Clients
brianwarren
91
6.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
53
33k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
52
19k
Music & Morning Musume
bryan
38
5.2k
Automating Front-end Workflow
addyosmani
1354
200k
The Language of Interfaces
destraynor
149
22k
Web development in the modern age
philhawksworth
201
9.9k
Being A Developer After 40
akosma
52
580k
Git: the NoSQL Database
bkeepers
PRO
420
62k
Large-scale JavaScript Application Architecture
addyosmani
501
110k

Transcript

  1. Web Launchpad

    View Slide

  2. View Slide

  3. orlando.delagui.la
    hashlabs.com
    eatcodetravel.com

    View Slide

  4. Web Launchpad

    View Slide

  5. Web MIDI API
    +
    Web Audio API

    View Slide

  6. Web MIDI API

    View Slide

  7. View Slide

  8. and Opera

    View Slide

  9. Web Audio API

    View Slide

  10. View Slide

  11. View Slide

  12. Web Audio API

    View Slide

  13. AudioContext

    View Slide

  14. .decodeAudioData()
    .createBufferSource()

    View Slide

  15. Web MIDI API

    View Slide

  16. MIDIAccess

    View Slide

  17. .inputs()
    .outputs()
    onstatechange

    View Slide

  18. MIDIInputMap

    View Slide

  19. value.onmidimessage

    View Slide

  20. [144, 10, 127]

    View Slide

  21. [144, 10, 127]
    channel key note

    View Slide

  22. [144, 10, 0]
    channel key note

    View Slide

  23. ♥

    View Slide

  24. Demo

    View Slide

  25. Resources

    View Slide

  26. orlando/web-launchpad

    View Slide

  27. developer.mozilla.org
    html5rocks.com

    View Slide

  28. Thanks!

    View Slide