HTML5/CSS3/Javascript Audio Player with Playlist, responsive and lightweight ! Only 21kb !
Alexandre NOEL dd3b0a585c Fix a broken link | 1 month ago | |
---|---|---|
LICENSE | 2 months ago | |
README.md | 1 month ago | |
index.html | 1 month ago | |
script.js | 1 month ago | |
style.css | 1 month ago |
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.
You can see a live demo of the audio player here.
Clone the repository to your local machine:
git clone https://oversu.fr/git/oversu/html5-css3-audio-player-with-playlist.git
Open the index.html
file in your web browser to view the audio player.
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.
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.
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.
This project is licensed under the MIT License. See the LICENSE file for more details.
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.