Building Dynamic, Real-Time Jamstack Experience: “Synthless” Jams | Phil Miller

Discover how to build a dynamic, real-time Jamstack experience using Vue.js, WebRTC, and Web MIDI API, enabling remote collaboration and control of external hardware in the browser.

Key takeaways

Building a dynamic, real-time Jamstack experience using “Synthless” Jams, a demonstration of how to create a music jam session in the browser.
Using Vue.js and WebRTC to enable real-time collaboration, allowing remote participants to join and contribute to the music jam.
Utilizing Web MIDI API to interact with synthesizers and other MIDI devices, making it possible to control external hardware in the browser.
Creating a Vue component for the main application, breaking it down into smaller components for easier maintenance.
Using a template for the audio component, allowing for easy configuration of the message map.
Utilizing the Daily API to create a call and send messages to each participant, enabling real-time communication and collaboration.
Creating a WebRTC video call using the browser’s peer connection, allowing for real-time video streaming.
Using WebMIDI to make interacting with the Web MIDI API easier and more accessible.
Highlighting the importance of separating the concerns of the application, using a jam stack approach to improve maintainability and scalability.
Discussing the process of building a Jamstack experience, including the use of Vue.js, WebRTC, and Web MIDI.
Showcasing the capabilities of the Synthless Jams application, including real-time collaboration and control of external hardware.
Sharing personal experiences and insights gained from working on the project.
Emphasizing the potential of Web technology for creative applications and the importance of exploring new possibilities.

Building Dynamic, Real-Time Jamstack Experience: “Synthless” Jams | Phil Miller

More talks