HTML5 Audio Player with Playlist

Click image to view demo

Updates / Changelog

VERSION 7.12 [4.1.2023]

 
 - [FIX] if auto open popup window, on popup close, player could not be initalized
 - [UPDATE] mid audio adverts play all in sequence
 - [UPDATE] iTunes podcast support

VERSION 7.1 [12.12.2022]

 
 - [FIX] if you copy embed url that already contains player query url parameters, they will get doubled
 - [FIX] keyboard controls event duplicating 

 - [ADD] option to pass Hls config parameters

 - [UPDATE] update to gtag analytics
 - [UPDATE] seekbar tooltip showing on mobile
 - [UPDATE] on close popup window, show player in page again
 - [UPDATE] added popup button to epic skin

VERSION 7.02 [18.11.2022]

 
 - [FIX] statistics skiped first minute counting for all songs, updated to count only if at least few seconds played
 - [FIX] if Pause audio during ads was false and ad-pre or ad-end was playing, progresss seekbar would interfere with ad seekbar

VERSION 7.01 [11.11.2022]

 
 - [FIX] not playing hls source

VERSION 7 [20.10.2022]

 
 - [FIX] variations not selecting correct audio source
 - [FIX] lyrics autoscroll scrolling whole page 
 - [FIX] epic skin, waveform loader not visible while waveform is loading

 - [UPDATE] converted player to javascript only (no jquery dependencies)
 - [UPDATE] new sticky player design and layouts 

 - [ADD] set placeholder image in player artwork area, if no song is loaded on start

VERSION 6.71 [19.7.2022]

 
 - [FIX] bug with ad end

VERSION 6.7 [14.5.2022]

 
 - [FIX] player thumb url sometimes failed because of encodeURI which is applied if url has spaces

 - [UPDATE] custom icons support SVG 
 - [UPDATE] custom playlist icons dont need to have url attached
 - [UPDATE] specify custom class for custom playlist icon and custom function callback
 - [UPDATE] facebook share no longer requires api key
 - [UPDATE] whatsapp share 

 - [ADD] option to use default browser scrollbar in playlist 
 - [ADD] support for IMA, VAST audio ads
 - [ADD] more ad event callbacks so ads can be tracked
 - [ADD] option to password protect song 

VERSION 6.31 [18.3.2022]

 - [FIX] podcast may fail if not contain artwork image
 - [FIX] multiple players in page with sticky player not changing song in sticky player correctly

VERSION 6.3 [28.11.2021]

 - [UPDATE] avoid your own input field in player interfere with keyboard controls
 - [ADD] option to crossfade audio between 2 songs
 - [FIX] ads not playing first defined ad mid on start, but second
 - [FIX] sortable tracks not updating after sort
 - [FIX] audio not resuming time but starting from beginning after s3 url expires 

VERSION 6.0 [9.11.2021]

 - [ADD] add rel attribute for playlist item link and additional playlist icons
 - [ADD] play audio from OneDrive (single or folder)
 - [ADD] option to read ID3 tags from Google drive or OneDrive folder (requires cors)
 - [ADD] display song variations (option to display several different versions of the song: Long version, 30s version, 15s version etc..)

VERSION 5.96 [12.10.2021]

 - [FIX] accordion not opening completely on start sometimes (to show all tracks) 
 - [FIX] waveform preloader stays visible when peak data is provided

VERSION 5.95 [8.9.2021]

 - [UPDATE] added Amazon S3 region setting
 - [UPDATE] resume S3 audio if url expires
 - [ADD] Cloudfront integration with S3

VERSION 5.9 [23.7.2021]

 - [ADD] amazon s3 support with private buckets
 - [ADD] option to show playlist display with selectize drop down menu above the player
 - [ADD] option to auto advance to next song on error 

VERSION 5.85 [25.06.2021]

 
 - [ADD] audio waveform generator tool

VERSION 5.84 [23.06.2021]

 
 - [FIX] IOS resume playback position

VERSION 5.81 [11.06.2021]

 
 - [FIX] radio playback not showing song data on mobile locked screen

VERSION 5.8 [12.05.2021]

 
 - [FIX] progress bar size sometimes incorrect on player start

 - [UPDATE] searching for songs in playlist will only play songs found by search (not compatible with accordion)
 - [UPDATE] option to use keyboard controls globally per page (valid only for one player in page) 
 - [UPDATE] grid skins

 - [ADD] option to add custom icons in playlist with url link to each
 - [ADD] option to show sticky player at page bottom, plays song from active player in page
 - [ADD] optional waveform seekbar in some skins
 - [ADD] new skins (Epic, Epic mini)

VERSION 5.25 [25.03.2021]

 
  - [FIX] hls media not seeking
  - [UPDATE] select your own keyboard controls

VERSION 5.2 [25.02.2021]

 
  - [ADD] option to use PerfectScrollbar instead of mCustomScroll in playlist

VERSION 5.15 [22.02.2021]

 
 - [ADD] time anchors (click on any HTML element in the page to jump directly into specified song time)
 - [FIX] playlist accordion mode search field search opened accordions 
 - [UPDATE] time fields and seekbar are now enabled for media type hls
 - [ADD] option to stop on song end

VERSION 5.11 [2.2.2021]

 
 - [UPDATE] option to add HTML description to songs in playlist
 - [UPDATE] playback rate global value in player settings
 - [UPDATE] show / hide full song description text in playlist with "Read more" button

VERSION 5.1 [18.1.2021]

 
 - [UPDATE] clean some code
 - [FIX] some bugs

VERSION 5.0 [24.12.2020]

 
 - [FIX] soundcloud private tracks 
 - [FIX] query parameters missing hap-query-instance in help documentation
 - [UPDATE] keyboard controls improve
 - [UPDATE] AB loop improve
 - [ADD] audio lyrics 
 - [ADD] ASL / sign language video synchronize with audio

VERSION 4.4 [16.8.2020]

  

 - [UPDATE] podcast description html formatted (preserve links etc...)
 - [UPDATE] choose playlist item element(s) which will receive click event

VERSION 4.4 [14.8.2020]

  

 - [FIX] global playlist options not working on new playlist load

 - [UPDATE] social sharing url for multiple players in page
 - [UPDATE] define min and max playback rate 
 - [UPDATE] create custom playlist item HTML markup (thumb, title, description...)

 - [ADD] song preview option (play ~10 seconds short song preview snippet instead of full song)
 - [ADD] option to create custom player HTML markup
 - [ADD] display thumbnail list of playlists in frontend and on playlist select, load selected playlist in player
 - [ADD] add custom classes to player and inner elements
 - [ADD] new skins and templates (grid and lists of thumbnails, separated playlists from player)
 - [ADD] drag songs into the player (create your own playlist in frontend)
 - [ADD] placeholder thumb url which will be shown when no song is selected
 - [ADD] attach category / tags to songs and filter songs in frontend
 - [ADD] display waveform song list filterable with genres and keywords

VERSION 4.05 [20.6.2020]

  
 - [FIX] grid_no_player layout - click on playlist item thumbnail plays audio (now its disabled)
 - [FIX] grid_no_player layout - enqueue plays song instead of enqueue
 - [FIX] fixed layout - wrong computation on player position when player is closed

VERSION 4.0 [31.5.2020]

  
 - [ADD] init player on dom selector click 
 - [ADD] option to auto open player in popup window on page load / dom selector click 
 - [UPDATE] use your own input search field to filter songs in player
 - [UPDATE] preloader visible before player loads
 - [ADD] optional buttons in controls to seek X seconds backward / forward 
 - [ADD] custom width at which icons in playlist (link, download, statistics icons) go into second line to make room for playlist titles
 - [ADD] specify custom DOM element for playlist
 - [UPDATE] share specific song in playlist when used with social networking (direct link to song and current time)
 - [UPDATE] added more social sharing networks
 - [UPDATE] load accordion from json 
 - [UPDATE] optional accordion description text below title (for json accordion)
 - [ADD] flac support
 - [ADD] javascript breakpoints to resize player (media query in div) (layouts like art_wide, brona, metalic, modern... can now be used as a widget)
 - [ADD] new skins (Widget, Compact, Fixed, Thumb grid in page  stricky bottom player)
 - [ADD] option to completely hide the player until music starts

VERSION 3.7 [19.3.2020]

    
 - [FIX] whatsapp desktop warning message
 - [ADD] player settings can now be passes with query string (parameters begins with "hap-")
 - [ADD] create playlist from query string parameters 
 - [UPDATE] support for folder sub-directories
 - [UPDATE] audio ads are not part of global table so they can be added to any player or playlist
 - [UPDATE] support for multiple audio ads before, during and after song plays (random)
 - [UPDATE] controls disabled while ad plays (user cannot skip track)
 - [UPDATE] shuffle button now has 2 tooltips for better mobile experience (Shuffle on, Shuffle off)
 - [ADD] ads progress bar and advertizing message
 - [ADD] "folder accordion type playlist" - read folder with multiple subfolders (albums) of audio files and display them as accordion in the player (each accordion item is one playlist)
 - [ADD] new skin - "brona" (light, dark)

VERSION 3.35 [20.2.2020]

    
 - [FIX] shuffle not working
 - [ADD] support for m3u playlist with audio files
 - [ADD] option to get album cover art for song if missing
 - [UPDATE] new callbacks 

VERSION 3.3 [13.2.2020]

   
 - [ADD] disable song skip
 - [ADD] multiline title option
 - [ADD] option to prefix relative audio urls
 - [ADD] rememeber playback position for whole playlist
 - [ADD] example demo with image icons, font-awesome, material icons, ionicons
 - [ADD] audio advertisements 

VERSION 3.2 [4.2.2020]

 
 - [UPDATE] new skins
 - [UPDATE] radiojar get artwork from metadata 

VERSION 3.1 [14.1.2020]

 
 - [UPDATE] new universal skin 
 - [UPDATE] looping update (loop playlist, single, off) 
 - [ADD] load playlist from JSON
 - [ADD] audio widget
 - [ADD] gutenberg block
 - [ADD] playback rate slider in player
 - [ADD] a-b loop (range)

VERSION 2.65 [27.10.2019]

 - [ADD] load more option for folder
 - [ADD] description, duration, date fields available for Soundcloud and Podcast
 - [ADD] finish count for statistics (what songs have been listened to the end)

VERSION 2.6 [18.10.2019]

 - [ADD] thumbnail alt text
 - [ADD] more global playlist options (playback rate, start / end time)
 - [ADD] load more option for self hosted media
 - [ADD] load media by media-id API

VERSION 2.5 [24.9.2019]

 - [ADD] playlist is stored in browser to limit API requests for Soundcloud and Podcast
 - [ADD] load more option for Soundcloud and Podcast
 - [ADD] optional protected media urls from page source (url encryption)
 - [ADD] play Youtube audio and video music
 - [ADD] Advanced Audio Coding (AAC) support 

VERSION 2.07 [23.4.2019]

 - [FIX] xml playlist

VERSION 2.06 [23.3.2019]

 - [UPDATE] some code improvements

VERSION 2.05 [10.3.2019]

 - [UPDATE] added font-awesome namespacing to prevent conflicts
 - [ADD] song statistics (plays, likes, downloads)

VERSION 2.0 [19.2.2019]

 - [ADD] conditional script loading (improves usability and performance)
 - [ADD] option to sort folder playlist by filename/date (asc/desc)
 - [ADD] load more option for soundcloud and podcast
 - [ADD] option to minimize player on page scroll and keep fixed bottom position
 - [ADD] new player layouts
 - [UPDATE] overall code improvements

SoundCloud requires API key (make sure you have one or that you can obtain it from SoundCloud)

Notes:

keywords: audio player, mp3, live streaming, amazon s3, variations, soundcloud, rss, podcast, responsive

Free Download