We’ll look at how to use Vue in conjunction with Vuetify and howler.js to create a simple but fully functional music step sequencer.

One of the main advantages of Vue is its versatility. Although the library is focused on the view layer only, we can easily integrate it with a wide range of existing JavaScript libraries and/or Vue-based projects to build almost anything we want — from a simple to-do app to complex, large-scale projects.

Today, we’ll see how to use Vue in conjunction with Vuetify and howler.js to create a simple but fully functional music step sequencer.

Vuetify offers a rich collection of customizable, pre-made Vue components, which we’ll use to build the UI of the app. To handle the audio playing, we’ll use howler.js, which wraps the Web Audio API and make its use easier.

Getting started

In this tutorial, as its title suggests, we’re going to build a simple music step sequencer. We’ll be able to create simple beats and save them as presets for future use. In the image below you can see what the music sequencer will look like when it is run for the first time and there are no presets created yet.

As you can see, there will be four tracks, each one representing a single sound (kick, snare, hi-hat, and shaker). Beats are created by selecting the steps — the cells in the tracks row — which we want to be playable. Each track can be muted separately for finer control. For changing the playback speed we will use the tempo slider. We also have a metronome, which measures each beat. Finally, we have the ability to save the current state of the tracks and tempo value as a reusable preset. If we’re not satisfied with the current outcome, we can start over by clicking the Clear Tracks button, which will deselect all selected steps.

The image below shows the music sequencer with some presets created:

The saved presets are represented as a list of tags. To load a preset, we click the corresponding tag, and to delete it, we click the trash icon. We can also delete all presets at once by clicking the red button. The presets are stored in the user browser via the Web Storage API.

You can find the project’s source files at the GitHub repo and test the app on the demo page.

Note, before we get started, you need to make sure that you have Node.js, Vue, and Vue CLI installed on your machine. To do so, download the Node.js installer for your system and run it. For Vue CLI follow the instructions on its installation page.

To get started, let’s create a new Vue project:

vue create music-step-sequencer

When prompted to pick a preset, just leave the default one (which is already selected) and hit Enter. This will install a basic project with Babel and ESLint support.

The next step is to add Vuetify to the project:

cd music-step-sequencer
vue add vuetify

Vuetify also asks you to select a preset. Again, leave the default preset selected and hit Enter.

And finally, we need to add howler.js:

npm install howler

After we have all the necessary libraries installed, we need to clean up the default Vue project a bit. First, delete the HelloWorld.vue inside the src/components folder. Then, open App.vue and delete everything between <v-app> element. Also, delete the import statement and the registration of HelloWorld.vue component. Now we are ready to start building our new app.

#vue #vuetify #javascript #web-development