Alive and Kicking - A Vue Into Rock & Roll

Rate this content

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.

27 min
12 May, 2023


Sign in or register to post your comment.

AI Generated Video Summary

The Talk introduces FutS guitar karaoke, a virtual experience in the browser using Vue, Nuxt, Supa Bass, Pignan, Cloudinary, and WebMedia. The virtual experience visualizes audio and allows users to vote and share their votes on Twitter. The browser interacts with the amplifier to change sounds on the guitar, and the browser updates in real-time with vote data. The guitar signal resembles the playing song, and users can choose between Chuck Berry's 'Johnny B. Goode' and AC-DC for the song performance.

1. Introduction to the Talk

Short description:

Hello, everyone! Are you still awake? I'm seeing a lot of smiling faces and big eyes. We're good. So the fact that you're all here is awesome and you've learned a lot. I'm going to be using this today. And then with this, we're going to turn it up. It's party, essentially. I am an ambassador for a whole bunch of things. And open source stuff and startups and all of that. But I'm trying to put all of this stuff into the talk. And like I said, it's going to be not super technical. But all of this is used. 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.

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. 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, we're 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 drop 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. But I'm trying to put all of 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.

2. FutS Guitar Karaoke

Short description:

Today, I'm introducing FutS guitar karaoke, a virtual experience in the browser. I wanted to redeem myself from my bad singing skills, so I created this guitar karaoke instead of traditional karaoke. I'll be using Vue, Nuxt, Supa Bass, Pignan, Cloudinary, and WebMedia for this virtual experience. Vue JS controls the sound of my guitar and plays the backing track.

And so today, this is a life in kicking. And all my life, I've been a guitarist. But for the last 10 years, I didn't do any of it. So all the pictures you see are 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 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 Vue 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 Supa Bass, Pignan, Cloudinary, and WebMedia. 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.

3. FutS Guitar Karaoke Details

Short description:

And it visualizes the audio. It's a whole bunch of fun things with Vue. I'm using Supa Bass for logging in and database stuff for the voting. You can share your vote on Twitter. Go on your phone, scan the QR code, or go to Feel free to log in.

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 Supa Bass for logging in and database stuff for the voting. And they have this lovely live connection. You'll see it's really fun.

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? All right. So what I want you to do is go on your phone, scan this QR code, or go to 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.

4. Browser Check and Virtualized Guitar Amplifier

Short description:

Let's have a look at my browser. You can see your own avatar bouncing around on the screen when you vote. Feel free to spam my endpoint and see how well Next Serverless plus SuperBase takes it. This is all running at 60 FPS with Canvas and Vue. There are lots of votes, especially from Guns n' Roses fans. I'll quickly check if there's sound coming out of my guitar and do a tune-up. This virtualized guitar amplifier is a cool modern tech that sounds great. Pay attention to the amp preset, Top Hat Solo, which changes based on certain parts of the song.

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 are on the screen a lot. So if you want to spam my endpoint and see how well Next 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 gonna have a quick check to see if there's actually any sound coming out of my guitar. Do a quick tune-up and then there we go. All right. Quick tune-up 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 gonna 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.

5. Fuji S and Votes

Short description:

Fuji S tells my guitar amplifier to change the sound. Let's go for it! I just adjusted the guitar volume. Look at these votes! When someone doesn't have a profile picture, they might be spamming the endpoints. But Super Bass can handle it. Michael Jackson's song is special with Eddie Van Halen on guitar. Let's have some fun with it!

So Fuji S is actually telling my guitar amplifier to change the sound. Because sometimes it needs to be louder or whatever.

All right. Let's go for it. You ready? You ready? You ready? 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 shh, 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, Super Bass, fine. We did this at a conference with about 5 times the amount of people. No problem.

All right. Oh, Michael Jackson, there we go. All right, so this one is pretty special. Because 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. Look at Mark here. Upvote, downvote, upvote, downvote. I like this. Okay, good enough. Good enough of jazz. Here we go.

6. Signal Flow and Equipment

Short description:

What is happening? I'm the last talk and I will play all the songs. Let's talk about how this was built. The signal flow is important. A guitar goes into a magical box and then into a laptop. Musicians usually have a lot of equipment on stage, but I only have a PA system, guitar, and laptop. The little red box takes the analog signal and makes it digital. It all goes into the laptop and then to the box upstairs. Inside, some things happen.

What is happening? So when you... Okay, this is the best time I've done this. Look at this. The fact that it's holding up. Awesome, awesome, awesome.

Alright, so I know I'm the last talk and I said you only have three phones, 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 10 minutes. Alright, it's not that hardcore dude. Not that much.

Ok, so I want to talk, before I do the rest, I do want to 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. Ok, 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 and a bunch of magnets that have a signal that goes out with a vibration of the string, that goes directly analog into that little box. And that makes it digital. And that has been used for 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.

7. Browser Interaction and Options

Short description:

The browser speaks to the amplifier to change sounds on the guitar. The browser updates in real-time with vote data using view reactivity and async data in NUXT. The refresh function constantly queries the numbers and updates the display. There are two options in this part.

And so 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. Jakup 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, plook, 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 on the guitar. And that's what the browser was telling the amp to do. And so then, let's have a look at the browser, of what is going on here. So essentially, you see the up next thing, right? With all your different votes. It's all updating life because of view reactivity. And then every time you vote, you see your little icon just bouncing around. And this is essentially just super-based looking at a vote row in the SQL. And 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.

8. Guitar Signal and Song Performance

Short description:

I chose to make the guitar signal resemble the playing song. In five minutes, can we do one or two songs? I used AI to remove vocals and drums and rerecorded parts of the songs. You can find more information and videos by scanning the QR code or following me on Twitter.

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. 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. And 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. 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 rerecorded 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 scan this QR code and there's a few YouTube videos out there that I show how it's actually done. And this one, you can follow me on Twitter now. Or I just play a song. How about I play a song? Okay.

9. Choosing the Song to Play

Short description:

But now the question is, which song should I play? We have two options: the all-time classic from the 50s, Chuck Berry's Johnny B. Goode, or the old-time favorite AC-DC. Chuck Berry's song is from 1958 and defined rock and pop music. It's a bit awkward to play along with, but it's going to be fun. So, which one do you choose? Thank you all for watching and I appreciate your support. Feel free to follow me on YouTube for more videos about building stuff and on Twitter. Cheers!

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 old time favorite AC-DC. That will rock your world to go for a beer after. But there's also another one. Which is Chuck Berry's Johnny B. Goode. Who knows Chuck Berry? Nice! Because 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, this is 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. Yeah? I think I just saw 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. His mother told him someday you will be a man and you will be the leader of a big old band.

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 is 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.

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

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!

Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.
For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.
Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.
Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem
IDE of choice (Inellij or VSC) installed
Nodejs + NPM

Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.

JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.
Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.
With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.
Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
VSCode setup and an empty Vite + Vue project.

Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
- Intro 3D 
- Intro WebGL
- ThreeJS
- Why TresJS
- Installation or Stackblitz setup 
- Core Basics
- Setting up the Canvas
- Scene
- Camera
- Adding an object
- Geometries
- Arguments
- Props
- Slots
- The Loop
- UseRenderLoop composable
- Before and After rendering callbacks
- Basic Animations
- Materials
- Basic Material
- Normal Material
- Toon Material
- Lambert Material
- Standard and Physical Material
- Metalness, roughness 
- Lights
- AmbientLight
- DirectionalLight
- PointLights
- Shadows
- Textures
- Loading textures with useTextures
- Tips and tricks
- Misc
- Orbit Controls
- Loading models with Cientos
- Debugging your scene
- Performance
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.
Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level
NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.