Light demo examples

Vertical demo

Vertical demo focuses intention to artwork cover and introduces playlist from the side.

Dark demo examples

Vertical demo

Vertical demo focuses intention to artwork cover and introduces playlist from the side.

Skin brona

Stylish and modern skin in light style using Material icons.

Skin brona

Stylish and modern skin in dark style using Material icons.

Pagination

Load more songs into the player on demand. If you have a lots of songs in the playlist, player can apply pagination. This can speed player loading time drastically by only loading (for example) 50 songs on start and everytime user scrolls to the bottom of the playlist, more songs will be loaded into the player. Pagination can be applied to Folder of songs, Podcast, Soundcloud, Youtube videos.

Accordion feature

Multiple folders on audio files grouped inside player in accordion style. Player can display multiple playlists in player in accordion style. Accordion can be loaded from several folders of songs (each folder contains one playlist), or from json file which contains all data for songs.

Metalic

Player with playlist on the right. On narrow screen playlist goes below player. Player artwork is copied into player background for unique semi transparent look.

Modern

Player with playlist on the right. On narrow screen playlist goes below player. Player has circular seekbar over artwork area.

Poster

Player without visible playlist. All player controls are located above player artwork.

Thumbnail wall

Playlist with square thumbnails and masonry grid layout. Player is located on page bottom.

Sticky player

Player fixed to page bottom. Player and playlist can open on demand or hidden on start.

Thumbnail wall

Playlist with square thumbnails and masonry grid layout. Player is located on page bottom.

CUSTOM FEATURES

Player is packed with a large amount of features and customization options from different layouts, skins, color customization, social sharing, powerfull API for controling playback, different audio platforms, playlist support, and more...

Lyrics transcript

Support for audio Lyrics. Player will automatically synchronize lyrics with playing audio to make a perfect Karaoke player. Supports standard lyrics formats like lrc, vtt, src. Lyrics dialog can autoscroll as music plays and be resized and placed anywhere on the page. You can also place lyrics on your own custom HTML element on the page and apply your own custom CSS to lyrics. Lyrics supports HTML nodes, multiple lines etc...

Video sync

Synchronize video with playing audio. Provide video url to play in sync with your audio songs. Video and audio content on the page can be manipulated (apply time range to play, adjust playback rate). Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on. Suitable for ASL / sign language video synchronize with audio playback, which is a great accessibility benefit.

Audio advertising

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. Display ad message and ad seekbar when advertisement is playing.

BONUS SKINS AND MORE FEATURES

Player simple versatility can be customized in many ways. Below are some of the wide variety usage examples that were made from this player by manipulating player HTML and CSS code and a little bit of javascript.

Playlist grid with custom buttons

Special skin (playlist display without player). Display thumbnail grid in page. Its used in combination with another player. Playlist tracks can be played and enqueued in another player (for example sticky player at page bottom).

Audio background with slideshow

Audio plays in background while image slideshow rotates. Suitable for websites requiring image background with audio playback.

Widget players

Player without visible playlist. All player controls are located above player artwork. Suitable for limited spaces.

Tiny players

Small players suitable for embedding anywhere within the page fit any purpose from playing single audio to full playlist.

Compact players

Small players suitable for embedding anywhere within the page fit any purpose from playing single audio to full playlist.

Inline

Turn inline text links into audio player buttons.

Player markup in page

This player is easily customizable, and you can add your own HTML anywhere in the player! Player elements (buttons, lists..) are pure HTML nodes placed directly in the page and can be maniplated easily. Player icons can be anything from Font icons (like Font Awesome, Material icons), SVG elements, or pure images placed directly in the page. Since player is built from pure HTML and CSS, this is what makes this player so easy to work with and be able to change player skin to almost anything. All player demos shown here are perfect example of this. You need another button in player? No problem, just place your HTML anywhere in the player and style it with CSS.


            <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> 

            

YOUR OWN HTML MARKUP FOR SONGS

Player will accept custom markup for songs in playlist. This means you can write your own HTML which will be used as playlist items. Any HTML supported. You can add buttons, url links, input fields etc... and apply your own actions like launch external url link or call javascript funtion for example.


            <!-- 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>

            

HTML IN SONG DESCRIPTION

Song description supports full HTML with Read more / Read less style. When fetching content from custom sources (Soundcloud, Podcast, Youtube...) player will display full description inside playlist songs and user can interact with this HTML without affecting song playback. User can also add its own HTML in song description. Add url links, buttons, input fields, forms etc... inside song description.

Features and options

See some of the ever growing list of this plugin's features and options

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.

Different layouts

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.

Google Analytics

Player implements Google Analytics which allows for detailed tracking of your song views and other data.

Quick installation

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.

Audio advertising

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.

Content sources

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 or any public link that plays in the browser. Mix different audio sources in the same playlist. Load new playlist at runtime.

Folder playlists

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.

Folder accordion

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.

Random playback

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.

Playback rate

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.

Keyboard support

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.

Query parameters

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!

API methods

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)

Pagination

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 content

Playlist items can contain image thumbnails, titles, description, duration and published date. Choose what content you want to show in playlist items.

Song statistics

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).

Social sharing

Share your songs into favorite social networks like Facebook, Tumblr, Twitter and more. Very easy to add social share site of your own into the player that cna be shared with javascript.

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!

Url encryption

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.

Audio background

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.

Get this ultimate Audio Player today!

Purchase