https://github.com/stephenombuya/music-player

Welcome to the Music Player App ! This repository contains a simple, interactive music player built with HTML, CSS, and JavaScript. The app allows users to interact with a music playlist, control playback, and shuffle through songs. It’s an ideal project for beginners to learn string and array methods in JavaScript while creating a functional.
https://github.com/stephenombuya/music-player

arrays-and-strings css3 html5 javascript

Last synced: 7 days ago
JSON representation

Welcome to the Music Player App ! This repository contains a simple, interactive music player built with HTML, CSS, and JavaScript. The app allows users to interact with a music playlist, control playback, and shuffle through songs. It’s an ideal project for beginners to learn string and array methods in JavaScript while creating a functional.

• Host: GitHub
• URL: https://github.com/stephenombuya/music-player
• Owner: stephenombuya
• License: mit
• Created: 2024-10-21T14:01:53.000Z (30 days ago)
• Default Branch: main
• Last Pushed: 2024-10-21T14:19:11.000Z (30 days ago)
• Last Synced: 2024-10-21T23:08:56.774Z (30 days ago)
• Topics: arrays-and-strings, css3, html5, javascript
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# **Music Player App**

Welcome to the Music Player App project! This repository contains a simple, interactive music player built with HTML, CSS, and JavaScript. The app allows users to interact with a music playlist, control playback, and shuffle through songs. It’s an ideal project for beginners to learn string and array methods in JavaScript while creating a functional music player.

### **Table of Contents**

- Overview

- Features

- Technologies

- Getting Started

- Usage

- Contributing

- License

### **Overview**

This project taught me basic JavaScript skills like string manipulation, array methods, and DOM manipulation by building a simple music player app. You’ll learn to create an interactive user interface with play, pause, next, previous, and shuffle buttons, along with a playlist that users can select from.

### **Features**

1. **Play and Pause**: Users can play and pause the current track.

2. **Next and Previous**: Navigate between tracks in the playlist.

3. **Shuffle**: Randomly shuffle the playlist order.

4. **Playlist**: View and select songs from the list.

5. **Album Art**: Displays the cover art of the currently playing song.

6. **Responsive Design**: The app adjusts to different screen sizes for a smooth experience on mobile devices.

### **Technologies**

- **HTML: For structuring the app’s content.

- **CSS**: For styling the user interface.

- **JavaScript**: For adding interactivity and handling the logic behind the music player.

### **Getting Started**

To get a local copy of the project up and running, follow these simple steps:

#### Prerequisites

You will need a code editor like VS Code and a web browser like Chrome or Firefox.

#### Installation

- Clone the repository:

```

git clone https://github.com/stephenombuya/Music-Player

```

- Navigate to the project directory:

```

cd music-player-app

```

- Open the index.html file in your browser to view the app.

### **Usage**

1. Playing Music

- **Play a Song**: Press the play button to start playing the song.

- **Pause the Song**: Press the pause button to stop the playback.

- **Next Song**: Use the "Next" button to skip to the next song.

- **Previous Song**: Use the "Previous" button to go back to the previous song.

- **Shuffle Songs**: Click the shuffle button to randomize the order of songs in the playlist.

2. Playlist

You can click on any song in the playlist to start playing that track.

### **Contributing**

Contributions are what make the open-source community such a great place to learn, inspire, and create. Any contributions you make are greatly appreciated.

### **Fork the project.**

- Create your feature branch (git checkout -b feature/AmazingFeature).

- Commit your changes (git commit -m 'Add some AmazingFeature').

- Push to the branch (git push origin feature/AmazingFeature).

- Open a Pull Request.

### **License**

Distributed under the MIT License. See [LICENSE](https://github.com/stephenombuya/Music-Player/blob/main/LICENSE) for more information.