Golden Age
Feat. DJ Traxx
Advertising will end in 
Creating waveform...
Embed this song:
Copy
Copy song link:
Copy
Feat. DJ Kick

Skins using audio waveform

Player has to option to use audio waveform to display sound progress. This makes presenting audio visually more attractive for your visitors. Audio waveform can be generated automatically when you upload songs in Wordpress or you can supply your own waveform data for each song individually. You can also automatically generate audio waveforms for already exisiting songs located on your Wordpress website.

Skins using audio waveform

Mini player with basic sound controls.

Fixed skins

Full width player fixed to page bottom. Playlist opens on demand.

Fixed skins

Full width player fixed to page bottom. Playlist opens on demand and uses thumbnail grid.

Thumbnail grids with full width sticky player at page bottom

Thumbnail grids with floating sticky player at page bottom

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.

Template skin

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.

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.

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

Playlist selector

Clicking grid icon in the player will open Fullscreen thumbnail grid playlist selector where user can choose to load new playlist into the player.

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.

IMA VAST VPAID ads

Player offers support for Vast advertizing using Google IMA SDK loader. Monetize your videos by making the player advertizing platform. Supported VAST formats in the player are VAST / VMAP / IMA / VPAID...etc

Song variations

Option to display several different versions of each song: Long version, short version, tempo etc). Song variations are opened as accordion below main song and can play in sequence after main song ends.

Crossfade audio

Option to crossfade audio between two songs. Choose crossfade time in seconds and make a seamless transition between current and next playing audio. Crossfade is supported with type audio, Podcast (no hls).

Open content in lightbox

Create icon in songs in playlist items that can open any content in lightbox (video, audio, image, html...)

Autoplay in viewport

Autoplay music as player reaches visible viewport area. Requires user to interact with the page (like scroll down)

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.

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="content/media/audio/2/01.mp3" data-thumb="content/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="content/media/audio/2/02.mp3" data-thumb="content/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 (Podcaste...) 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, RSS Podcasts, iTunes, Apple HLS m3u8 Live streaming, Google Drive and One Drive media. 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.

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, One Drive 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.

Audio background

Player can be used as audio background widget anywhere in the page.

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.

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.

Javascript powered

Player is completely written in pure javascript which means it will run fast in your website and will not interfere with other scripts.

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
0:00
0:00
1X
  • Lyrics
  • Download