Build a Music Player With Vuetify

Building apps with Vue.js is easy, fun, and enjoyable. You can build a working app with minimum effort. To prove that, today I’ll show you how easy it is to build your own full-featured music player. To make things even easier, we’ll use Vuetify.js, a Vue.js powered UI library, which will speed up the UI construction. I can almost feel your impatience, so let’s get started. 

You can find the full source code in the GitHub repo. And here is the working demo. To follow this tutorial, you should be familiar with Vue components, Vue single file components, and ES2015 syntax.

Planning the App

Every creation starts with an idea and at least some basic planning. So first we need to decide what we want to build and what functionality we want to implement. It’s said that a picture is worth a thousand words, so let’s start with a simple sketch of the music player.

I made this wireframe so you can get a general notion of the UI we want to build. The next step is to describe the functionality we intend to implement.

As John Johnson says: 

First, solve the problem. Then, write the code.

We’ll use that as a source of wisdom, and we’ll plan the app out before we start coding it.

App Components

Vue.js is a component-based framework. So we need first to split the app into individual components (five in our case, as shown in the sketch above), and to outline the features and functionality for each of them. 

Title Bar

This component will contain the following parts:

• a menu on the left side
• the name of the app in the center
• three static icons on the right side

Info Panel

This component will show basic information about the currently played track:

• the track’s artist and title on the left side
• the current track’s position and duration on the right side

Control Bars

This component will contain two bars, which will include all the controls necessary to manipulate the audio tracks in the player’s playlist.

• a volume slider with an icon on the left (its appearance will change according to the volume level and when the sound is muted), and volume percentage on the right
• buttons for playing, pausing, stopping, and skipping the tracks.
• two buttons on the far right: one for repeating the current track, and one for shuffling the tracks’ order of playing
• a seek bar showing the currently played track’s position, with the ability to change it with a mouse click on the bar

Playlist Panel

This component will contain the tracks’ playlist with the following functionality:

• display a track with the proper number, artist, title, and duration properties
• select a track on single click
• play a track on double click

Search Bar

This component will offer search functionality in the cases when we want to find and play particular track(s).

Of course, the above outline cannot cover all the details and nuances, and this is perfectly fine. For now, it’s enough for us to get an overall picture of the final product. We’ll handle all the details and eventual challenges during the building process.

So let’s get into the fun part and write some code!

Getting Started

Vuetify’s quick start page offers plenty of options to get you started. We’ll use one of the pre-made Vue CLI templates called Webpack Simple. Run the following commands in the directory you want to use for this project:

First, install Vue CLI:

$ npm install -g vue-cli

Then, create the app: 

$ vue init vuetifyjs/webpack-simple vue-music-player

Next, go to the app’s directory and install all dependencies: 

$ cd vue-music player
$ npm install

We’ll use Howler.js (a JavaScript audio library) to handle the audio parts of the music player. So we need to include it in the project too. Run the following command:

$ npm install --save howler

And finally, run the app:

$ npm run dev

The app will open on localhost:8080 in your default browser. You should see a simple Vuetify app skeleton. 

Tweaking the Template

To adjust it to our needs, we need to clean up the template and tweak it a bit. Rename the App.vue file to Player.vue, open it, delete everything inside, and add the following instead:

We wrap our music player app in the v-app component, which is required for the app to work properly. We also pass the dark prop, to apply the Vuetify dark theme.

Now, open the main.js file, delete the original content, and add the following:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import Player from './Player.vue'

import {Howl, Howler} from 'howler'

Vue.use(Vuetify)

new Vue({
  el: '#app',
  render: h => h(Player)
})

Also, open the index.html file and change the content of the