web application to play Mp3

The Audio Player Application is a modern web-based audio player built using React. It features a sleek black and blue design, making it visually appealing and user-friendly. Here are the key components and functionalities:

Key Features:

1. *Responsive Design*: The application is fully responsive, ensuring an optimal viewing experience across various devices, from desktops to mobile phones.

2. *Dynamic Playlist*: Users can navigate through a playlist of songs, which includes titles and album cover images. The current track is highlighted for easy identification.

3. *Playback Controls*: The player provides essential controls, including:
– *Play/Pause*: Toggle between playing and pausing the current track.
– *Next/Previous*: Navigate to the next or previous track in the playlist.

4. *Volume Control*: Users can adjust the volume using a slider, allowing for a personalized audio experience.

5. *Progress Bar*: A visual progress bar shows the current playback position and allows users to seek to different parts of the track.

6. *Album Cover Display*: The application dynamically displays the album cover of the currently playing track, enhancing the visual aspect of the player.

7. *User Interaction*: The playlist items are clickable, allowing users to select and play any track from the list.

Technology Stack:
– *React*: The application is built using React, a popular JavaScript library for building user interfaces.
– *CSS*: Custom styles are applied using CSS, providing a modern look and feel, with a focus on usability and aesthetics.

Conclusion:

import React, { useState, useRef, useEffect } from 'react';

const AudioPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
  const [volume, setVolume] = useState(1);
  const [progress, setProgress] = useState(0);
  
  const audioRef = useRef(null);

  const tracks = [
    { title: "Saturn - sza", src: "../public/Saturn.mp3", cover: "../public/sza.jpg" },
    { title: "die mountain dew - lana del rey", src: "../public/diet.mp3", cover: "../public/lanad.jpg" },
    { title: "Summertime Sadness - lana del rey", src: "../public/summertime.mp3", cover: "../public/lana s.png" },
  ];

  const togglePlayPause = () => {
    if (isPlaying) {
      audioRef.current.pause();
    } else {
      audioRef.current.play();
    }
    setIsPlaying(!isPlaying);
  };

  const handleNextTrack = () => {
    if (isShuffle) {
      const randomIndex = Math.floor(Math.random() * tracks.length);
      setCurrentTrackIndex(randomIndex);
    } else {
      setCurrentTrackIndex((prevIndex) => (prevIndex + 1) % tracks.length);
    }
  };

  const handlePreviousTrack = () => {
    setCurrentTrackIndex((prevIndex) =>
      prevIndex === 0 ? tracks.length - 1 : prevIndex - 1
    );
  };

  const handleVolumeChange = (e) => {
    const newVolume = e.target.value;
    setVolume(newVolume);
    audioRef.current.volume = newVolume;
  };

  const handleProgressChange = (e) => {
    const newProgress = e.target.value;
    setProgress(newProgress);
    audioRef.current.currentTime = newProgress;
  };

  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.volume = volume;
      audioRef.current.src = tracks[currentTrackIndex].src;
      if (isPlaying) {
        audioRef.current.play();
      }
    }
  }, [currentTrackIndex, volume]);

  useEffect(() => {
    const updateProgress = () => {
      if (audioRef.current) {
        setProgress(audioRef.current.currentTime);
      }
    };

    audioRef.current.addEventListener('timeupdate', updateProgress);
    return () => {
      audioRef.current.removeEventListener('timeupdate', updateProgress);
    };
  }, []);

  return (
    <div className="audio-player">
      <h1>MP3 Player</h1>
      <img src={tracks[currentTrackIndex].cover} alt="Album Cover" className="album-cover" />
      <audio ref={audioRef} />
      <h2>{tracks[currentTrackIndex].title}</h2>
      <div className="controls">
        <button onClick={handlePreviousTrack}>Previous</button>
        <button onClick={togglePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button>
        <button onClick={handleNextTrack}>Next</button>
      </div>
      <div className="volume-control">
        <label>Volume:</label>
        <input type="range" min="0" max="1" step="0.01" value={volume} onChange={handleVolumeChange} />
      </div>
      <div className="progress-container">
        <span>{Math.floor(progress)}s</span>
        <input type="range" min="0" max={audioRef.current?.duration || 0} value={progress} onChange={handleProgressChange} />
        <span>{Math.floor(audioRef.current?.duration || 0)}s</span>
      </div>
      <div className="playlist">
        <ul>
          {tracks.map((track, index) => (
            <li key={index} className={index === currentTrackIndex ? 'active' : ''} onClick={() => setCurrentTrackIndex(index)}>
              {track.title}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default AudioPlayer;

 

This Audio Player Application serves as a robust and interactive tool for music playback, combining functionality with a stylish interface. It is suitable for users looking to enjoy their music in a seamless and engaging manner. Whether for personal use or as a component within a larger project, this application showcases essential web development skills and modern design principles.