HTML5 Audio Player with Playlist

Description

This versatile audio player offers HUGE amount of customization options and layout possibilities Just check demo examples to get you imagination going All demo skins are included in the package Normal skins fixed sticky skins to page bottom minimal skins and more View plugin documentation This is an extremely powerful audio player and supports all kind of embeddable media from HTML5 audio formats to RSS Podcasts Soundcloud music to automatically reading folders of songs including ID3 metadata Reading Google Drive and One Drive folders Amazon S3 public and private buckets and more Use this player as standard player fixed to page bottom sticky player Include multiple players in the same page Player comes with regular skins that can be placed anywhere in the page sticky player skins which are full width players fixed to page bottom and minimal players ideal for minimal layout designs This is one full blown audio player that can be used anywhere Player comes with standard playback skins and audio waveform skins which display visual song progress information Even a stylish circular skin is included Features and options Destop mobile and tablet support fully responsive and mobile optimized buttons Highly customizable with HTML and CSS Written in plain Javascript which means it will run fast in your website and will not interfere with other scripts Only mp3 audio format required for all browsers and devices other supported formats include wav aac flac etc Supported content sources Audio playlist Podcasts RSS SoundCloud Playlist from folder of mp3 files read ID3 metadata Google Drive One Drive Apple HLS Live Streaming m3u8 XML playlist JSON playlist Amazon S3 public and private buckets with presigned url and Cloudfront Youtube audio and video music video id playlist id Song variations support Player can display multiple version of a song in playlist For example you can have 3 songs in playlist and each song can have multiple variations long version short version etc example here Advanced song statistics for WordPress player version count plays likes downloads and display them in playlist next to song list WordPress version includes full admin panel where user can view all audio statistics for each player and playlist Display lyrics while audio plays example here Password protected songs Restrict content in WordPress for logged in users and specific user roles Crossfade audio between current and next playing song example here Google Analytics tracking Adverts support Play audio adverts before during and after main songs plays Global adverts per playlist or individual per song example here IMA adverts support example here Remember playlist position on page reload active song current time Protect song urls with url encryption and blobs Audio embedding Embed audio player in another website Grid mode Grid skins can create thumbnail grid in page example here Support for multiple instances of audio player in the same page Option to mix different media types in the same playlist you can have self hosted audio Podcast and Soundcloud mixed in same playlist Custom playlist icons Create any number of custom icons in playlist and attach url to each icon Playback options random playback loop playlist playback speed start end time Media end action go to next song loop current song Query string parameters load audio parameters directly in browser url Responsive breakpoints hide specific buttons or player elements on small screens Replace WordPress default audio player Keyboard navigation Social sharing facebook twitter tumblr etc Play music continously across web pages by remembering playback position with option to open player is a separate popup window API methods to interact with the player on runtime Event callbacks events during audio playback Advert callbacks which fire when audio ads play Click image to view demo Comments AddOn a href http codecanyon net item audio-player-javascript-comments-addon 50934309 target _blank Updates Changelog VERSION 9 15 6 9 2024 – UPDATE minor fixes VERSION 9 1 1 6 2024 – ADD search playlist songs with voice recognition 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