In this blog, we'll guide you step-by-step in creating a basic music player in React. Whether you're just starting with React or looking to expand your skills, this project will give you a hands-on understanding of state management, component creation, and how to design an intuitive and visually appealing music player. ### Why Build a Music Player? Creating a music player is an excellent beginner project that helps you understand the core concepts of React, including Let’s get started! ### Setting Up Your React Project ```bash npx create-react-app react-music-player ``` ### Installing Necessary Dependencies ```bash npm install framer-motion ``` ```bash npm install lucide-react ``` Now that our project is set up, we can start building the music player. Before that, Let's Take a look what we are going to create in this project ![Image](https://res.cloudinary.com/dpbf0ecva/image/upload/v1730958580/react-music-player-01_kkvgxr.png) ![Image](https://res.cloudinary.com/dpbf0ecva/image/upload/v1730958574/react-music-player-02_ajdzkj.png) ![Image](https://res.cloudinary.com/dpbf0ecva/image/upload/v1730958548/react-music-player-03_jjlmxt.png) Here’s the code for our `Main.jsx`: ```javascript 'use client' import { useState, useEffect, useRef } from 'react' import { Search, SkipBack, Play, Pause, SkipForward, Volume2, Shuffle, Repeat, Radio, Library, Menu, X } from 'lucide-react' import { motion, AnimatePresence } from 'framer-motion' import song from './Bloody_Mary.mp3' export default function Component() { const [currentSongIndex, setCurrentSongIndex] = useState(0) const [isPlaying, setIsPlaying] = useState(false) const [volume, setVolume] = useState(1) const [currentTime, setCurrentTime] = useState(0) const [duration, setDuration] = useState(0) const [isShuffling, setIsShuffling] = useState(false) const [isLooping, setIsLooping] = useState(false) const [activeTab, setActiveTab] = useState('DISCOVER') const [isSidebarOpen, setIsSidebarOpen] = useState(true) const audioRef = useRef(new Audio()) const playlistItems = [ { id: '01', img: "https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png", title: 'Skin', artist: 'Flume', src: song }, { id: '02', img: "https://upload.wikimedia.org/wikipedia/en/2/28/Imagine_Dragons_Thunder.jpg", title: 'Thunder', artist: 'Imagine Dragons', src: song }, { id: '03', img: "https://upload.wikimedia.org/wikipedia/en/9/90/Jumpsuit-Nico_and_the_Niners_single_cover.png", title: 'Jumpsuit', artist: 'Twenty One Pilots', src: song }, { id: '04', img: "https://upload.wikimedia.org/wikipedia/en/3/35/Flume_-_Skin.png", title: 'Side Piece', artist: 'Snoop Dogg', src: song }, { id: '05', img: "https://i1.sndcdn.com/artworks-JrMt6yEvPiG1-0-t500x500.jpg", title: 'Surrender', artist: 'Hurts', src: song } ] const popularAlbums = [ { title: 'Children of Bodom', artist: 'Hexed', image: 'https://i.scdn.co/image/ab6761610000e5ebe51866b7c973c8aafaf1fece' }, { title: 'Black Water', artist: 'MARUV', image: 'https://is1-ssl.mzstatic.com/image/thumb/Music128/v4/d0/30/ab/d030abac-f46c-ffd3-89a3-957c1125f47c/190295594541.jpg/1200x1200bb.jpg' }, { title: 'Hurts 2B Human', artist: 'Pink', image: 'https://upload.wikimedia.org/wikipedia/en/1/17/Pink_-_Hurts_2B_Human.png' }, { title: 'No Sound Without', artist: 'The Script', image: 'https://upload.wikimedia.org/wikipedia/en/3/39/No_Sound_Without_Silence_by_The_Script.png' } ] const popularArtists = [ { name: 'Lady Gaga', image: 'https://variety.com/wp-content/uploads/2024/09/gaga_4d20fb.png?w=1000&h=667&crop=1' }, { name: 'Bruno Mars', image: 'https://hips.hearstapps.com/hmg-prod/images/gettyimages-134315104.jpg' }, { name: 'Beyonce', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Beyonc%C3%A9_-_Tottenham_Hotspur_Stadium_-_1st_June_2023_%285_of_118%29_%2852945900006%29_%28cropped_2%29.jpg/640px-Beyonc%C3%A9_-_Tottenham_Hotspur_Stadium_-_1st_June_2023_%285_of_118%29_%2852945900006%29_%28cropped_2%29.jpg' }, { name: 'Dua Lipa', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Glasto24_28_300624_%28259_of_545%29_%2853838014719%29_%28cropped%29.jpg/640px-Glasto24_28_300624_%28259_of_545%29_%2853838014719%29_%28cropped%29.jpg' }, { name: 'MARUV', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUbquH_Ya0d5KQqVMBEX11-piTdY_pd2wLpA&s' } ] const libraryAlbums = [ { title: 'Evolve', artist: 'Imagine Dragons', image: 'https://upload.wikimedia.org/wikipedia/en/1/11/Evolve_Box_Art.png' }, { title: 'Blurryface', artist: 'Twenty One Pilots', image: 'https://is1-ssl.mzstatic.com/image/thumb/Music211/v4/8e/e2/89/8ee28904-0821-610d-5011-a61845f62756/075679926951.jpg/1200x1200bf-60.jpg' }, { title: 'Chromatica', artist: 'Lady Gaga', image: 'https://upload.wikimedia.org/wikipedia/en/d/d6/Lady_Gaga_-_Chromatica_%28Official_Album_Cover%29.png' }, { title: 'Future Nostalgia', artist: 'Dua Lipa', image: 'https://i.scdn.co/image/ab67616d0000b2734bc66095f8a70bc4e6593f4f' }, { title: 'After Hours', artist: 'The Weeknd', image: 'https://i.scdn.co/image/ab67616d0000b2738863bc11d2aa12b54f5aeb36' }, { title: 'Lover', artist: 'Taylor Swift', image: 'https://upload.wikimedia.org/wikipedia/en/c/cd/Taylor_Swift_-_Lover.png' }, ] const radioStations = [ { name: 'Pop Hits', frequency: '98.5 FM', image: 'https://i1.sndcdn.com/artworks-000238705219-wqv8dm-t500x500.jpg' }, { name: 'Rock Classics', frequency: '101.1 FM', image: 'https://resources.tidal.com/images/64fc71d0/70f8/414d/ba14/30059e01f14c/640x640.jpg' }, { name: 'Smooth Jazz', frequency: '103.7 FM', image: 'https://cdn-profiles.tunein.com/s249973/images/logog.jpg?t=162282' }, { name: 'EDM Beats', frequency: '95.3 FM', image: 'https://i.scdn.co/image/ab67616d0000b2734eb60efea889b97c0ee6b171' }, { name: 'Hip Hop Now', frequency: '106.2 FM', image: 'https://www.storybench.org/wp-content/uploads/2018/12/Rap-Bubbles-e1544644776922.png' }, ] useEffect(() => { const audio = audioRef.current audio.src = playlistItems[currentSongIndex].src audio.volume = volume const updateTime = () => setCurrentTime(audio.currentTime) const updateDuration = () => setDuration(audio.duration) audio.addEventListener('timeupdate', updateTime) audio.addEventListener('loadedmetadata', updateDuration) audio.addEventListener('ended', handleNext) return () => { audio.removeEventListener('timeupdate', updateTime) audio.removeEventListener('loadedmetadata', updateDuration) audio.removeEventListener('ended', handleNext) } }, [currentSongIndex]) useEffect(() => { const audio = audioRef.current; // Set the new song source when the index changes audio.src = playlistItems[currentSongIndex].src; // Wait until the metadata is loaded before playing const onLoadedMetadata = () => { if (isPlaying) { audio.play(); // Automatically play when the song is set } }; audio.addEventListener('loadedmetadata', onLoadedMetadata); // Clean up the event listener return () => { audio.removeEventListener('loadedmetadata', onLoadedMetadata); }; }, [currentSongIndex, isPlaying]); // Handle toggling play/pause const togglePlay = () => { const audio = audioRef.current; if (isPlaying) { audio.pause(); // Pause the song } else { audio.play(); // Play the song } setIsPlaying(!isPlaying); // Toggle the play state }; const handleNext = () => { setCurrentSongIndex((prevIndex) => { if (isShuffling) { let newIndex do { newIndex = Math.floor(Math.random() * playlistItems.length) } while (newIndex === prevIndex) return newIndex } return (prevIndex + 1) % playlistItems.length }) } const handlePrevious = () => { setCurrentSongIndex((prevIndex) => { if (isShuffling) { let newIndex do { newIndex = Math.floor(Math.random() * playlistItems.length) } while (newIndex === prevIndex) return newIndex } return prevIndex === 0 ? playlistItems.length - 1 : prevIndex - 1 }) } const handleVolumeChange = (e) => { const newVolume = parseFloat(e.target.value) setVolume(newVolume) audioRef.current.volume = newVolume } const handleSeek = (e) => { const seekTime = parseFloat(e.target.value) setCurrentTime(seekTime) audioRef.current.currentTime = seekTime } const toggleShuffle = () => setIsShuffling(!isShuffling) const toggleLoop = () => { setIsLooping(!isLooping) audioRef.current.loop = !isLooping } const formatTime = (time) => { const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes}:${seconds.toString().padStart(2, '0')}` } const renderDiscoverContent = () => ( <> {/* Hero Section */}

Flume: Skin

Flume walks us through his 'weird' new album, 'Skin'. He has one goal: "I wanna make weird stuff."

{/* Popular Albums */}

Popular Albums

{popularAlbums.map((album, index) => (

{album.title}

{album.artist}

))}

{/* Popular Artists */}

Popular Artists

{popularArtists.map((artist, index) => (

{artist.name}

))}

) const renderLibraryContent = () => (

My Library

{libraryAlbums.map((album, index) => (

{album.title}

{album.artist}

))}

) const renderRadioContent = () => (

Radio Stations

{radioStations.map((station, index) => (

{station.name}

{station.frequency}

))}

) return (

{/* Main Content */}

{/* Sidebar */} {isSidebarOpen && (

Playlist

{playlistItems.map((item, index) => ( { setCurrentSongIndex(index) setIsPlaying(true) audioRef.current.play() }} > {item.id} {`${item.title}`}

{item.title}

{item.artist}

))}

)} {/* Main Content Area */}

{/* Navigation */}

{/* Conditional Content Rendering */} {activeTab === 'DISCOVER' && renderDiscoverContent()} {activeTab === 'MY LIBRARY' && renderLibraryContent()} {activeTab === 'RADIO' && renderRadioContent()}

{/* Player Bar */}

{playlistItems[currentSongIndex].title}

{playlistItems[currentSongIndex].artist}

{formatTime(currentTime)} {formatTime(duration)}

) } ```

Building a Basic React Music Player with Advanced Design