https://github.com/03-bunny-06/music-web-app
This is a music web app that have various albums you can play and enjoy. The script dynamically links album names to audio files, allowing users to play or pause songs by clicking on corresponding album elements on the webpage.
https://github.com/03-bunny-06/music-web-app
css html html-css-javascript html5 javascript js-audio
Last synced: 2 months ago
JSON representation
This is a music web app that have various albums you can play and enjoy. The script dynamically links album names to audio files, allowing users to play or pause songs by clicking on corresponding album elements on the webpage.
- Host: GitHub
- URL: https://github.com/03-bunny-06/music-web-app
- Owner: 03-Bunny-06
- Created: 2024-10-10T05:21:46.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-14T06:23:22.000Z (3 months ago)
- Last Synced: 2025-03-14T07:27:40.421Z (3 months ago)
- Topics: css, html, html-css-javascript, html5, javascript, js-audio
- Language: HTML
- Homepage: https://best-music-web-app.netlify.app/
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Music Album Player
## Project Description:
This project is a simple web-based music album audio player built using JavaScript. The script dynamically links album names to audio files, allowing users to play or pause songs by clicking on corresponding album elements on the webpage.
## Features:
- **Interactive Music Albums:** Users can click on an album to play or pause the associated song.
- **Dynamic Audio Mapping:** Each album element is mapped to a specific audio file.
- **Play/Pause Toggle:** Clicking on the same album toggles between playing and pausing the audio.
## How It Works:
1. The script waits for the DOM content to fully load.
2. Each album element is linked to an audio file using the `audioFiles` object.
3. When an album is clicked:
- If the song is not already playing, a new `Audio` instance is created, and playback starts.
- If the song is already playing, it pauses playback.
- The album's visual state (e.g., adding a `playing` class) updates to reflect whether the song is playing or paused.
## Requirements:
- A web page containing elements with the class `music-album`.
- The text content of the album's adjacent sibling element should match the song name in the `audioFiles` object.
- The corresponding `.mp3` files should be present in the same directory as the script or accessible via the given path.
## Usage:
1. Add the script to your HTML file.
2. Include `div` elements with the class `music-album` in your markup for each album.
3. Place the song name as the text content of the sibling element adjacent to the `music-album` element.
4. Ensure all `.mp3` files are available in the specified location.
