Last Updated : 23 Jul, 2025
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: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 .
JavaScript
'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"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
</Head>
<div className="player">
<img
style={{ width: '250px', height: '250px' }}
src="https://media.geeksforgeeks.org/wp-content/uploads/20231213162352/music.png"
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
const saavnSearchUrl = "https://saavn.dev/search/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/
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4