876: MIDI & Music in the Browser

Syntax - Tasty Web Development Treats

Wes Bos

Technology, News, Tech News

4.9 • 1.2K Ratings

🗓️ 12 February 2025

⏱️ 49 minutes

🔗️ Recording | iTunes | RSS

🧾️ 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 Bebot 05:32 What is MIDI? Web MIDI API 14:18 Advanced examples with WEBMIDI.js WEBMIDI.js 17:02 Outputting MIDI messages 24:40 Exploring the Web Audio API webmidirtc 31:20 Audio sampling in the browser 37:35 Media Recorder 39:21 Fun projects MIDI chord machine 42:08 Sick Picks + Shameless Plugs Sick Picks Scott: MX Master 3S Wes: Microcontoller Shameless Plugs The MOST Starred JS Projects Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube 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.

Previous episode | Next episode

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.