html5-css3-audio-player-with-playlist

Simple Audio Player with Playlist

This project is a simple audio player with a playlist, built using HTML, CSS, and JavaScript. It supports basic audio controls, displays the current and total duration of the audio, and allows for autoplay of the next track in the playlist.

Features

• Play, pause, and navigate through the audio tracks
• Display album cover, title, and artist information
• Volume control with mute/unmute functionality
• Progress bar for tracking the audio playback
• Autoplay the next track when the current track ends
• Shuffle and repeat functionality
• Show/hide album and playlist

Demo

You can see a live demo of the audio player here.

Installation

1. Clone the repository to your local machine:

   git clone https://oversu.fr/git/oversu/html5-css3-audio-player-with-playlist.git
   

2. Open the index.html file in your web browser to view the audio player.

Usage

• Play/Pause: Click the play/pause button to start or stop the audio.
• Previous/Next: Use the previous and next buttons to navigate through the playlist.
• Volume Control: Adjust the volume slider to control the audio volume. Click the mute button to mute/unmute the audio.
• Progress Bar: Drag the progress bar to seek through the audio track.
• Shuffle: Click the shuffle button to toggle shuffle mode.
• Repeat: Click the repeat button to toggle repeat mode.
• Show/Hide Album/Playlist: Use the buttons to show or hide the album and playlist sections.

Code Explanation

JavaScript Functions

addEventListener_multi(element, eventNames, handler)

Adds multiple event listeners to an element.

getRandom(min, max)

Generates a random number within a specific range.

getRelativePos(elm)

Retrieves the position of an element relative to its parent.

formatTime(val)

Formats time in seconds to HH:MM:SS format.

simp_initTime()

Initializes the time display and handles the end of the audio track.

simp_initAudio()

Initializes the audio element and sets up event listeners.

playNextTrack()

Plays the next track in the playlist.

simp_changeAudio(elem)

Changes the audio track to the specified element.

simp_loadAudio(elem)

Loads the specified audio element.

simp_setAlbum(index)

Sets the album information based on the current index.

simp_startScript()

Starts the script to initialize the player.

HTML Structure

The HTML structure includes an audio element and various controls for playback, volume, and track navigation. The playlist is displayed as a list of items.

CSS Styling

The CSS provides the styling for the audio player, including the layout of the controls, the appearance of the album and playlist, and the responsive design for different screen sizes.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

If you have suggestions for improving this project, feel free to submit a pull request or open an issue. Contributions are welcome!

---

Note: This project is based on the code provided in the CodePen demo by sekedus.