Music Player App with Next.js and API
Last Updated :
25 Jul, 2024
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:
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 .
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/
Similar Reads
Blogging Platform using Next JS In this project, we will explore the process of building The Blogging Platform with Next.js. Blogging Platform is a web application that allows users to create and publish blog posts. The platform provides a user-friendly interface for managing blog content and includes functionalities to create new
5 min read
How to Create Todo App using Next.js ? In this article, we will create a to-do application and understand the basics of Next.js. This to-do list can add new tasks we can also delete the tasks by clicking on them.Next.js is a widely recognized React framework that eÂnables server-side rendering and enhanceÂs the developmeÂnt of interacti
4 min read
Document Management System using NextJS The Document Management System is a web application developed using Next.js, that allows users to efficiently manage their documents. The system provides features for uploading, organizing, and retrieving documents. Users can upload documents through the web interface, which are then stored in local
5 min read
Create a Quiz App with Next JS In this article, we’ll explore the process of building a Quiz App utilizing NextJS. The quiz app provides users with a series of multiple-choice questions with options. Users can select the option and move to the next question. At the end, the user will be able to see the analysis of the quiz.Output
5 min read
E-commerce Dashboard with NextJS This project is an E-commerce Dashboard built with Next.js, providing features such as a dynamic sidebar, responsive navigation, order analytics, and most sold items of the week. It shows various features such as product analytics, order management, and user interaction. Output Preview: Prerequisite
11 min read
Social Networking Platform using Next.js The Social Networking Platform built with NextJS is a web application that provides users the functionality to add a post, like a post, and be able to comment on it. The power of NextJS, a popular React framework for building server-side rendered (SSR) and statically generated web applications, this
8 min read
URL Shortener Service with NextJS In this article, we will explore the process of building a URL shortener service using NextJS that takes a long URL and generates a shorter, more condensed version that redirects to the original URL when accessed. This shortened URL is typically much shorter and easier to share, especially in situat
2 min read
Contact Us Form using Next.js Creating a Contact Us form in Next.js involves setting up a form component, handling form submissions, and potentially integrating with a backend service or API to send the form data. In this article, we will create a Contact Us Form with NextJS.Output Preview: Let’s have a look at what our final pr
6 min read
Blogging Platform using Next JS In this project, we will explore the process of building The Blogging Platform with Next.js. Blogging Platform is a web application that allows users to create and publish blog posts. The platform provides a user-friendly interface for managing blog content and includes functionalities to create new
5 min read
Music Player App with Next.js and API 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 t
3 min read