Alive and kicking
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.
The story begind Alive and kicking
The story behind Alive and kicking
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
Vue.js guitar karaoke: how I built it
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
Tim Benniks - Alive and Kicking. A Vue into Rock& Roll! - Vuejs Amsterdam 2023
Rock & roll is alive and kicking and in this talk I will showcase that Vue is so versatile it can be used to do audio visualisations while rock guitar soars through the browser. The audience will have access to a vue application which allows them to vote for a song to be played live on stage. The screen shows all the votes and I play them as they come up. While playing music meta data is shown and an audio visualisation plays while I’m rocking on stage. The more votes a song gets, the higher it shows on the list and the more chance I’ll play it. The whole experience is created using Vue and Uniform. Next to waking the audience up with some spicy rock& roll, I will explain how the software was build and why Vue is such an important technology for composable architectures with multiple channels. https://www.jsworldconference.com/newsletter Powered by https://passionatepeople.io #jsworld #jsworldconference #frontendlove #frontenddeveloperlove #javascript #reactjs #angular #react #vuejs #vue #vue3 #typescript #graphql #jamstack #amsterdam #conference #svelte #sveltejs #next #nextjs #staticsite #css #html #nuxt