Giter VIP home page Giter VIP logo

erikote04 / music-player Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 1.0 43 KB

Project No. 3 of 21 of the freeCodeCamp course "JavaScript Algorithms and Data Structures". In this project, you'll code a basic MP3 player using HTML, CSS, and JavaScript. The project covers fundamental concepts such as handling audio playback, managing a playlist, implementing play, pause, next, previous, and shuffle functionalities.

Home Page: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/#learn-basic-string-and-array-methods-by-building-a-music-player

HTML 34.97% CSS 25.91% JavaScript 39.12%
array arrays arrays-and-strings find foreach foreach-loop javascript join js map string css html html-css-javascript

music-player's Introduction

Music Player App

Overview

The Music Player App is a web-based application designed to provide users with a simple and intuitive interface for playing and managing a playlist of songs. The app includes essential features such as play, pause, skip, shuffle, and playlist management.

music-player music-player-media-query

Features

1. Player Controls

  • Previous: Skip to the previous song.
  • Play/Pause: Start or pause the current song.
  • Next: Skip to the next song.
  • Shuffle: Shuffle the playlist order for a dynamic listening experience.

2. Playlist Management

  • Delete Song: Remove unwanted songs from the playlist.
  • Reset Playlist: Reset the playlist to the default set of songs.

How to Use

  1. Player Controls:

    • Click the "Previous" button to skip to the previous song.
    • Use the "Play/Pause" button to start or pause the current song.
    • Click the "Next" button to skip to the next song.
    • The "Shuffle" button rearranges the playlist for a randomized order.
  2. Playlist Management:

    • Each song in the playlist displays its title, artist, and duration.
    • Click on a song to play it.
    • Use the "Delete" button to remove a song from the playlist.

Playlist Display

  • The main screen shows the current song's title and artist.
  • The playlist is displayed with options to play or delete each song.

Playlist Reset

  • If the playlist is empty, a "Reset Playlist" button appears.
  • Clicking this button restores the default playlist.

Script Structure

  • The script (script.js) is well-organized with functions for each feature.
  • Event listeners are set up for player controls and playlist interactions.

Customization

Feel free to customize the playlist by adding or removing songs in the allSongs array in script.js.

const allSongs = [
  {
    id: 0,
    title: "Your Song Title",
    artist: "Artist Name",
    duration: "4:00",
    src: "https://your-audio-source-url.mp3",
  },
  // Add more songs as needed...
];

Dependencies

Getting Started

  1. Clone the repository: git clone https://github.com/Erikote04/Music-Player.git

  2. Open index.html in your preferred web browser.

  3. Start listening to music!

music-player's People

Contributors

erikote04 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

naveen4703

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.