Audio Player with Playlist
This versatile audio player offers
HUGE amount of customization options and layout possibilities.
By using the basic css skills, player can be restyled into pretty much anything! Just check demo examples to get you imagination going.
All
DEMO examples included in the download package for quick and easy setup.
Features and options:
- Destop, mobile and tablet support (fully responsive)
- jQuery 1.7.x – jQuery 2.+ / 3.+ Compatible
- Conditional script loading (improves usability and performance)
- Highly customizable with HTML and CSS
- Font Awesome Library icons
- Only mp3 audio format required for all browsers and devices
- Support for media from Google Drive, Amazon S3.. (any public link that plays in browser)
- Support for Shoutcast servers that have mp3 streaming
- Song statistics (plays, likes, downloads), example here
- Playlist options available:
- Audio mp3 playlist
- XML playlist
- Playlist from folder of mp3 files (plus fetch id3 tags)
- Google drive playlist
- Podcasts RSS
- SoundCloud (track set, user tracks, single track, user favorites)
- Apple HLS Live Streaming m3u8
- Playback options:
- random playback
- loop playlist
- playback speed
- start / end time
- Media end action (go to next song / loop current song)
- Mix different media types in the same playlist
- Play music continously across web pages:
- by remembering playback position
- with option to open player is a separate popup window
- Automatically hide currently playing audio source to prevent audio download
- Support for multiple instances in the same page
- Optional keyboard audio navigation (pause/play, mute/unmute, next, previous)
- Automatically created thumbnails for Podcast, Soundcloud
- Optional social share (facebook, twitter, tumblr)
- API methods available
- Play media
- Pause media
- Toggle playback
- Next media
- Previous media
- Load media
- Load playlist
- Add track(s) to playlist
- Remove track(s) from playlist
- Sort playlist items by title / random (ascending / descending)
- Destroy media
- Destroy playlist
- Set playback rate
- Toggle random
- Toggle playlist loop
- Get / set volume
- Toggle mute
- Seek
- Get current time
- Get duration
- Get load progress
- Set autoplay
- Set title
- Get playlist transition on
- Get playlist loaded
- Get active item id
- Get playlist length
- Get media playing
- Get playlist data
- Get current media data
- Get settings
- Callbacks available
- Setup done
- Playlist end
- Playlist start load
- Playlist end load
- Playlist empty
- Media empty
- Destroy media
- Destroy playlist
- Media triggered
- Media start
- Media play
- Media pause
- Media end
- Media seek
- Playlist item enabled
- Playlist item disabled
- Playlist item rollover
- Playlist item rollout
- Playlist item click
- Volume change
- Progress change
Included layouts:
Metalic example
Metalic example, 100% size
Statistics example
Default example, with playlist selector
Default example, 100% size
Default example
Default example, with popup option
Minimize on page scroll
Fixed player with continous playback
Artwork example
Artwork example 3
Artwork example 5
Artwork example 5, 100% size
Artwork example 6
Artwork example 8
Artwork example 9
Artwork example 9, 100% size
Audio with fullscreen images
Audio with ads
Circle progress bar with background slideshow
Multiple circular progress bars
Classic example dark
Classic example dark with thumbnail
Classic example light
Classic example light 2
Classic example light 2 with thumbnail
Tiny players light
Tiny players dark
Fixed player bottom 3
Fixed player bottom 4
Fixed player bottom 5
Fixed player bottom 6
Fixed player bottom 7
Fixed player bottom 8
Fixed player bottom 9
Fixed player bottom 10
Inline text links
Inline text links 2
Inline images links
Minimal example
Metro style
Metro style 2
Modern example
Modern example, 100% size
Modern example 2
Modern example 3
Modern example 3, 100% size
Modern example 5
Modern example 5, 100% size
Modern example 6
Modern example 7
Modern example 8
Modern example 9
Player in left side panel
Poster example
Poster example with seekbar
Poster example with seekbar 2
Text version
Horizontal scrollable thumbnails
Horizontal scrollable thumbnails 2
Horizontal scrollable thumbnails 3
Vertical scrollable thumbnails
Video style 1
Video style 2, horizontal playlist
Video style 3, vertical playlist
Video style 4
Video style 5
Video style 6
Wall example, circular thumbnails
Wall example 2
Draggable example
Load more on total scroll in playlist