Alive and Kicking - A Vue Into Rock & Roll


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. Vue is also used to control the guitar sound, right from the browser.


Hello everyone! Are you still awake? I'm seeing a lot of smiling faces and big eyes. We're good! Wow! We've been upstairs there all day looking at all our friends speaking and the amount of information is ridiculous. So the fact that you're all here is awesome and you've learned a lot. And so I decided it's going to be different today. And this is me on the phone call as you can see. And actually I'm going to be using this today. Rather than talk about vue and browsers and all that stuff, I'm going to use it. And then with this. I'm going to turn it up because after this it's beers. So you're going to be ready for the beers. But before I go in, I'll just give you a few slides to kind of understand why I'm doing this and what it's all about. And after that it's just... Oh, I should not have dropped this. After that it's party, essentially. So I am an ambassador for a whole bunch of things. And open source stuff and startups and all of that. And I'm trying to put all this stuff into the talk. And like I said, it's going to be not super technical, but all of this is used. All right. So you might have heard my accent. It's a little kind of strange. Because I was born in the Netherlands. But I live in the south of France. And I work with Americans. And so if you mix these cheeses, it's not good. But that's what you hear, essentially. And so today, this is a life in kicking. And all my life I've been a guitarist. But for the last ten years, I didn't do any of it. So all the pictures you see are from a very young Tim. I couldn't find any others. So I thought, let's meme myself and put up some of these pictures. And so essentially what we're going to do, we're going to use FUTS for rock and roll. And so essentially this is a FUTS guitar karaoke. And I came up with this because all my colleagues, of a lot of them at least, they all live in Berlin. And when I go there for work, they're all like, dude, let's go to karaoke. But I'm so bad at singing, it's just the worst. And so I kept saying no for the longest time. And then I thought, I have to redeem myself somehow. And that's what this is. So we have guitar karaoke instead. And so it's all in the browser. And the fun thing is here. I want a little bit more interaction with you guys. And so in a second I'm going to give you a QR code. You go to, on your phone, you go there and you can vote on the songs that I play. So the ones that have the most votes, I will be playing. And so let's see. What's my next? And so I wanted to do this because I use FUTS all the time and a bunch of tools all around. And so I wanted to do the whole thing completely virtual in the browser. And so what I've used today are, of course, vue, of course, Nuxt, also Supabass, Pinyin, Cloudinary and WebMidi. That might be the odd one out. But we'll talk a bit about that a bit later. And so what I'm doing is that vue.js, javascript, is actually controlling the sound that comes out of my guitar. It's sending signals all over the place to make sure that it sounds right for the right song at the right place. And then vue.js, of course, also plays the backing track. And it visualizes the audio. You'll see that in a sec. It's a whole bunch of fun things with vue. Also just see, this is me at 18 with leather pants and a lot of hair. Compare it to this, right? I'm using Supabass for logging in and database stuff for the voting. And they have this lovely live connection. You'll see it's really fun. All right. One last thing. Oh, that went fast. So all right. Yes. So if you have voted in your favorite song, if you wanted to, you can actually share that vote and you put it on Twitter. And it's like, this is like me that I voted on this song. But you could do that for your own as well. And I want to blast Twitter with all these images. So if you're up to that, go for it. All right. This is my favorite slide. Are you ready? Yes. All right. So, what I want you to do is go on your phone, scan this QR code, or go to a live and And while you do that, I'm slowly just going to set all this up here so we can get started. So feel free to log in. Actually this morning I had Twitter as a login. And then dear Elon decided to just suspend my account. And so, no login with Twitter. But we should be fine. Anyways. Let's have a look at my browser. Okay. So I am already seeing a few votes. And so, the idea is that if you hit the vote, you see your own avatar bouncing around on the screen. And so, the keen eye among you is like when you upvote and downvote and upvote and downvote, you're on the screen a lot. So if you want to spam my endpoint and see how well Nuxt serverless plus Superbase takes it, spam the hell out of this thing. And this is all 60 FPS running with Canvas and vue. Oh, there's lots of votes. I like it. We have a lot of Guns N' Roses fans. All right. So while you keep voting, I'm just going to have a quick check to see if there's actually any sound coming out of my guitar. Do a quick tuneup and then there we go. All right. Quick tuneup while you vote. Feel free to share your votes on Twitter as well. Because I'm here under these really hot lights. So this guitar is going to beg me for mercy right now. All right. So just have one quick look. This is actually a virtualized guitar amplifier. You can see there's no speakers here. There's nothing. It's me and a laptop. And so this is really cool modern tech. That sounds great. So that's what you'll be hearing. How it actually works, I'll tell you later. But there's one thing you should pay attention to. Is that here, if I move my mouse here, you see there's this amp preset, top hat solo, which is of course Slash. This changes based on certain parts of the song. So Fujifilm is actually telling my guitar amplifier to change the sound. Because sometimes you need to be louder or whatever. All right. Let's go for it. You ready? So I'm going to turn it up. All right. So I just put the guitar down a little bit, my dearest sound person. It's very much in your face. It's great. However, when I stand here, it's gone. So I'm so sorry. But we should be good. Look at these votes. Okay. So this is the thing, right? When somebody doesn't have a profile picture, I think they're spamming the end points somehow. And every time I do this talk, this happens. And I have not figured it out. How can you vote that much? But then again, Superbass. Fine. We did this at another conference with about five times the amount of people. No problem. All right. Oh, Michael Jackson. Here we go. All right. So this one is pretty special. Yes, it has Eddie Van Halen on the guitar. And I'm not pretending I'm Eddie Van Halen. I'm gonna have some fun with it, though. Again, I do need to do a quick tune-up, just to be safe. Who's been sharing their votes? Too busy voting. Too busy voting. Yeah, exactly. I like to look at Mark here. Up vote, down vote, up vote, down vote. I like this. Okay. Good enough. Good enough for jazz. Here we go. Okay, so I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. I'm gonna do a little bit of a tune-up. Alright, so I know I'm the last talk, and I said you only have three votes, so I would play three songs, but I'm just gonna play all of them, because why not? I will be in time, because I'm looking and I have ten minutes. Alright, it's not that hardcore, dude. That much. So I wanna talk, before I do the rest, I do wanna talk a little bit about how this was actually built. Not too detailed on the tech, because you've had a lot of tech today, but at least like signal flow, things like that. Okay, here we go. Well, this you've seen. Right, so let's talk a little bit about the signal of what is actually happening here. So of course, to have any sort of sound, you need a guitar, right? And then that guitar, in this case, goes into a little red magical box. That's actually down here, but you cannot see that. And then it goes into the laptop. The thing is, normally, when you see musicians on stage, not all of them, but most, they will have a bunch of stuff on the floor that they step on and then sound changes. You have huge amplifiers. In this case, you just have these, the PA system off the venue, my guitar, and a laptop. That's kind of strange. You don't see that. And so what this little red box does is actually takes my analog signal, these are just a bit of copper wire, a bunch of magnets that have a signal that goes out with the vibration of the string that goes directly analog into that little box and that makes it digital. And that has been used quite a long time. This might not be the way to do it, because if you do this live and your laptop says no, everything is done. Right? But I take my chances here. The thing is, it all goes into the laptop and then the laptop goes into that box out to upstairs. That's the little arrow there. And so inside, a few things happen. Well, you just saw that little amp, right, that I have. That actually listens to the input. And then the output also goes upstairs. And then there's the browser. So all these songs, they're living on Cloudinary. Jakub spoke about that today. They also do audio. They also do video. That's where it lives. And the output of the browser also goes to the same one. And so normally, our lovely sound guys might want to have that separated. But I want to have such a light setup that's like, pluck, go. And they just have to deal with me. Luckily, they're awesome. And then there's one extra thing. The browser actually speaks to the amplifier to say, now change to this one. Now change to that one. Because these songs just now, they had different sounds in the guitar. And that's what the browser was telling the amp to do. And so then when you look at let's have a look at the browser of what is going on here. So essentially, you see the up next thing with all your different votes. And it's all updating live because of your reactivity. And then every time you vote, you see your little icon just bouncing around. And this is essentially just SuperBass looking at a vote row in the SQL. If there's a new row, it will just push a signal live to get async data in Nuxt, which then has a refresh function. Okay, I'm gonna speak a little bit about it. Little. And that refresh function just queries again constantly. So every vote you see, it queries all the numbers and all the things all the time. So that you just saw, like, how much do we have? 500 bubbles? Every bubble, it was querying all of it again. That's how fast this is. Well, then we have this part where I have two options here. I chose for one of them. One is when I play my guitar, there's a web audio api that can just analyze my signal and show you. But that sometimes goes off. So I chose to make it kind of just resemble whatever song is playing. I just saw I have five minutes, so I'll go fast now. Here we have talked about the fact that I have these little chapters. And each chapter says to, you know, the amp, sound that way. And then, of course, you have the phone. When you hit vote, it goes to SuperBass, goes to the browser. All the things. So in five minutes, can we do one or two songs? What do you think? Two, right? Okay. I do need to talk about this one quickly, because then you can see how much work went into this talk. There's copyright, there's DRM, there's all the things. And all these songs are actually only two minutes rather than five. And so I used AI to take out the vocals and the drums and all the things. And I basically, for some parts, re-recorded the whole thing. So essentially, I recorded an EP for this talk. All the guitars of all the backing tracks is me. Some bass parts is me as well. So I'm replaying these classical songs myself on top. And let's see. Is there anything else? If you do want to know more about the story behind it, how it's actually built, all the excerpts, you can actually scan this QR code. And there's a few YouTube videos out there that I show how it's actually done. And this one, well, you can follow me on Twitter now, or I just play a song. How about play a song? Okay. But now is the question, which one? Let's have a look. We can do at least one. So we have the choice of what I haven't played. So there's a few that are really fun. So of course, we have the all-time favorite ACDC. That will rock your world to go for a beer after, right? But there's also another one, which is Chuck Berry's Johnny B. Goode. Who knows Chuck Berry? Nice. It's essentially, that song is from 1958. It's the base for everything you just heard. The way he played basically defined all the rock music we have now and the pop music, all the things. The thing is, though, it is a recording from the 50s, and it's awkward as heck. So for me to play along, it's going to be fun. So I can give you the all-time classic from the 50s, or I can give you ACDC. Shout. Which one? Chuck Berry. Chuck Berry. Yeah? I think I just sold that one too much, but there you go. Okay. Beware. This might go wrong. Because it might sound like a super simple song, but this beats Michael Jackson. It's way harder. I'm going to play it. Okay. Let's go. All right. All right. That's it. Thank you very much. And I really, really appreciate the hackers. And if you wanted to follow me, I know I have one minute. Feel free to follow me on YouTube where I do a bunch of videos about how you built this stuff. And also I talk about the startup that I work at that I didn't speak about that much, but it's really interesting because it's also used in this tool. And Twitter, as everybody has. No Mastodon. I don't know why I didn't do that, but no, that's not there. Anyway, that's it. Thank you very much for watching. Cheers. It's time for beer.
27 min
12 May, 2023

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Workshops on related topic