<div id="hap-wrapper" class="hap-brona hap-brona-dark"> <div class="hap-player-outer"> <div class="hap-player-holder"> <div class="hap-player-thumb-wrapper"> <div class="hap-player-thumb"></div> </div> <div class="hap-player-right"> <div class="hap-center-elements"> <div class="hap-info"> <div class="hap-player-title"></div> <div class="hap-player-artist"></div> </div> <div class="hap-seekbar-wrap"> <div class="hap-media-time"> <div class="hap-media-time-current">0:00</div> <div class="hap-media-time-total">0:00</div> </div> <div class="hap-media-time-ad">Advertising will end in <span></span></div> <div class="hap-seekbar"> <div class="hap-progress-bg"> <div class="hap-load-level"> <div class="hap-progress-level"></div> </div> </div> </div> </div>
<!-- PLAYLIST LIST --> <div id="hap-playlist-list"> <div id="playlist-audio1"> <div class="hap-playlist-item hap-playlist-item-ready" data-type="audio" data-path="media/audio/2/01.mp3" data-thumb="media/thumb/art/01.jpg"> <div class="hap-playlist-item-content"> <span class="hap-playlist-title-wrap"> <span class="hap-playlist-title">Soundroll - A Way To The Top</span> </span> </div> </div> <div class="hap-playlist-item hap-playlist-item-ready" data-type="audio" data-path="media/audio/2/02.mp3" data-thumb="media/thumb/art/02.jpg"> <div class="hap-playlist-item-content"> <span class="hap-playlist-title-wrap"> <span class="hap-playlist-title">Soundroll - Feel Good Journey</span> </span> </div> </div> </div> </div>
Desktop, mobile and tablet support
Player will adapt to any screen size and any device, wheater you are using desktop browser or your mobile phone. Responsive breakpoints allow for player to adjust to different screen sizes. Brakpoints are set using CSS. Include breakpoints in player settings (for example 768, 500) then add CSS for these breakpoints in player custom CSS section.
Optional playlist support
Use this player with full playlist support, or as a simple audio player just to play a single audio file. You can even hide the player altogether and listen for audio in the background.
Player offers support for different layouts, having playlist location beneath the player, which is suitable for wide layouts or a vertical narrow player. Playlist can open or hide on demand or be completely hidden from view. Its possible to just have a player layout without a playlist visible.
Player implements Google Analytics which allows for detailed tracking of your song views and other data.
Very easy to include audio player in your project. Featuring advanced documentation with sample demo pages ready for use. Add HTML markup directly in the page and style it according to your needs. Icons in player can be anything, from inline SVG, font icons (like Font Awesome, Material icons, IonIcons...) to plain images. Very easy to change icons in the player to your own just by modifing player html.
User friendly code
Player comes with many predefined demos ready to use out of the box. All demo examples featured here are included in the download package once you purchase player license!
Wide variety of platforms
Player ads supports for all HTML5 audio formats, Soundcloud, RSS Podcasts, iTunes, Apple HLS m3u8 Live streaming, Youtube audio and video, radio sources including Shoutcast, Icecast and Radiojar. You can even mix different media and song types in the same playlist.
Support for audio advertising. Play audio clips before, during and after main song ends. Specify different ads for each song or global ads for all songs. Play ads over main song audio or pause main song while ad plays. Multiple ads are supported for each song and can be randomized.
Disable song skip
Prevent users from changing or skipping song while audio plays and make listening whole audio chapters and books obligatory.
Use as radio player
Player support Shoutcast, Icecast, Radiojar and will automatically retrieve song title, artist and artwork from metadata. You can listen multiple radio stations in the player by adding different radio stations to same playlist, then use can change radio by clicking playlist item.
Load playlist from HTML markup, XML, JSON, database, automatically ready folder with audio files including ID3 metadata. Load audio sources from Google Drive, Amazon S3 private or public buckets or any public link that plays in the browser. Mix different audio sources in the same playlist. Load new playlist at runtime.
Read folder with audio files including ID3 metadata into the player. Subfolders are supported as well. Song data (title, album, artist, cover) is automatically fetched from song metadata and displayed in the player.
Read folder with multiple subfolders (albums) of audio files and display them as accordion in the player (each accordion item is one playlist). Song data (title, album, artist, cover) is automatically fetched from song metadata and displayed in the player.
Player can randomize playlist playback and shuffle song order.
Multiple looping states
Repeat whole playlist, repeat single song or disable song looping altogether.
Set start, end time
Define song start and end time and loop between. Can be used for song preview and purchase option.
Change audio playback rate while audio plays using drag slider and player API.
AB loop (range)
Loop song between 2 time ranges with range slider.
Url links and download icons in playlist
Playlist items can contain url link (for example purchase button) and download icon which can download a song or a song preview.
Filter songs in playlist
Search song titles and description in playlist.
Control audio playback with advanced keyboard controls.
Global playlist options
Define global playlist options (default player artwork cover, song start / end time, playback rate..) and apply them to each song in playlist.
Player settings can be passed using query parameters in url. This means whole player options and playlist tracks included can be defined just with url. You can create a link to new page with query parameters which will open the player with desired features!
Player comes with built in full API support for controlling playback (toggle playback, seek to specific time, control volume, jump to different song, load new song or playlist, import songs at runtime etc..).
Hooks and event callbacks
Player will dispatch important events as song plays into which you can hook and modify player behaviour without changing the source code. Hook into player API with events like Player API Ready to use, Song start, Song pause, Song play, Song end, Playlist end, Audio download (..and much more)
Load more songs into the player on demand, either with load more button or by scrolling to playlist end or using by using player API.
Playlist items can contain image thumbnails, titles, description, duration and published date. Choose what content you want to show in playlist items.
Track song plays, likes, downloads, finishes of songs for each playlist. Examine statistics data in backend and optionally display statistics in the player for each song (show icons in playlist).
Highly customizable with HTML and CSS
By using the basic css skills, player can be restyled into pretty much anything! You can add your own HTML anywhere in the player and style with with css!
Hide audio url from page source with encryption.
Uninterrupted audio playback across web pages
Play music continously across web pages by remembering playback position or with option to open player is a separate popup window. If you have an ajax website you can make player part of the page that doesnt reload. Option to remember playback position for each song in playlist. Useful if you have playlist of long audio books or podcasts and you want to resume listening from last time.
Player can be used as audio background widget anywhere in the page.
Constant development and updates
Once purchased, player comes with full access to explusive support and free updates. Player is constantly updated to keep with modern web standards.