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. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:17">01:17</a> Brought to you by <a href="https://sentry.io">Sentry.io</a></li> <li class="has-line-data" data-line-start="6" data-line-end="8"> <a href="#t=02:04">02:04</a> Fun audio experiments <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="http://www.normalware.com/">Bebot</a></li> </ul> </li> <li class="has-line-data" data-line-start="8" data-line-end="10"> <a href="#t=05:32">05:32</a> What is MIDI? <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API">Web MIDI API</a></li> </ul> </li> <li class="has-line-data" data-line-start="10" data-line-end="12"> <a href="#t=14:18">14:18</a> Advanced examples with WEBMIDI.js <ul> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://webmidijs.org/">WEBMIDI.js</a></li> </ul> </li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=17:02">17:02</a> Outputting MIDI messages</li> <li class="has-line-data" data-line-start="13" data-line-end="15"> <a href="#t=24:40">24:40</a> Exploring the Web Audio API <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://github.com/philmillman/webmidirtc">webmidirtc</a></li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=31:20">31:20</a> Audio sampling in the browser</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=37:35">37:35</a> Media Recorder</li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <a href="#t=39:21">39:21</a> Fun projects <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://github.com/stolinski/midi-chord-machine">MIDI chord machine</a></li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="21"> <a href="#t=42:08">42:08</a> Sick Picks + Shameless Plugs</li> </ul> <a id="Sick_Picks_21"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> Scott: <a href="https://amzn.to/42yAQPP">MX Master 3S</a></li> <li class="has-line-data" data-line-start="24" data-line-end="26"> Wes: <a href= "https://www.amazon.com/s?k=microcontroller">Microcontoller</a></li> </ul> <a id="Shameless_Plugs_26"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="28" data-line-end="30"> <a href="https://www.youtube.com/watch?v=NBDnS9UQg5w">The MOST Starred JS Projects</a></li> </ul> <a id="Hit_us_up_on_Socials_30"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

876: MIDI & Music in the Browser

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews