Alive and Kicking - A Vue Into Rock & Roll

Rate this content
Bookmark

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.

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

The presentation uses Vue JS and JavaScript to control the guitar sounds, including sending signals to ensure the guitar sounds right for different songs and controlling the backing tracks and audio visualization.

FutS is used for rock and roll guitar karaoke, allowing the presenter to engage with the audience through music by playing guitar along with backing tracks controlled via web technology.

Participants can interact by voting for the songs they want to hear played. They scan a QR code or visit a website, log in, and vote. The songs with the most votes are then played during the session.

Twitter login was unavailable because the presenter's Twitter account was suspended by Elon Musk, which led to the removal of Twitter as a login option.

The backend services used include SupaBase for database management and live connections, which help in real-time vote counting and displaying user avatars on screen as they vote.

The virtual guitar amplifier is controlled directly by the browser, which adjusts settings like volume and tone based on the song being played. This setup allows for changes in guitar sound without physical amplifiers.

The presenter's unique accent results from being born in the Netherlands, living in the south of France, and working with Americans, which influences the way he speaks.

Tim Benniks
Tim Benniks
27 min
12 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

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

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
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.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
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.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- 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
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
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
Prerequisites:
VSCode setup and an empty Vite + Vue project.