Introduction
In this tutorial, we will learn how to create a music player app using Vue.js and the Deezer API. Vue.js is a popular JavaScript framework for building user interfaces, while the Deezer API provides access to a vast library of music tracks. By the end of this tutorial, you will have a fully functional music player app that can search and play music tracks from Deezer.
Prerequisites
To follow along with this tutorial, you will need:
– Basic knowledge of JavaScript and Vue.js
– Node.js and npm installed on your machine
– A Deezer developer account and an API key
Setting up the project
To get started, let’s create a new Vue.js project using the Vue CLI. Open your terminal and run the following commands:
$ npm install -g @vue/cli
$ vue create music-player-app
Follow the prompts to select the appropriate options for your project. Once the project is created, navigate into the project directory and start the development server:
$ cd music-player-app
$ npm run serve
Open your browser and visit http://localhost:8080 to verify that the Vue.js project is set up correctly.
Installing dependencies
Our music player app will rely on a few additional packages. Run the following command in your terminal to install them:
$ npm install axios deezer-api vuex --save
Let’s go over what these packages do:
– axios is a promise-based HTTP client used for making API requests.
– deezer-api is a wrapper around the Deezer API, providing an easy-to-use interface for retrieving music tracks.
– vuex is a state management pattern and library for Vue.js applications.
Creating the Deezer API configuration file
Before we can make API requests, we need to store our Deezer API key securely. Create a new file named config.js in the src directory and add the following code:
export const DEEZER_API_KEY = '<your_api_key>';
Replace <your_api_key> with your actual Deezer API key. Make sure to keep this key private and never commit it to a public repository.
Creating the music search component
In the src directory, create a new directory called components. Inside the components directory, create a new file named MusicSearch.vue. Open MusicSearch.vue and add the following code:
<template>
<div>
<input type="text" v-model="query" placeholder="Search for music tracks">
<button @click="search">Search</button>
<ul>
<li v-for="track in tracks" :key="track.id">
{{ track.title }} by {{ track.artist }}
</li>
</ul>
</div>
</template>
<script>
import { DeezerAPI } from 'deezer-api';
import { DEEZER_API_KEY } from '@/config';
export default {
data() {
return {
query: '',
tracks: []
};
},
methods: {
search() {
const deezerAPI = new DeezerAPI(DEEZER_API_KEY);
deezerAPI.searchTracks(this.query)
.then(response => {
this.tracks = response.data;
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
Let’s break down what this code does:
– We import the DeezerAPI class from the deezer-api package and our DEEZER_API_KEY from the config.js file.
– Inside the data function, we define the query and tracks properties, which will be used to store the user’s search query and the retrieved music tracks, respectively.
– The search method is triggered when the user clicks the “Search” button. It calls the searchTracks method from the DeezerAPI class to search for music tracks that match the user’s query. Upon success, the retrieved tracks are stored in the tracks property.
– Finally, we display the search input, search button, and the list of tracks using directives such as v-model and v-for.
Adding the music search component to the app
Open the src/App.vue file and replace its contents with the following code:
<template>
<div id="app">
<MusicSearch />
</div>
</template>
<script>
import MusicSearch from './components/MusicSearch.vue';
export default {
components: {
MusicSearch
}
};
</script>
Now our music search component is included in the app’s template. If you restart the development server and visit http://localhost:8080, you should see the search input and button.
Playing music tracks
Let’s enhance our app by adding the ability to play music tracks. Update the MusicSearch.vue file with the following code:
<template>
<div>
<input type="text" v-model="query" placeholder="Search for music tracks">
<button @click="search">Search</button>
<ul>
<li v-for="track in tracks" :key="track.id">
{{ track.title }} by {{ track.artist }}
<button @click="play(track)">Play</button>
</li>
</ul>
</div>
</template>
<script>
import { DeezerAPI } from 'deezer-api';
import { DEEZER_API_KEY } from '@/config';
export default {
data() {
return {
query: '',
tracks: []
};
},
methods: {
search() {
const deezerAPI = new DeezerAPI(DEEZER_API_KEY);
deezerAPI.searchTracks(this.query)
.then(response => {
this.tracks = response.data;
})
.catch(error => {
console.error(error);
});
},
play(track) {
const deezerAPI = new DeezerAPI(DEEZER_API_KEY);
deezerAPI.getTrackUrl(track.id)
.then(response => {
const audio = new Audio(response.data);
audio.play();
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
In this updated code, we’ve made the following changes:
– Inside the tracks loop, we added a “Play” button to each track. This button triggers the play method when clicked and passes the respective track as an argument.
– The play method calls the getTrackUrl method from the DeezerAPI class to obtain the URL of the track’s audio file. It then creates an instance of the Audio class, sets the audio source to the obtained URL, and calls the play method to start playing the track.
Now, when you search for music tracks and click the “Play” button next to a track, the respective track should start playing.
Conclusion
Congratulations! You have created a music player app using Vue.js and the Deezer API. In this tutorial, you learned how to set up a Vue.js project, make API requests with the Deezer API, and play music tracks using the Audio class. With this knowledge, you can further enhance the app by adding features such as a playlist, volume control, and track seek functionality. Remember to always properly handle error cases and enhance the user experience based on your requirements. Enjoy exploring the world of music with your new app!