In this tutorial, we’ll create a Music Player App using NextJS, a React framework. Explore frontend development, API integration, and UI design to build a user-friendly app for seamless music enjoyment. Join us in harmonizing code and creativity to craft an engaging Music Player App with NextJS in the digital age.
Output Preview: Let us have a look at how the final output will look like.
Prerequisites:
- HTML, CSS, and JavaScript.
- NPM & NodeJS
- ReactJS & NextJS
- RestFul API
Approach To Create a Music Player App with NextJS:
- To create our Music Player App using NextJS, we’ll systematically implement key functionalities for a seamless user experience.
- First, we’ll integrate a search feature using the Saavn API, allowing users to input song names and retrieve relevant results.
- These results will be dynamically displayed in a list format, featuring music titles, artist names, and thumbnail images.
- Upon selecting a track, we’ll enable playback using HTML5 audio elements for easy audio streaming in the browser.
- Essential player controls such as play, pause, and volume adjustment will enhance user interaction.
- We’ll prioritize responsive design to ensure optimal viewing on various devices, delivering an enjoyable experience across desktop and mobile platforms.
Step to Create a Music Player App in NextJS:
Step 1: Create a new NextJS project by using the following command.
npx create-next-app my-music-player.
Step 2: Navigate into the project directory
cd my-music-player.
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"next": "14.1.0",
"react": "^18",
"react-dom": "^18"
},
Example: Write the following code in App.js file .
'use client' import React, { useEffect
} from 'react' ;
import Head from 'next/head' ;
const Home = () => { useEffect(() => {
window.playSong = playSong;
return () => {
delete window.playSong;
};
}, []);
return (
<div className= "container" >
<Head>
<title>Music Player</title>
<link
rel= "stylesheet"
/>
</Head>
<div className= "player" >
<img
style={{ width: '250px' , height: '250px' }}
alt= "audio player"
id= "audioPlayerimg"
/>
<br />
<audio id= "audioPlayer" className= "w-100" controls>
Your browser does not support the audio element.
</audio>
</div>
<div id= 'search_song' >
<label htmlFor= "Search" >Search Song:</label>
<input
type= "text"
id= "Search"
onInput={SearchSongs}
placeholder= "Enter song name"
/>
<button onClick={SearchSongs}>Search</button>
</div>
<ul id= "playlist" className= "list-group" ></ul>
<style jsx>{`
.container {
font-family: "Arial" , sans-serif;
margin: 50px;
}
#search_song{
text-align: center;
}
.player {
text-align: center;
width: 100%;
max-width: 400px;
margin: 20px auto;
}
#playlist {
list-style: none;
padding: 0;
}
#playlist li {
margin: 5px;
cursor: pointer;
transition: transform 0.3s ease- in -out;
display: flex;
justify-content: space-between;
align-items: center;
}
#playlist li:hover {
transform: scale(1.1);
}
`}</style>
</div>
);
}; export default Home;
function playSong(songSrc, songimg) {
const audioPlayer = document.getElementById( "audioPlayer" );
const audioPlayerimg = document.getElementById( "audioPlayerimg" );
document.querySelectorAll( "#playlist li" ).forEach((item) => {
item.style.transform = "scale(1)" ;
});
audioPlayerimg.src = songimg;
audioPlayer.src = songSrc;
audioPlayer.play();
} function SearchSongs() {
const SearchSong = document.getElementById( "Search" ).value.toLowerCase();
// Saavn API endpoint for searching songs
// Query parameters for the search
const params = {
query: SearchSong,
};
// Request headers
const headers = {
"Content-Type" : "application/json" ,
};
// Make the GET request to search for songs
fetch(`${saavnSearchUrl}?${ new URLSearchParams(params)}`, {
method: "GET" ,
headers: headers,
})
.then((response) => response.json())
.then((songData) => {
const playlist = document.getElementById( "playlist" );
playlist.innerHTML = "" ;
for (const song of songData.data.results) {
const songName = song.name;
const artistName = song.primaryArtists;
const highestQualityDownloadUrl = song.downloadUrl.find(
(downloadUrl) => downloadUrl.quality === "320kbps"
);
const image150x150 = song.image.find(
(image) => image.quality === "500x500"
);
playlist.innerHTML += `<li class= "list-group-item"
onclick= "playSong('${highestQualityDownloadUrl.link}',
'${image150x150.link}')" ><span>
<img src= "${image150x150.link}" style= "width:50px; height:50px;" >
${songName} by ${artistName}</span>
</li>`;
}
})
. catch ((error) => console.error( "Error:" , error));
} |
Start your application using the following command.
npm run dev
Output: Open web-browser and type the following URL http://localhost:3000/