--- title: "Tim Benniks - Alive and Kicking. A Vue into Rock& Roll! - Vuejs Amsterdam 2023" description: "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." date: "2023-08-12T10:06:20.000Z" url: "https://timbenniks.dev/videos/alive-and-kicking/004--4m4tij0z20" youtube_url: "https://www.youtube.com/watch?v=-4m4TIJ0z20" playlist: "alive-and-kicking" image: "https://i.ytimg.com/vi/-4m4TIJ0z20/maxresdefault.jpg" tags: ["composable-architecture", "frontend", "developer-experience", "media-production"] --- # 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. Watch on YouTube: https://www.youtube.com/watch?v=-4m4TIJ0z20 ## Transcript are you awake yet no I can guarantee you will be after this it's Gonna Get Loud and this is actually a pretty different talk than you're used to so I'll start with a bunch of slides just to kind of give you the five of what's going down and after that I'm going to grab my guitar from here I'm going to play some rock and roll all right so my name is Tim Mannix and I am the director of developer relations as Alex just told you at uniform and basically um I've been playing guitar like I guess my whole life and there's this other passion that's always there and then sometimes I don't play for a while and then it comes back and I just had a Hiatus for like 10 years of not playing and it starts to creep up again you want to play again right and so why not combine that with the conference talk you know few GS cool stuff and so basically I'm here to play Alive and Kicking and you see a bunch of pictures of me back in the day when I was playing a lot and so this is a few into rock and roll and so basically um we're playing some rock and roll and everything is in the browser so it's completely fertilized you don't see any amplifiers nothing is here we just plug into this little box goes into the computer and everything happens there and so essentially I made a few DS karaoke machine for guitars and so I want to do a quick shout out um oh not yet after this so an extra thing is here like I could just go and play some stuff isn't it much nicer if you get to vote with song I play right so in a second I'll give you a QR code you scan it you log in with your GitHub and you start voting and then I will play whatever well I I made a selection of songs obviously and so um I need to shout out Ilyas my colleague because every time I'm in Berlin when I'm there he's like let's do karaoke please and I'm like no I cannot sing I hate it and so basically now I'm here in front of a thousand people going to do karaoke but on guitar so this one is for him um a quick round of what it was built on and then after I play I'll explain so it's of course few next we have super bass Pina uniform and then one more special one that you might not have seen before it's called Web midi we'll talk about that later and so few GS actually controls the sound of my guitar but it also controls the backing track that I've recorded to play over it visualizes everything and then it's using Super Bass to do a connection so when you vote you directly see your picture on the screen so I'm hoping to see like 800 people on the screen in a sec are you ready to rock I'm hoping I'm going to be as good as these guys we don't know we'll still see um all right so if you go to this URL so you can go to uniform.2 FTS Amsterdam or just scan this enormous QR code go there and then log in and then you can actually start voting so I'll leave this up for a sec while I grab my guitar oops is it working for everyone I'm hearing no yes how many yeses am I getting are you in okay my speaker friends are voting who else is voting all right well let's see we can actually see if you're voting Let me refresh this for a sec oh we can see some stuff going on we have 80 DC five votes oops oh there's some people coming oh okay so super bass is actually dealing with the amount of votes more more more more more you get three photos out of five songs if you don't know song just look at whatever lovely picture you see and go for it um also these songs date me a little bit you can see the old school of it right oh we have lots of Michael Jackson AC DC obviously look at all these photos oh I love it all right so I'm gonna have a look if this actually sounds like something okay who has most votes oh is you guys want me to play the hardest one first all right really okay so um please continue folding do whatever you need to do so while I play um pay attention you'll see amp preset Stadium Rock that's actually the browser telling my virtualized amplifier on the computer what sound it has to be so when it's time for the solo when I have to actually play Eddie Van Halen now I guess you wanted me to do this one first it's going to change and that's using web MIDI um I'm just going to kick it off right [Music] let's go [Music] foreign [Music] [Music] [Applause] [Music] [Applause] [Music] [Music] [Applause] Justin Bieber [Music] [Applause] [Music] [Music] [Music] thank you [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] foreign [Applause] all right I forgot the most important part of my guitar during that solo so you just missed that but I need this and I did not put it on My Guitar so we'll have it now who's ready for the next look at that you guys love AC DC I do too and you might think that's an easy song there's not enough notes to hide behind so let's see how that goes all right [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Applause] [Music] [Music] [Applause] thank you [Music] foreign [Music] [Music] [Applause] [Music] [Applause] [Music] thank you [Music] [Applause] I love how the votes keep coming in or I might not have added a timeout so they don't go away who knows um Welcome to the Jungle ready to go crazy [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] foreign [Music] [Applause] [Music] [Applause] [Music] foreign [Music] [Applause] [Music] [Music] [Applause] [Music] foreign [Music] [Applause] [Music] [Music] okay so I'm thinking let me explain how this stuff works and then once that's done and I still have 10 minutes so we probably could play the other two so let me just put down the guitar and talk to you a little bit about how this actually works all right time for slides so let's start with the signal flow of what you're actually seeing here and so basically of course we have a guitar right and that guitar goes into something because the guitar signal is an analog signal right these these little pickups that you see here these have a coil and magnets and that signal from the string goes out here which then goes into something to make it digital because we're in a computer something needs to happen here right so there's this little lovely box where it goes in and makes it digital and it goes through USB to my computer and so the computer just has an output which then goes to these lovely speakers here right and so inside this there's this little amplifier that I have and normally maybe if you've seen it on TV or if you're a musician yourself you know have speakers and amplifiers and a whole bunch of stuff but it's really expensive to get good stuff and if you want to record an album let's say you need like 15 of them maybe because you're like a purist well now I just spent 100 bucks and got that one and it sounds well it's not the same but this sounds good right it's decent and so that goes to the output as well and then of course there's the browser which uses UDS and nux and stuff also has an output there's one more chain there actually the browser says based on which part of the song like when I play a solo it's louder right so I have chapters and so basically these chapters say to the guitar amp make it louder or give me more volume or more echo or whatever so the browser is telling my amplifier what to do and so in the interface itself of course you saw all the photos bouncing around and then on the right you could see okay this is like the next song an extra vote and it's all live using Super Bass which works so extremely well and of course you've seen all the bubbles of yourself and then this is an audio visualizer which basically combines what I do with my guitar and whatever comes out of the speakers and so it's simple canvas not much to it and then this audio player has the chapters that then talks to the amplifier there you go I'm gonna go fast because I want to play another song because these guys are going to be mad at me if go over time as the first talk right anyways you're floating on your and this is also a few GS application and it's really quite simple because Superbass takes care of everything I had the GitHub connection and actually the voting down in like half a day and it just survived all your votes without a hitch and it's still going in the background now it works fine and so when you vote you see yourself pop up and I won't email you or use your data in any way this is going to be destroyed very soon okay so some last stuff you notice probably that the songs were not the original songs and they were also not the normal length they were actually only two minutes so maybe two and a half because if I would play five songs each six minutes I don't have time and I need to speak a little bit so um I actually managed to cut them all down and then we used AI to extract the real vocals and the real drums and then I actually played all the backing guitars and other stuff on top of it so essentially for the last month I've re-recorded all these famous songs with some original parts and some dim so all that background stuff is actually also created for this talk and now hopefully we don't have copyright issues hopefully thank you for that and so yeah we use track isolation for that and so I recorded all the guitars like if I don't play now we hit play you hear guitars as well that's also that amp that you just saw so it works extremely well in these settings but I had help and I had help from Nikki who's behind there behind the desk and she's actually an audio engineer so big plus for Nikki because without Nikki it wouldn't have sounded like this she actually like really makes these songs to be sure that it's not crazy loud or like there's compressors and limiters and everything works and of course our lovely sound guy Andrew there is helping me as well to make it sound good so I wanted to give these shout outs and so um that was the talking bit so how about I'm gonna be cheeky now why don't you just follow me in Twitter and I play another song what do you think would you do that for me all right let's go okay I won't be checking my phone if you're following me that would be a bit too much right nah that would be too much okay I'm just gonna play the one with the most votes oh the votes are still going look at that another AC DC but yeah we did that already okay who's in the mood for like metal okay okay is there somebody in the mood for like 1950 style rock and roll it oh oh you know what I have five minutes I'm gonna do both okay [Music] thank you [Music] thank you [Music] [Music] [Music] [Music] tonight [Music] [Applause] dripping away [Music] [Music] foreign foreign [Music] [Music] [Applause] look at all these photos go I see lots of people without profile pictures oh did not expect that okay let's tune it down slightly and go back like 60 years 70 years holy crap yes this is old stuff and you might find like this is this is like all the music I just played kind of came from this and you would think this is simpler than Metallica this is by far the hardest song because this guy has the time it's ridiculous so I'm just gonna give it my best shot please [Music] [Applause] [Music] foreign [Music] [Music] [Music] [Music] oh [Music] no thanks everybody