Skip to content

Vanilla JS Music Player with basic controls, custom theming, using onloadedmetadata, user-defined CSS classes, and CSS variables. Features: Play/pause, volume Progress bar Usage: Clone the repo. Open index.html. Load your music. Contributing: Fork, create a branch, make changes, submit a pull request.

Notifications You must be signed in to change notification settings

arifur-rahaman/js-music-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Music Player

A simple music player built with vanilla JavaScript, utilizing the onloadedmetadata event, a user-defined class for styling, CSS variables for dynamic theming, and -webkit-appearance and -webkit-slider-thumb for custom slider styling.

Features:

  • Basic playback controls: Play, pause, seek, and volume adjustment.
  • Progress bar: Visual representation of song playback.
  • Dynamic theming: Customizable appearance using CSS variables.
  • Custom slider styling: Enhanced slider look and feel using -webkit-appearance and -webkit-slider-thumb.

Installation:

  1. Clone this repository.
  2. Open the index.html file in a web browser.

Usage:

  • Load your MP3 files: Replace the placeholder song URLs in the HTML file with your desired tracks.
  • Interact with the player: Use the play/pause button, seek bar, and volume slider to control playback.

Customization:

  • Theming: Modify the CSS variables in the style.css file to change the player's colors and styles.
  • Functionality: Customize the JavaScript code to add more features or modify existing behavior.

Note: This is a basic implementation and may require additional features or optimizations for production use.

About

Vanilla JS Music Player with basic controls, custom theming, using onloadedmetadata, user-defined CSS classes, and CSS variables. Features: Play/pause, volume Progress bar Usage: Clone the repo. Open index.html. Load your music. Contributing: Fork, create a branch, make changes, submit a pull request.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published