Music Player App with Next.js and API

Last Updated : 04 Mar, 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.

Recording-2024-02-24-105424

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:

Screenshot-2024-02-24-104929

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/

Recording-2024-02-24-105424

Suggest improvement

How to build a simple music player app using Android Studio

How to Format Strings in TypeScript ?

Share your thoughts in the comments

Music Player App with Next.js and API

Prerequisites:

Approach To Create a Music Player App with NextJS:

Step to Create a Music Player App in NextJS:

Project Structure:

Javascript

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?