Rock & Roll in the browser
Get ready to rock out at your next tech conference! I've created an electrifying browser-based karaoke experience tailored explicitly for rock & roll guitar. Using the innovative power of Vue, Nuxt, and webmidi, everything from the backing tracks to the guitar amp presets is dynamically controlled.
And the best part? You, the audience, get to participate too! By logging in with Twitter or Github, you can live-vote what songs I should play next, making this a fully interactive and unforgettable experience.
Share your vote
You, the audience, get to participate too! By logging in with your Twitter or Github account, you can live-vote what songs I should play next during my guitar karaoke performance.
But that's not all - every vote you cast will be displayed on the big screen as a bouncing ball, making you a part of the talk. You vote, I play - let's make this a night to remember!
After voting for your favorite song, you can share a personalized image of the song and your profile picture on your social media accounts.
After a guitar hiatus of 10 years, I played a gig in front of 1000 people, without a band, all on my own. The browser controlled everything, from the backing tracks to the visualization, to the guitar amp presets. Users could live-vote on which song I played next. Tech used: * Vue.js * Nuxtjs * Pinia * Vercel * Supabase * Webmidi.js * Cloudinary Follow me here: Website: https://timbenniks.dev Twitter: https://twitter.com/timbenniks Github: https://github.com/timbenniks
In this video, I explain how I created a Vue.js guitar karaoke system in which the browser controls everything. #vuejs and #nuxtjs deal with backing tracks, visualization, and guitar amp presets with midi. Users live-vote on which song I play next using #supabase. The talk is called Alive and Kicking, a Vue into rock & roll. I did this talk in front of 1000 people at @VuejsAmsterdam in February 2023. The code is open source: https://github.com/timbenniks/AliveAndKickingTalk 00:00 Introduction 00:57 Signal chain 02:50 Webmidi controls the guitar amp 07:26 Live-voting with Supabase 11:49 Animated avatars for real-time votes 14:17 Ending Follow me here: Website: https://timbenniks.dev Twitter: https://twitter.com/timbenniks Github: https://github.com/timbenniks