# 🎵 Build Your Own Music Player in React with Context API and TypeScript

Creating a music player in React is a fantastic way to learn about state management, component interaction, and modern web development tools. In this article, I’ll guide you through building an interactive music player app using React, TypeScript, and the Context API.

---

🚀 Features of the Music Player

1. Dynamic Track List: Displays a list of tracks with playback controls.
2. Global State Management: Uses Context API to manage the current track, playback status, and navigation between tracks.
3. Keyboard Shortcuts: Control playback with the spacebar (play/pause) and arrow keys (next/previous).
4. Responsive Design: Styled with Bulma for a clean and modern UI.
5. Accessibility: Fully accessible with ARIA labels and screen reader support.

---

🛠️ Tech Stack

• React: For building the user interface.
• TypeScript: To add static typing and ensure code robustness.
• Bulma: For styling the UI components.
• FontAwesome: For beautiful playback icons.
• Context API: For managing global state without external libraries.

---

🌟 The Code Structure

Here's an overview of the project's structure:

1. Context API for Global State

The MusicPlayerContext is responsible for managing:

• The list of available tracks.
• The currently playing track.
• Playback controls (play, pause, next, previous).

import { createContext, useState } from "react";

export const MusicPlayerContext = createContext();

const MusicPlayerProvider = ({ children }) => {
  const [state, setState] = useState({
    tracks: [
      { name: "Track 1", file: "track1.mp3" },
      { name: "Track 2", file: "track2.mp3" },
    ],
    currentTrackIndex: null,
    isPlaying: false,
  });

  return (
    <MusicPlayerContext.Provider value={[state, setState]}>
      {children}
    </MusicPlayerContext.Provider>
  );
};

export default MusicPlayerProvider;

---

2. Custom Hook for Simplification

A custom hook, useMusicPlayer, encapsulates the logic for interacting with the MusicPlayerContext. This makes components cleaner and easier to manage.

import { useContext } from "react";
import { MusicPlayerContext } from "./MusicPlayerContext";

const useMusicPlayer = () => {
  const [state, setState] = useContext(MusicPlayerContext);

  const playTrack = (index) => {
    if (index === state.currentTrackIndex) {
      togglePlay();
    } else {
      const newTrack = state.tracks[index];
      setState({ ...state, currentTrackIndex: index, isPlaying: true });
      console.log(`Playing: ${newTrack.name}`);
    }
  };

  const togglePlay = () => {
    setState({ ...state, isPlaying: !state.isPlaying });
  };

  return { ...state, playTrack, togglePlay };
};

export default useMusicPlayer;

---

3. UI Components

PlayerControlshandles the playback buttons:

import useMusicPlayer from "../hooks/useMusicPlayer";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlay, faPause } from "@fortawesome/free-solid-svg-icons";

export default function PlayerControls() {
  const { isPlaying, togglePlay } = useMusicPlayer();

  return (
    <button onClick={togglePlay}>
      {isPlaying ? <FontAwesomeIcon icon={faPause} /> : <FontAwesomeIcon icon={faPlay} />}
    </button>
  );
}

TrackListdisplays the list of tracks:

import useMusicPlayer from "../hooks/useMusicPlayer";

export default function TrackList() {
  const { trackList, playTrack } = useMusicPlayer();

  return (
    <ul>
      {trackList.map((track, index) => (
        <li key={index}>
          <button onClick={() => playTrack(index)}>{track.name}</button>
        </li>
      ))}
    </ul>
  );
}

---

🔥 What I Learned

1. Context API: Simplifies state management for small to medium-sized projects, eliminating the need for external state management libraries.
2. TypeScript: Adds static typing, improving code reliability and reducing runtime errors.
3. Custom Hooks: Encapsulates complex logic into reusable and maintainable functions, leading to cleaner components.
4. Keyboard Accessibility: Implementing keyboard shortcuts enhanced the user experience and taught me the importance of accessibility in web applications.
5. UI Libraries: Using Bulma and FontAwesome sped up development while ensuring the interface remained visually appealing and responsive.

---

📚 Next Steps

1. Playlist Support: Add functionality to create and manage playlists, allowing users to organize their favorite tracks.
2. Track Duration and Progress Bar: Display the duration of each track and implement a progress bar to show playback progress.
3. Shuffle and Repeat: Introduce shuffle mode and repeat functionality for a more feature-rich player.
4. Volume Control: Add a volume slider to let users adjust the playback volume.
5. UI Enhancements: Use animations and transitions to make the interface more interactive and visually engaging.
6. Offline Mode: Allow users to cache tracks locally for offline playback.

---

🛠️ Source Code

The complete source code for this project is available on GitHub. Feel free to explore, clone, and contribute to the repository:

🔗 GitHub Repository: Music Player with Context API in React