HTML5 Audio Player with Playlist

Updates / Changelog

VERSION 9.05 [26.5.2024]

 - [UPDATE] Google Analytics 4
 - [UPDATE] social sharing add email, sms

VERSION 9.02 [8.5.2024]

 - [UPDATE] ios detection

VERSION 9.01 [12.3.2024]

 - [DEPRECATED] Cloudfront integration deprecated

VERSION 9.0 [22.2.2024]

 - [UPDATE] new callback added beforeSongChange
 - [FIX] prevent selection of other elements while using dragging actions
 - [FIX] tooltip position in some cases 
 - [FIX] HLS media not autoplaying on second song 
 - [UPDATE] dialog transitions
 - [UPDATE] use material icons offline for brona skin
 - [UPDATE] compatible with Commments Add-on

VERSION 8.94 [20.12.2023]

 - [FIX] accordion mode load new accordion using api
 - [FIX] seekbar waveform in popup window duplicating

VERSION 8.9 [21.11.2023]

 - [UPDATE] with no song active on player start, option to start first song using play button
 - [ADD] playback rate toggle button alternative to slider
 - [UPDATE] Google Drive folder use api key for playback if key is provided
 - [ADD] navigator share

VERSION 8.77 [22.10.2023]

 - [UPDATE] small code improvements

VERSION 8.75 [10.10.2023]

 - [UPDATE] option to open non downloadable files in new tab
 - [ADD] create playlist with object markup instead of HTML 
 - [FIX] load more on total scroll not working with playlist type browser scroll

VERSION 8.7 [21.7.2023]

 - [ADD] add popup lightbox option for call-to-action buttons beside your tracks. Embed any content inside lightbox (video, audio, iframe, html).
 - [UPDATE] specify global default class for playlist icons and use text instead of icons for buttons  
 - [ADD] load playlist from CSV file
 - [UPDATE] add aria label to buttons
 - [UPDATE] add global add to favorite button in player

VERSION 8.4 [25.6.2023]

 - [FIX] sticky player not seeking

VERSION 8.35 [31.5.2023]

 - [UPDATE] updated to pointer events

VERSION 8.21 [4.5.2023]

 - [FIX] keyboard controls scroll page (spacebar, page up, down)

VERSION 8.2 [14.4.2023]

 - [UPDATE] SEO and semantics improvements

VERSION 8.02 [12.3.2023]

 - [FIX] amazon S3 private bucket not loading

VERSION 8.01 [1.3.2023]

 

 - [FIX] sticky.css, sticky.js missing from popup.html 
 - [FIX] start playback rate for playback rate toggle button

VERSION 8.0 [27.2.2023]

 

 - [FIX] playlist not reloading on closed popup
 - [FIX] accordion search not working
 - [FIX] accordion after playlist open / close, playlist height incorrect 
 - [FIX] search song autofill with password
 - [FIX] after search was used next song button would not work
 - [FIX] sticky float seekbar not working
 - [FIX] hide lyrics button if no lyrics
 - [FIX] epic skin playlist scroll area when playlist description present
 - [FIX] popup window with sticky player
 - [FIX] redirect login with Lock song time 0 if closed on start would not open again
 - [FIX] restrict song download user roles
 - [FIX] shuffle, loop icons now showing on hover

 - [UPDATE] create audio waveform automatically when player runs in page 
 - [UPDATE] support for auto waveform creation from some external sources like Podcast
 - [UPDATE] define demo waveforms for when main song waveform is not available so player always shows waveform
 - [UPDATE] playlistContentClass for easier styling of playlist items
 - [UPDATE] lyrics dialog now opens in window center on start

 - [ADD] fullscreen thumbnail grid playlist selector
 - [ADD] option to have global download button in player 
 - [ADD] option not to reopen player in main window after popup window is closed 
 - [ADD] new skins (fixed, fixed 2, wave) 

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)

Notes:

This is javascript plugin for standalone website.

SoundCloud requires API key (make sure you have one or that you can obtain it from SoundCloud). You are required to check if Soundcloud can provide you API key before purchase.

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