876: MIDI & Music in the Browser
Syntax - Tasty Web Development Treats
Wes Bos
4.9 • 1.1K Ratings
🗓️ 12 February 2025
⏱️ 49 minutes
🧾️ Download transcript
Summary
Wes and Scott talk about the Web Audio and Web MIDI APIs, diving into how they enable powerful music and sound manipulation in the browser. They explore MIDI messaging, synthesizing audio, creative coding with music, and share hands-on projects, tips, and libraries to get started.
Show Notes
- 00:00 Welcome to Syntax!
- 01:17 Brought to you by Sentry.io
- 02:04 Fun audio experiments
- 05:32 What is MIDI?
- 14:18 Advanced examples with WEBMIDI.js
- 17:02 Outputting MIDI messages
- 24:40 Exploring the Web Audio API
- 31:20 Audio sampling in the browser
- 37:35 Media Recorder
- 39:21 Fun projects
- 42:08 Sick Picks + Shameless Plugs
Sick Picks
- Scott: MX Master 3S
- Wes: Microcontoller
Shameless Plugs
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Transcript
Click on a timestamp to play from that location
| 0:00.0 | Welcome to Syntax on this episode. We're going to be talking about the web audio API and the web MIDI API, what these things are, why they matter, and maybe some interesting things about them that you might not know. Because me personally, when I think of web audio and web MIDI, I'm thinking of maybe playing sounds or accepting input from |
| 0:22.9 | MIDI, but you can do a lot with these things. And there's a handful of really great community |
| 0:27.9 | libraries out there to help you make both music, but also just control things with MIDI messages. |
| 0:34.4 | So we're going to be talking in this episode about some really interesting audio |
| 0:39.3 | technical concepts such as sampling. |
| 0:42.3 | We're going to be talking about MIDI in general, the types of messages that are sent, |
| 0:46.1 | how it's sent, what it means, how we can interact with that in the browser. |
| 0:49.5 | And then ultimately, I'll be showing you some really neat demos of stuff we can do. |
| 0:53.6 | In fact, my desk... |
| 0:54.6 | Play us in, Scott, will you? |
| 0:56.5 | Play us in. |
| 0:58.6 | No, play us in. |
| 1:00.1 | Play us in. |
| 1:01.5 | Is that... |
| 1:01.9 | Yeah. |
| 1:03.1 | Sounds awesome. |
| 1:05.1 | Okay. |
| 1:05.8 | I can't hear that, so I don't know what it sounds like in my monitor right now. |
| 1:08.8 | But I'll be definitely showing you some of this in just a little bit. |
| 1:11.7 | I'm building something fun with this, so I thought it would be a good opportunity to take a time |
| 1:15.5 | and do an explainer. |
| 1:16.9 | But hey, if you're trying out new things in your site, maybe you're pushing it live, and |
... |
Please login to see the full transcript.
Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.
Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.
Copyright © Tapesearch 2025.