Music Player App with Next.js and API (original) (raw)

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:

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;">
        <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>s</mi><mi>o</mi><mi>n</mi><mi>g</mi><mi>N</mi><mi>a</mi><mi>m</mi><mi>e</mi></mrow><mi>b</mi><mi>y</mi></mrow><annotation encoding="application/x-tex">{songName} by </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord"><span class="mord mathnormal">so</span><span class="mord mathnormal">n</span><span class="mord mathnormal" style="margin-right:0.03588em;">g</span><span class="mord mathnormal" style="margin-right:0.10903em;">N</span><span class="mord mathnormal">am</span><span class="mord mathnormal">e</span></span><span class="mord mathnormal">b</span><span class="mord mathnormal" style="margin-right:0.03588em;">y</span></span></span></span>{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/