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 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 .
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.w3wiki.net/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/
Contact Us