HTML5 Audio Player with Playlist

jQuery

Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to send a message on the link. Thanks so much!

• codecanyon.net/user/Tean

Include the following css and javascript into HEAD section of the page:

<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all"/><!-- playlist scroll -->
<link rel="stylesheet" type="text/css" href="css/_global.css" />
<link rel="stylesheet" type="text/css" href="css/PLAYER_CSS_FILE_GOES_HERE.css"/><!-- include player css file for the skin you use -->
    
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script><!-- playlist scroll -->
<script src="js/jsmediatags.min.js"></script><!-- id3 tags when reading songs from folder -->
<script src="js/new.js"></script><!-- main js file -->  
	

Copy player HTML code in BODY section of the page:

<div id="hap-wrapper" class="hap-art-wide hap-art-wide-dark">
   ...rest of the player html goes here
</div>
    

Create playlist in BODY section of the page:

<div id="hap-playlist-list">

    <div id="playlist-audio">
        <div class="hap-playlist-item" data-type="audio" data-path="MP3_URL" data-artist="ARTIST_NAME" data-title="SONG TITLE" data-thumb="THUMB_URL"></div>
        <div class="hap-playlist-item" data-type="audio" data-path="MP3_URL" data-artist="ARTIST_NAME" data-title="SONG TITLE" data-thumb="THUMB_URL"></div>
        <div class="hap-playlist-item" data-type="audio" data-path="MP3_URL" data-artist="ARTIST_NAME" data-title="SONG TITLE" data-thumb="THUMB_URL"></div>
    </div>

</div>         
    

Initialize the plugin with settings (see configuration):

<script>
        
jQuery(document).ready(function($) {

    var settings = {
        activePlaylist:"#playlist-audio",
        activeItem:0,
        volume:0.5,
        autoPlay:false,
        preload:"auto",
        randomPlay:false,
        loopState:'playlist',
        usePlaylistScroll:true,
        playlistScrollOrientation:"vertical",
        playlistScrollTheme:"light-2",
        useNumbersInPlaylist: true,
        playlistItemContent:"title,thumb"
    };

    $("#hap-wrapper").hap(settings);

});

</script>
    

Available player options:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Folder accordion options:

Internal script loading

Note: some javascipt files are loaded internally (sharemanager.js, perfect-scrollbar.min.js etc...). By default all javascript files are located in /js directory. You can change the location from where they are loaded by adding this to settings.

This section explains how to load a playlist on start.

Loading playlist from HTML nodes:

You need to have this in page BODY:

<!-- PLAYLIST LIST -->
<div id="hap-playlist-list">
    <div id="playlist-audio1">

        <div class="hap-playlist-item" data-type="audio" data-path="MP3_URL"></div>
        <div class="hap-playlist-item" data-type="audio" data-path="MP3_URL"></div>

    </div>
</div>

To load this playlist on start use this settings:

activePlaylist:"#playlist-audio1",

Check api.html demo which contains a list of all possible playlist examples.

Using your own HTML markup for playlist items?

If you want to write your own HTML markup for songs in playlist add hap-playlist-item-ready class to your divs, 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>

Such playlist items (with hap-playlist-item-ready) will be placed directly in the playlist without any change!

Note that having hap-playlist-title-wrap class is preferred because click is attached to this element (click to play song in playlist)

Check ready-songs-in-playlist.html demo for more info.

Loading playlist from array data:

activePlaylist:"",

    player = $("#hap-wrapper").on('setupDone', function(e, data){

        //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)

        //add multiple tracks
        
        var track_array = [
            {
                type: 'audio', 
                path: 'PATH TO AUDIO URL',
                artist: 'ARTIST NAME',
                title: 'SONG TITLE', 
                thumb: 'THUMB URL'
            },
            {
                type: 'audio', 
                path: 'PATH TO AUDIO URL',
                artist: 'ARTIST NAME',
                title: 'SONG TITLE', 
                thumb: 'THUMB URL'
            }
        ]

        data.instance.addTrack(track_array, true, 0); //add tracks, playit, position 0

    });

Minimal HTML markup needed for player to work is just one element. The rest is not required if you want to play audio.

<div id="hap-wrapper"></div>

Playlist is optional. To remove the playlist, delete this element from the markup:

<div class="hap-playlist-holder"></div>

How to have playlist opened on start?

For art_narrow skin:

In settings:

playlistOpened:true

In css:

.hap-player-holder{
    ...
    left:100%;
}
.hap-playlist-holder{
    ...
    left:0;
}

How to have playlist closed on start?

In settings:

playlistOpened:false

In css:

For art_wide, brona skin:

.hap-playlist-holder{
    ...
    height:0;
}

For fixed skin following settings exist:

In settings:

playlistOpened:boolean (playlist opened on start)

playerOpened:boolean (player opened on start)

hidePlayerUntilMusicStart:boolean (This will completely hide player until music first starts. Note that music autoplay is not possible without user interaction, so this can only be used when user clicks a button in page to play music.)

.hap-music-player-force-hidden{
    opacity: 0!important;
    display: none;
    pointer-events:none!important;
}

Making player responsive.

For example, demo brona_light.html has these settings:

breakPointArr:"650,550"

In brona.css file you can find the following:

/* javascript breakpoints */
.hap-brona.hap-breakpoint-650 .hap-contr-btn{
    width:35px;
}
.hap-brona.hap-breakpoint-650 .hap-player-holder{
    height: auto;
    flex-direction:column;
}
.hap-brona.hap-breakpoint-650 .hap-player-thumb-wrapper{
    width: 100%;
    height: auto;
    padding-top: 100%;
}
.hap-brona.hap-breakpoint-650 .hap-player-right{
    flex:none;
}
.hap-brona.hap-breakpoint-650 .hap-center-elements{
    margin-left: 0;
    margin-top: 20px;
}
.hap-brona.hap-breakpoint-650 .hap-playlist-inner{
    padding: 0 30px 30px 30px;
}

.hap-brona.hap-breakpoint-550 .hap-volume-seekbar{
    display: none!important;
}
.hap-brona.hap-breakpoint-550 .hap-volume-wrap{
    width: 40px!important;
}
.hap-brona.hap-breakpoint-550 .hap-popup-toggle,
.hap-brona.hap-breakpoint-550 .hap-playback-rate-toggle{
    display: none;
}

This means player has 2 responsive breakpoints set (500 and 650 px). Adding a breakpoint will add class of hap-breakpoint-x to the player. When player has width of 650 (or less) CSS written above will take effect. You can add your own custom breakpoints and then use CSS to control how the player will behave on different screens.

The advantage of this is that is works when player is placed in sidebar or similar (not only on full page width).

You can of course disregard this and use your own CSS media queries.

Example:

<div class="hap-playlist-item" data-type="audio" data-path="PATH TO MP3" data-thumb="THUMB URL HERE"></div>

Parameters:

Create api key first: sck

Examples:

<div class="hap-playlist-item" data-type="soundcloud" data-path="http://soundcloud.com/trance/trance-single-138-bpm-anvil"></div>

playlist/set:

<div class="hap-playlist-item" data-type="soundcloud" data-path="https://soundcloud.com/simps1988/sets/mainstage-music-a-state-of" data-limit="11"></div>

Parameters:

Example rss podcast:

<div class="hap-playlist-item" data-type="podcast" data-path="http://robertkelly.libsyn.com/rss" data-limit="5" data-thumb-default="path/to/backup/thumb"></div>

Example itunes podcast:

<div class="hap-playlist-item" data-type="itunes_podcast_music" data-path="https://itunes.apple.com/us/podcast/rodkast/id374535595" data-limit="5" data-thumb-default="path/to/backup/thumb"></div>

Parameters:

Example:

<div class="hap-playlist-item" data-type="folder" data-path="PATH/TO/FOLDER" data-limit="5" data-id3></div>

Parameters:

Folder needs to be located on the same server where the player is located.

1. path relative to the content/includes directory (where folder_parser.php is located)

<div class="hap-playlist-item" data-type="folder" data-path="../media/audio/my_folder_with_audio_files"></div>

2. path absolute

Use locate_directory.php file from includes directory and place it in my_folder_with_audio_files directory and open it in browser to get desired folder location on your server.

<div class="hap-playlist-item" data-type="folder" data-path="asolute/path/my_folder_with_audio_files"></div>

Rules:

1. Required extension for audio files is mp3, wav, aac, flac

1. Reading sub-directories is supported. Another alternative to read more folders at once, is to list them one after the other, for example:

<!-- PLAYLIST LIST -->
<div id="hap-playlist-list">
    <div id="playlist-folder">
        <div class="hap-playlist-item" data-type="folder" data-path="../media/audio/1"></div>
        <div class="hap-playlist-item" data-type="folder" data-path="../media/audio/2"></div>
        <div class="hap-playlist-item" data-type="folder" data-path="../media/audio/3"></div>
    </div>
</div>

Google Drive requires API key, go to: https://console.developers.google.com and create new project, enable Drive API, go to Credentials, create Browser key and enter in settings : gDriveAppId

You can load folder of files from google drive or single files.

Example for folder of files:

<div class="hap-playlist-item" data-type="gdrive_folder" data-path="GOOGLE DRIVE FOLDER ID"></div>

Parameters:

You need to have following organization when loading files from google drive folders:

Inside that directory equivalent audio and thumb files need to be named the same! (thumbnails are required if you player contains thumbnail in playlist (reading id3 tags is not supported with Google drive). It will still work without but the player will not have artwork displayed)

So you end up with this structure in your folder:

    song1.mp3
    song1.png
    song2.mp3
    song2.png
    ...

This is an example of google drive folder: https://drive.google.com/drive/folders/1jvqNZtENJrYxjoeeqAKUfHnxskk4ObjX

If you want to use single files from google drive, use the following method:

Go to Disc – My drive:

https://drive.google.com/drive/my-drive
right click on audio, Get shareable link and you get something like this:

https://drive.google.com/open?id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM

use that audio ID to create google drive audio URL:

https://drive.google.com/uc?export=view&id=videoID
This is final URL how google drive audio URL should look:

https://drive.google.com/uc?export=view&id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM – use this link in player as type audio and data-path url:

 <div class="hap-playlist-item" data-type="audio" data-path="https://drive.google.com/uc?export=view&id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM"></div>

You can load folder of files from One Drive or single files.

How to load folder of videos from One Drive?

<div class="hap-playlist-item" data-type="onedrive_folder" data-path="ONE DRIVE SHARE URL" data-sort="filename-asc"></div>

Parameters:

Place audio files in your One Drive folder. You can also place thumbnail images (optional).

So you end up with this structure in your folder:

    song1.mp3
    song1.jpg//optional thumbnail image
    song2.mp3
    song2.jpg//optional thumbnail image
    ...

This is an example of One Drive folder: https://1drv.ms/u/s!Av88sx97Izeif5Y1OnNBDdRMaEs

How to load single audio from One Drive?

If you want to use single files from One Drive, use the following method:

Right click on the file - Embed and copy link, you will get something like this:

<iframe src="https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21157&authkey=AAEOpycSee6Jd-o" width="98" height="120" frameborder="0" scrolling="no"></iframe>

Use just the src part:

https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21157&authkey=AAEOpycSee6Jd-o

and replace 'embed' with 'download'

so you end up with:

https://onedrive.live.com/download?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21157&authkey=AAEOpycSee6Jd-o

use this link in player as type audio and data-path url:

<div class="hap-playlist-item" data-type="audio" data-path="https://onedrive.live.com/download?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21157&authkey=AAEOpycSee6Jd-o"></div>

Only important rule is that XML playlist markup is exactly the same as the playlist markup in HTML!

So you can just copy playlist markup from HTML and paste it in xml file.

Example:

<div class="hap-playlist-item" data-type="xml" data-path="data/xml/1.xml"></div>

Example of XML playlist file is provided in xml directory.

Example:

<div class="hap-playlist-item" data-type="json" data-path="data/json/1.txt"></div>

For json the same properties apply as for html markup only without data-attribute and camelCased:

Example audio:

{
  "type": "audio",
  "path": "media/audio/2/01.mp3",
  "artist": "Soundroll",
  "title": "A Way To The Top",
  "thumb": "media/thumb/1/01.jpg",
  "link": "http://www.google.com",
  "target": "_blank",
  "download": "media/audio/2/01.mp3",
  "playbackRate": 2,
  "start": 5,
  "end": 15,
  "adPre": {
    "src": "media/ads/human1.mp3,media/ads/human2.mp3"
  },
  "adMid": {
    "interval": 3000
    "src": "media/ads/bong.mp3"
  },
  "adEnd": {
    "src": "media/ads/human3.mp3"
  }
},

Example youtube:

{
  "type": "youtube_playlist",
  "path": "PLMC9KNkIncKtPzgY-5rmhvj7fax8fdxoj",
  "limit": 5
}

Example soundcloud:

{
  "type": "soundcloud",
  "path": "http://soundcloud.com/astateoftrance",
  "thumbDefault": "data/default_artwork/sc.jpg",
  "limit": 20,
  "loadMore":"true"
},

Example of JSON playlist file is provided in json directory. You can also load .txt file extension.

Supported is m3u playlist file with audio urls inside. Example of m3u playlist file is provided in m3u directory in plugin package. Make sure you follow exact format.

Example:

<div class="hap-playlist-item" data-type="m3u" data-path="media/m3u/playlist.m3u"></div>

Parameters:

You can prefix media urls with mediaPrefixUrl

Example:

<div class="hap-playlist-item" data-type="m3u" data-path="PATH/TO/M3U1"></div>
<div class="hap-playlist-item" data-type="m3u" data-path="PATH/TO/M3U2"></div>
<div class="hap-playlist-item" data-type="m3u" data-path="PATH/TO/M3U3"></div>

Youtube requires API key which needs to be entered in configuration: youtubeAppId

Go here for the API key: https://console.developers.google.com and create new project, enable YouTube Data API, go to Credentials, create API key.

Tutorial on how to create Youtube API key: Get youtube api key

Using Youtube requires player to have thumbnail image in player where Youtube player will be placed. Please use demo which has thumbnail in player! hap-player-thumb element

Supported are Youtube single videos and playlist.

Examples:

Youtube single videos (one or more videos separated by comma):

<div class="hap-playlist-item" data-type="youtube_single" data-path="lWA2pjMjpBs,ZQ2nCGawrSY,tg00YEETFzg"></div>

Youtube playlist:

<div class="hap-playlist-item" data-type="youtube_playlist" data-path="PLijk13kqreIe83BAajgYNGpsx57keRRNz" data-limit="10" data-load-more></div>

Parameters:

Example of hls live streaming:

<div class="hap-playlist-item" data-type="hls" data-path="http://a.files.bbci.co.uk/media/live/manifesto/audio/simulcast/hls/nonuk/sbr_low/ak/bbc_radio_one.m3u8" data-title="BBC Radio 1" data-thumb="media/bbc-1.png"></div>

<div class="hap-playlist-item" data-type="hls" data-path="http://a.files.bbci.co.uk/media/live/manifesto/audio/simulcast/hls/nonuk/sbr_low/ak/bbc_radio_two.m3u8" data-title="BBC Radio 2" data-thumb="media/bbc-2.png"></div>

How to listen audio from Amazon S3?

Note: if you just want to place your files in public bucket on Amazon S3, you dont need this setup! Then just link to files as usual and use type audio. Example:

<div class="hap-playlist-item" data-type="audio" data-path="AUDIO_URL"></div>

Note: epic_s3.html demo page uses amazon S3 for demo. This demo also uses audio waveforms.

Supported are public and private buckets. Supported are single audio urls and reading a whole bucket with audio files inside.

Credentials setup

1. Create IAM user with credentails on the following link:

2. Add username and enable Programmatic access:

3. Enable AmazonS3ReadOnlyAccess policy for user:

4. After user is created copy his credentials (key and secret) and enter then in content\includes\aws\cred.php file:

CORS setup

Add CORS policy to bucket (this is required if you want to automatically create audio waveform from audio files located in bucket or if you want to use image thumbnails in player which are also located in the bucket):

To add CORS policy, go to permissions tab in the bucket, scroll to CORS section and enter the following:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Audio setup

Supported are single audio urls and reading a whole bucket with audio files inside.

1. Read whole bucket with audio files:

Create bucket, and choose AWS region closest to you (s3Region in setting).

Upload audio files inside bucket. If you want to use thumbnails inside the player upload image thumbnails inside a bucket (together with audio files). Thumbnails need to have the same name as audio files!. Example this bucket has audio files and thumbnails named the same!

Thumbnails in example above use .jpg extension. You can set this option in settings:

s3ThumbExtension: 'jpg',
getThumbFromBucket: true,
s3Region:'us-east-1'

s3ThumbExtension = specify thumb extension that thumbnails in the bucket will have (all thumbnails are expected to have the same extension)

getThumbFromBucket = read thumbnails from bucket

s3Region = Amazon AWS region https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingBucket.html

Bucket privacy

Bucket can be public or private. If you want a bucket to be private go to Permissions tab inside a bucket and check Block all public access

Other options for S3 include:

autoCreateWaveform:true
s3UrlExpireTime:'+15 seconds'

autoCreateWaveform = If you use single audio urls located in the bucket and if waveform data with data-peaks are not provided, check waveform section, plugin can auto create waveform as each audio files is loaded from the bucket.

s3UrlExpireTime = The time at which the URL should expire. This can be a Unix timestamp, a PHP DateTime object, or a string that can be evaluated by strtotime(). https://docs.aws.amazon.com/aws-sdk-php/v3/api/class-Aws.S3.S3Client.html#_createPresignedRequest

Example of playlist

1. Bucket playlist (read whole bucket and get all audio files inside):

<div id="playlist-example">

    <div class="hap-playlist-item" data-type="s3_bucket_audio" data-bucket="ap-trance" data-sort="filename-asc"></div>

</div>    

Parameters:

2. Single audio urls from bucket playlist:

<div id="playlist-example">

    <div class="hap-playlist-item" data-type="s3_audio" data-bucket="ap-trance" data-key="Trictonez-Essentials-Preview.mp3" data-title="Trictonez Essentials"></div>

    <div class="hap-playlist-item" data-type="audio" data-key="EW-Screech-Preset-Pack-Vol-1.mp3" data-title="EW Screech Preset Pack Vol 1" data-peaks="0.16,-0.1,0.37,-0.12,0.59,-0.27,0.63,-0.73,0.89,-1,0.51,-0.8,0.85,-0.52,1,-0.95,0.75,-0.47,0.95,-0.84,0.96,-1,0.96,-0.6,0.76,-0.87,0.46,-0.47,0.54,-0.51,0.93,-0.97,0.71,-0.87,0.96,-0.84,0.89,-0.77,0.99,-0.94,0.81,-1,0.64,-0.74,0.71,-1,0.65,-0.92,0.97,-0.83,0.46,-0.65,0.97,-0.91,0.94,-0.45,0.57,-0.96,0.96,-0.08,0.68,-0.62,0.97,-0.7,0.97,-0.95,0.37,-0.91,0.91,-0.19,0.49,-0.99,0.32,-0.89,0.95,-0.44,0.83,-0.85,0.95,-0.85,0.94,-0.65,0.83,-0.93,0.85,-0.84,0.99,-0.87,0.56,-0.93,0.37,-0.47,0.53,-0.39,0.5,-0.7,0.78,-0.7,0.99,-0.82,0.65,-0.74,0.82,-0.82,0.82,-0.97,0.96,-0.62,0.97,-0.97,0.76,-0.9,1,-0.94,0.92,-0.98,0.29,-0.77,0.47,-0.63,0.46,-0.71,0.83,-0.77,0.95,-0.8,0.82,-0.85,0.85,-0.97,0.63,-0.86,0.99,-0.81,0.76,-0.76,0.95,-0.9,0.23,-0.43,0.61,-0.38,0.67,-0.17,0.47,-0.58,0.72,-0.32,0.75,-0.64,0.72,-0.38,0.66,-0.38,0.69,-0.46,0.56,-0.89,0.89,-0.82,0.69,-0.56,0.63,-0.65,0.6,-1,0.87,-0.72,0.71,-0.71,0.44,-0.56,0.83,-0.7,0.73,-0.71,0.64,-0.54,0.59,-0.83,0.71,-0.84,0.49,-0.5,0.75,-0.67,0.6,-0.72,0.73,-0.66,0.48,-0.94,0.81,-0.83,0.63,-0.42,0.61,-0.65,0.48,-0.69"></div>

</div>    

Parameters:

data-key (When you right click on the file in bucket you will get its properties, one of them is key.)

How to integrate Amazon S3 buckets using Cloudfront?

First follow all steps in the Amazon S3 section. Once you have completed that you can continue with this section.

Sign in to the AWS Management Console and open the CloudFront console at https://console.aws.amazon.com/cloudfront/v3/home.

Before you start creating distribution, do the following:

Create Origin access identity (OAI) under Security tab -> Origin access identities

Create New key pair. Go to My account -> My security credentials:

Create New key pair. And download both public and private key immediately after creation.

Rename private key to "private-key.pem" and move this file in plugin files /includes/aws directory.

Create Public key under Key management.

Give it some name, then open public key (you downloaded from the previous step) in any text editor and copy its content inside Key field. (Paste this public key value in pem format...). Make sure its a public key you copy not a private key!

Create Key group under Key management.

Choose public key you created in previous step to add to this key group.

Now create distribution

Under Origin domain choose the Amazon S3 bucket you want to connect with this distribution.

Under S3 bucket access select "Yes use OAI", select existing Origin access identity from dropdown menu, and select "Yes, update the bucket policy".

Under Restrict viewer access select Yes, and choose Trusted key groups, and select Key group you have created in previous steps in dropdown menu.

Under Cache key and origin requests select Legacy cache settings, choose Include the following headers, click Add custom button, and paste this as custom header inside: Access-Control-Allow-Origin

Access-Control-Allow-Origin

Now end creating distribution.

Copy distribution domain name with this format into /includes/aws/cred.php file

https://xxxxxxxxxxxxx.cloudfront.net/

xxxxxxxxxxxxx = your distribution domain

Note the full url with HTTPS, just replace your xxxxxxxxxxxxx distribution domain name!
    

Copy Public key pair ID into /includes/aws/cred.php file

To use Cloudfront with Amazon S3 bucket add this option in settings:

useCloudfront:true,
cf_expire: 300//The time at which the URL should expire in seconds.
    

It is possible to mix different media type in the same playlist.

Example:

<div id="playlist-mixed">
    <div class="hap-playlist-item" data-type="audio" data-path="media/audio/1/01.mp3"></div>
    <div class="hap-playlist-item" data-type="soundcloud" data-path="https://soundcloud.com/playlistsofficial/likes" data-limit="5"></div>
    <div class="hap-playlist-item" data-type="podcast" data-path="http://www.kingola.com/feed/podcast/" data-limit="3"></div>
</div>

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...). Variations are available for media type audio only.

To achieve this add hap-audio-variations div inside hap-playlist-item. This example has 3 variations.

 <div class="hap-playlist-item" data-type="audio" data-path="media/audio/2/03.mp3" data-artist="Soundroll" data-title="Fight No More">
                    
    <div class="hap-audio-variations">
        <div class="hap-audio-variation" data-path="media/audio/2/03.mp3">
            <div class="hap-audio-variation-title">Long version</div>
        </div>  

        <div class="hap-audio-variation" data-path="media/audio/2/03_30s.mp3">
            <div class="hap-audio-variation-title">30s version</div>
        </div>

        <div class="hap-audio-variation" data-path="media/audio/2/03_15s.mp3">
            <div class="hap-audio-variation-title">15s version</div>
    </div>

</div>

Note that you can attach url and download link to each variation as well (with data-link, data-download on hap-audio-variation).

 <div class="hap-playlist-item" data-type="audio" data-path="media/audio/2/03.mp3" data-artist="Soundroll" data-title="Fight No More">
                    
    <div class="hap-audio-variations">

        <div class="hap-audio-variation" data-path="media/audio/2/03_15s.mp3" data-download="media/audio/2/03_15s.mp3" data-link="http://www.google.com" data-target="_blank" data-rel="nofollow">
            <div class="hap-audio-variation-title">15s version</div>
        </div>

    </div>

</div>

Or alternatively, you can write HTML for icons yourself (div class="hap-playlist-icons"):

 <div class="hap-playlist-item" data-type="audio" data-path="media/audio/2/03.mp3" data-artist="Soundroll" data-title="Fight No More">
                    
    <div class="hap-audio-variations">

        <div class="hap-audio-variation" data-path="media/audio/2/03_15s.mp3">
            <div class="hap-audio-variation-title">15s version</div>

            <div class="hap-playlist-icons">

                <a class="hap-playlist-icon hap-download" href="media/audio/2/03.mp3" download="" title="Download variation" aria-label="Download"><svg viewBox="0 0 512 512"><path d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg></a>

                <a class="hap-playlist-icon hap-link" href="http://www.google.com" target="_blank" title="Purchase variation" aria-label="Purchase" rel="nofollow"><svg viewBox="0 0 576 512"><path d="M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM408 168h-48v-40c0-8.837-7.163-16-16-16h-16c-8.837 0-16 7.163-16 16v40h-48c-8.837 0-16 7.163-16 16v16c0 8.837 7.163 16 16 16h48v40c0 8.837 7.163 16 16 16h16c8.837 0 16-7.163 16-16v-40h48c8.837 0 16-7.163 16-16v-16c0-8.837-7.163-16-16-16z"></path></svg></a>

            </div>

        </div>
    </div>

</div>

Parameters:

Settings for variation:

There are 2 different kinds of adverts supported in the player (normal adverts and vast).

Normal adverts

3 types of normal ads exist. Ads before main song start (ad pre), ads during main song play in specified interval (ad mid), ads after main song ends (ad end). Multiple ads are supported (meaning you can have multiple ad pre, ad mid, ad end).

Example ad pre:

<div id="playlist-1">
    <div class="hap-playlist-item" data-type="audio" data-path="media/audio/1/01.mp3" data-ad-pre="media/ads/human1.mp3"></div>
</div>

Example multiple ad pre:

<div id="playlist-1">
    <div class="hap-playlist-item" data-type="audio" data-path="media/audio/1/01.mp3" data-ad-pre="media/ads/human1.mp3,media/ads/human2.mp3,media/ads/human3.mp3"></div>
</div>

Example ad mid every 10 seconds:

<div id="playlist-1">
    <div class="hap-playlist-item" data-type="audio" data-path="media/audio/1/01.mp3" data-ad-mid="media/ads/bong.mp3" data-ad-mid-interval="10000"></div>
</div>

Example ad end:

<div id="playlist-1">
    <div class="hap-playlist-item" data-type="audio" data-path="media/audio/1/01.mp3" data-ad-end="media/ads/human3.mp3"></div>
</div>

Parameters:

You can also specify audio ads in global playlist options global

Related option pauseAudioDuringAds

Vast adverts

Vast adverts use Google IMA SDK https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side

Supported adverts are type non inline. Ima sample tags available here: https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags

Example of vast (data-vast attribute) added to song with data-vast attribute:

<div class="hap-playlist-item" data-type="audio" data-path="media/audio/2/02.mp3" data-artist="" data-title="song tille here" data-thumb="media/thumb/art/01.jpg" data-vast="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpost&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="></div>

How to apply one vast url for all songs in playlist?

You can also ad vast url inside global playlist data and then this vast url will be aplied to every song in the playlist. Example:

<div id="hap-playlist-list">

    <div class="playlist-test">

        <div class="hap-playlist-options" data-vast="VAST_URL_HERE"></div>

        <div class="hap-playlist-item" data-type="audio" data-path="AUDIO_URL" title="First song"></div>

        <div class="hap-playlist-item" data-type="audio" data-path="AUDIO_URL" title="Second song"></div>

        <div class="hap-playlist-item" data-type="audio" data-path="AUDIO_URL" title="Third song"></div>

    </div>
            
</div>             

Using skip button

Skip button can be used with VAST ads. To use skip button do the following:

Place button HTML somewhere in the player:

<div class="hap-ad-skip">Skip ad</div>             

Add CSS:

.hap-ad-skip{
    display: block;
    color: #fff;
    position: absolute;
    background: #2196f3;
    right: 0;
    top: 10px;
    cursor: pointer;
    transition: opacity .3s ease-out;
    padding: 5px;
    display: none;
}
.hap-ad-skip:hover{
    opacity: 0.9;
}             

Activate button with following:

Button will appear if and when ad is skippable!

Player can display accordion list. Accordion source can be from folder of audio files of from json file.

1. To read audio files from folders in "accordion mode", there has to be one root folder which contains other folders with audio files, but it does not contain audio files itself.

Example:

<div class="hap-playlist-item" data-type="folder_accordion" data-path="PATH/TO/ROOT/FOLDER" data-id3 data-sort="filename-asc"></div>

We end up with following layout:

PATH/TO/ROOT/FOLDER
   - folder-example1 (contains audio files)
   - folder-example2 (contains audio files)
   - folder-example3 (contains audio files)
   ....

Each "folder-example" if going to be one accordion item. "folder-example" can be named anyhow.

Folder needs to be located on the same server where the player is located.

1. path relative to the content/includes directory (where folder_accordion.php is located)

2. path absolute

Use locate_directory.php file from includes directory and place it in root directory and open it in browser to get desired folder location on your server.

2. To read audio files from json file in "accordion mode" provide data in json/txt file, example is located in data/json directory in plugin package.

Example:

<div class="hap-playlist-options" data-media-prefix-url="http://localhost/xampp/js//hap/_PREVIEW/HTML/content/media/audio/accordion/"></div>

<div class="hap-playlist-item" data-type="json_accordion" data-path="URL/TO/JSON/FILE" data-id3 ></div>

Note that we are using mediaPrefixUrl (data-media-prefix-url) to shorten audio url. This means in json file we only provide audio filenames, example of json:

[
    {"parent":"Soundroll",
    "children":[
            "Soundroll - Driving In My Car.mp3",
            "Soundroll - Feel Good Journey.mp3",
            "Soundroll - Fight No More.mp3"
        ]
    },
]

And to get full url to audio files, we add prefix url in data-media-prefix-url which then becomes:

http://www.some-domain.com/some-folder-with-audio-files/ + parent (folder) + / + children (audio filename)

http://www.some-domain.com/some-folder-with-audio-files/Soundroll/Soundroll - Driving In My Car.mp3

Alternatively you can provide full audio url in json (and not use data-media-prefix-url), for example:

[
    {"parent":"Soundroll",
    "children":[
            "http://www.some-domain.com/some-folder/Soundroll/Soundroll - Driving In My Car.mp3",
            "http://www.some-domain.com/some-folder/Soundroll/Soundroll - Feel Good Journey.mp3",
            "http://www.some-domain.com/some-folder/Soundroll/Soundroll - Fight No More.mp3"
        ]
    },
]

Parameters:

When using accordion mode set usePlaylistScroll:false in settings.

Grid skins can create thumbnail grid in page. Its used in combination with sticky player at the page bottom. Clicking a thumbnail will play audio in sticky player. You have 3 grid styles available (description below thumbnail, description above thumbnail, description right of thumbnail). Grid can also be used without sticky player. Grid demos included are grid1.html, grid2.html, grid3.html

This example shows how to add custom buttons in playlist items (PLAY, BUY, DOWNLOAD). This is a skin grid that has 3 additional buttons. Technically these buttons can be added to any skin, but they work best with skin grid.

For these buttons, add this css:

.hap-item-buttons{
    display: flex;
    flex-wrap:wrap;
}
.hap-play-button,
.hap-buy-button,
.hap-download-button{
    display: inline-block;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    line-height:normal;
    font-size: 16px;
    margin: 5px 5px 5px 0;
    white-space:nowrap;
    border: none;
    cursor: pointer;
    transition: opacity 300ms ease-out;
}
.hap-play-button:hover,
.hap-buy-button:hover,
.hap-download-button:hover{
    opacity: 0.8;
}
.hap-play-button{
    background: rgb(48,48,48);
    color: rgb(255,255,255);
}
.hap-buy-button {
    background: #9e9e9e;
    color: rgb(255,255,255);
}
.hap-download-button {
    background: rgb(33,93,153);
    color: rgb(255,255,255);
} 
    

Add this javascript:

player.on("playlistEndLoad", function(e, data){

    var markup = "<div class='hap-item-buttons'><span class='hap-play-button'>Play</span><span class='hap-buy-button'>Buy</span><a href='#' target='_blank' class='hap-download-button'>Download</a></div>";

     data.instance.find(".hap-playlist-info:not(.hap-playlist-buttons)").each(function(){

        var pi = hapjq(this).addClass('hap-playlist-buttons').append(markup);

        pi.find(".hap-play-button").on("click", function(){

            var item = hapjq(this).closest(".hap-playlist-item"),
            id = item.attr("data-id");

            player.processPlaylistRequest(id)

            return false;
        });

        pi.find(".hap-buy-button").one("click", function(){

            var item = hapjq(this).closest(".hap-playlist-item"),
            id = item.attr("data-id"),
            track = data.instance.getPlaylistData()[id].data

            if(typeof track.link !== 'undefined'){
                if(track.target == '_blank'){   
                    window.open(track.link);
                }else{
                    var link = track.link;
                    window.location = link;
                }
            }

            return false;
        });

        var id = pi.closest(".hap-playlist-item").attr("data-id"),
        track = data.instance.getPlaylistData()[id].data,
        link = track.audioPreview || track.download || '#';

        pi.find(".hap-download-button").attr({download: 'download', href:link});

    });

});
    

Note: the use of variable "player" here, this comes when instantiating the player.

var player;  
jQuery(document).ready(function($) {

    var settings = {
        ...
    }

    player = $("#hap-wrapper")
    

When using normal player in page, you can also activate sticky player which will be visible at page bottom at all times. Sticky player will play song from any active player in the page. You can get sticky player HTML code from any grid demo (grid1.html, grid2.html etc)

Setting available for sticky player.

Using audio waveform as seekbar.

Audio waveform as seekbar can be used in sticky player and in some other player skins (Epic, Epic mini).

For song to have waveform as seekbar, song needs to have peak data available with data-peaks attribute.

Example:

<div class="hap-playlist-item" data-type="audio" data-path="media/audio/3/Marcozannone - Hopes for Tomorrow.mp3" data-artist="Marcozannone" data-title="Hopes for Tomorrow" data-thumb="media/thumb/5/06.jpg" data-peaks="0.08,-0.06,0.11,-0.18,0.09,-0.04,0.11,-0.05,0.05,-0.1,0.19,-0.04,0.05,-0.07,0.14,-0.08,0.06,-0.06,0.06,-0.09,0.11,-0.09,0.1,-0.06,0.11,-0.08,0.16,-0.38,0.26,-0.16,0.21,-0.12,0.2,-0.32,0.22,-0.17,0.17,-0.22,0.24,-0.34,0.2,-0.39,0.08,-0.25,0.29,-0.1,0.29,-0.29,0.29,-0.18,0.26,-0.24,0.37,-0.32,0.23,-0.18,0.19,-0.16,0.25,-0.18,0.12,-0.23,0.21,-0.22,0.22,-0.35,0.24,-0.09,0.27,-0.19,0.17,-0.25,0.33,-0.21,0.13,-0.04,0.1,-0.11,0.12,-0.07,0.06,-0.06,0.11,-0.09,0.18,-0.06,0.1,-0.11,0.13,-0.14,0.23,-0.14,0.11,-0.16,0.13,-0.03,0.19,-0.09,0.15,-0.17,0.42,-0.17,0.15,-0.15,0.19,-0.19,0.22,-0.12,0.12,-0.18,0.18,-0.14,0.15,-0.23,0.47,-0.41,0.43,-0.22,0.33,-0.23,0.33,-0.11,0.11,-0.21,0.28,-0.43,0.29,-0.29,0.24,-0.24,0.09,-0.15,0.36,-0.31,0.53,-0.2,0.43,-0.3,0.33,-0.65,0.28,-0.16,0.23,-0.23,0.21,-0.22,0.34,-0.19,0.35,-0.25,0.18,-0.44,0.31,-0.25,0.34,-0.22,0.2,-0.33,0.32,-0.19,0.18,-0.14,0.1,-0.12,0.06,-0.06,0.13,-0.21,0.08,-0.07,0.09,-0.05,0.06,-0.13,0.08,-0.07,0.08,-0.07,0.09,-0.06,0.03,-0.02,0.05,-0.12,0.03,-0.01,0.04,-0.06,0.01,-0.01,0,-0.01,0.01,0,0,0,0,-0.01,0,0"></div>

You can use _generate_peaks.html demo page in plugin package documentation folder to create waveform data for self hosted audio files.

Using scroll in playlist

Available options for scroll in playlist are:

1. mCustomScrollbar

Requires css and js files in head:

<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" media="all" />
<script src="js/jquery.mCustomScrollbar.concat.min.js"/>

2. PerfectScrollbar

Requires css and js files in head:

<link rel="stylesheet" type="text/css" href="css/perfect-scrollbar.css"/>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"/>

Settings available:

Using song lyrics

Supported lyrics extensions are lrc, vtt, srt.

Provide url to lyrics file with data-lyrics attribute:

<div class="hap-playlist-item" data-type="audio" data-path="MP3_URL" data-lyrics="URL_TO_LYRICS_FILE" ></div>
    

File needs to be located on the same domain.

Available settings for lyrics:

How to set custom container for lyrics?

Lyrics by default is placed in hap-lyrics-holder dialog. You can specify your own HTML element where to place lyrics (and then style it optionally with CSS). To specify your own HTML element for lyrics use this in settings:

lyricsWrap: "#my-lyrics-wrap",
lyricsContainer: "#my-lyrics-container",

Add HTML in page:

<div id="my-lyrics-wrap"><div id="my-lyrics-container"> lyrics will be created here </div></div>

Syncronize video with playing audio.

Add video in same duration as playing audio and video will be syncronized with audio as it plays.

Provide url to video file with data-video attribute:

<div class="hap-playlist-item" data-type="audio" data-path="AUDIO_URL" data-video="URL_TO_VIDEO" ></div>
    

Available settings:

Using query string parameters. Rules:

- must include hap-query-instance=INSTANCE_NAME so player can be recognized (INSTANCE_NAME is from settings)
- all parameters begins with "hap-"
- replace parameter camelCase with dash
use + instead of space
use comma for array values

www.domain.com/some-page?hap-query-instance=INSTANCE_NAME&hap-volume=1&hap-active-item=5&hap-loop-state=playlist&hap-download-icon-title=some+title+here&hap-playlist-item-content=title,thumb

For parameters check configuration

How to create a playlist from query string?

Create audio playlist:

www.domain.com/some-page?hap-query-instance=INSTANCE_NAME&hap-type=audio,audio&hap-path=media/audio/1/01.mp3,media/audio/1/02.mp3&hap-thumb=media/thumb/1/01.jpg,media/thumb/1/02.jpg&hap-title=Driving+In+My+Car,A+Way+To+The+Top&hap-artist=Soundroll,Soundroll

For parameters check audio section (remove data- from parameter)

You need to have the same number of properties! (so for each audio in url same number of thumb, same number of title etc..)

Create podcast playlist:

www.domain.com/some-page?hap-query-instance=INSTANCE_NAME&hap-type=podcast&hap-path=http://www.kingola.com/feed/podcast/&hap-limit=11&hap-thumb-default=URL_TO_DEFAULT_THUMB

For parameters check podcast section (remove data- from parameter)

Create soundcloud playlist:

www.domain.com/some-page?hap-query-instance=INSTANCE_NAME&hap-type=soundcloud&hap-path=http://soundcloud.com/astateoftrance&hap-limit=11&hap-thumb-default=URL_TO_DEFAULT_THUMB&hap-load-more=true

For parameters check soundcloud section (remove data- from parameter)

The same can be done with other media types, just check each section in Working with media

Setting password on a song will prevent user from listening or downloading a song unless he enters valid password in password popup dialog:

To set password to view specific media add data-pwd attribute to playlist item, password example here is "123":

<div class="hap-playlist-item" data-type="audio" data-path="SONG_URL" data-pwd="202cb962ac59075b964b07152d234b70"></div>

To make password use md5 Hash Generator:

Enter your password and use hash in data-pwd attribute.

Password can also be defined in global playlist data (apply for every song in playlist).

Notes

Password cannot be used when song audio crossfade is used!

You can use option to crossfade between current and next playing song.

To activate this option add following settings:

useCrossFade:true,
crossFadeTime:10, 

Available settings:

Note that crossfade has some limitations:

1. Crossfade in only available for audio (no youtube, hls). It will work with Podcast or SoundCloud.

2. Audio will only crossfade when playback auto advances to next song on its own (it will not crossfade when user clicks next button song in player or other playlist item). Crossfade will get canceled if user seeks through audio.

3. Crossfade cannot work if you have audio ads defined on the song (pre advert / end advert)

4. Crossfade cannot work if song has start or end time defined (the same goes if AB loop is used)

5. Crossfade cannot work with song variations

6. Crossfade cannot work on IOS because volume cannot be controlled with javascript on IOS devices:

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript

You can use crossfade.html demo for test.

How to remember song last played position on page reload?

Available settings:

You can encrypt media paths with base64 to hide real url from page source.

To do so prepend the following string 'ebsfm:' before encrypted file path (using base64).

Example normal:

<div id="playlist-1">
    <div class="hap-playlist-item" data-type="audio" data-path="media/audio/1/01.mp3"></div>
</div>

Use any online free base64 tool like https://www.base64encode.org/ for encryption. Example when encrypted media/audio/1/01.mp3 becomes bWVkaWEvYXVkaW8vMS8wMS5tcDM=

<div id="playlist-1">
    <div class="hap-playlist-item" data-type="audio" data-path="ebsfm:bWVkaWEvYXVkaW8vMS8wMS5tcDM="></div>
</div>

To add an option which will be applied for every item in playlist use hap-playlist-options div which is placed inside a playlist:

<div id="hap-playlist-list">

    <div id="playlist-audio1">
        <div class="hap-playlist-options" data-thumb-global="THUMB_URL_HERE" data-start="5" data-end="10" data-d-pre="" data-ad-pre="URL/TO/AUDIO/AD-PRE" data-ad-mid="URL/TO/AUDIO/AD-MID" data-ad-mid-interval="10000" data-ad-end="URL/TO/AUDIO/AD-END"></div>

        <div class="hap-playlist-item" data-type="audio" data-path="media/audio/1/01.mp3" data-artist="Tim McMorris" data-title="A Bright And Hopeful"></div>
        ...
    </div>

</div>         
    

Options that are set on playlist global options will overwrite options that are set on each media (hap-playlist-item), EXCEPT for ads. Ads set on hap-playlist-item will take precedence over ads set in global playlist options.

Parameters:

You can add any number of icons in playlist and attach url to each icon. Icons can be SVG, font icons , full img tag. Note that using some formats (like SVG or img tag) may require additional CSS added!

To add icons to song use data-playlist-icons attribute (this example will add 2 icons):

<div class="hap-playlist-item" data-type="audio" data-path="audio-url" data-playlist-icons='[{"title": "Spotify", "url": "https://spotify.com", "target":"_blank", "icon": "f1bc", "rel": "nofollow"}, {"title": "Youtube", "url": "https://youtube.com", "target":"_blank", "icon": "&#xf167", "rel": "nofollow", "class":"custom-icon-class-here"}]'>
</div>

Note the format of attribute, outside quote is single, while all inner quotes are double!

Icon properties:

class - icon custom class (optional)
title - shows on hover (optional)
url - icon url on click (optional)
target - url target  (optional)
rel - rel attributte (optional)
icon - SVG, font icon, img tag

Note that only icon is required, other properties are optional.

Using Font Awesome for icons

Use cheatsheet to get icon value Font Awesome unicode cheatsheet. You need to wrap actual iocn value for example (f167) in &#x + f167 + ;

When using Font Awesome you need to add css in head tag:

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"/>

How to add any kind of content in playlist items simply add your HTML in hap-playlist-item div:

Example: (div class="foo" will be copied to playlist item)

<div class="hap-playlist-item" data-type="audio" data-path="audio-url">
    <div class="foo"></div>
</div>

How to add HTML description in playlist items:

Put div class="hap-playlist-description" in hap-playlist-item

<div class="hap-playlist-item" data-type="audio" data-path="audio-url">
    <div class="hap-playlist-description">
        <div class="my-description">lorem ipsum dolor sit amet <a href="http://www.google.com" target="_blank">link here</a></div>
    </div>
</div>

You can also add custom classes to hap-playlist-item. Just add your own classes next to hap-playlist-item, for example (your-class-here):

  <div class="hap-playlist-item your-class-here" data-type="audio" data-path="media/audio/1/01.mp3" data-artist="Tim McMorris" data-title="A Bright And Hopeful"></div></div>

Init player when clicking some DOM element in page.

$('.some-element').one('click', function(){
    $("#wrapper").hap(settings);
});  

How to include multiple players in same page?

Duplicate everything and make wrapper ID and settings unique for each player instance in page: (notice how we have player2, settings2, hap-wrapper2)

Put in page head

    var player, player2;

    jQuery(document).ready(function($) {

        var settings = {
                    instanceName:"player1",
                    activePlaylist:"#playlist-audio1",
                    ... (other player settings)
        }

        var settings2 = {
                    instanceName:"player2",
                    activePlaylist:"#playlist-audio1",
                    ...
        }


        player = $("#hap-wrapper").hap(settings);

        player2 = $("#hap-wrapper2").hap(settings2);

    });

Put in page body

<div id="hap-wrapper">
    ...(player html code)
</div>

<div id="hap-wrapper2">
    ...(player html code)
</div>

<div id="hap-playlist-list"> 

    <div id="playlist-audio1"> 
        ...
    </div>

</div>

Following callbacks are supported.

Main song callbacks:

    player.on('setupDone', function(e, data){

        //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)

    }).on('soundStart', function(e, data){

        //called on song start, returns (instance, instanceName, media)

    }).on('soundRequest', function(e, data){

        //called on song request, returns (instance, instanceName, media)

    }).on('soundPlay', function(e, data){

        //called on song play, returns (instance, instanceName, media)

    }).on('soundPause', function(e, data){

        //called on song pause, returns (instance, instanceName, media)

    }).on('soundEnd', function(e, data){

        //called on song end, returns (instance, instanceName, media)

    }).on('soundError', function(e, data){

        //called on song error, returns (instance, instanceName, media, error)

    }).on('playlistStartLoad', function(e, data){

        //called on playlist start load, returns (instance, instanceName)

    }).on('playlistEndLoad', function(e, data){

        //called on playlist end load, returns (instance, instanceName)

    }).on('playlistEnd', function(e, data){

        //called on playlist end, returns (instance, instanceName, counter)

    }).on('clickPlaylistItem', function(e, data){

        //called on playlist item click, returns (instance, instanceName)

    }).on('playlistItemDisabled', function(e, data){

        //called on playlist item disable, returns (instance, instanceName, item)

    }).on('playlistItemEnabled', function(e, data){

        //called on playlist item enable, returns (instance, instanceName, item)

    }).on('overPlaylistItem', function(e, data){

        //called on mouse over playlist item, returns (instance, instanceName)

    }).on('outPlaylistItem', function(e, data){

        //called on mouse out playlist item, returns (instance, instanceName)

    }).on('volumeChange', function(e, data){

        //called on volume change, returns (instance, instanceName, volume)

    }).on('destroyPlaylist', function(e, data){

        //called on playlist destroy, returns (instance, instanceName)
    
    }).on('getAws_error', function(e, data){

        //getting Amazon S3 url failed, returns (instance, instanceName)

    }).on('getAwsThumb_error', function(e, data){

        //getting Amazon S3 thumb url failed, returns (instance, instanceName)

    }).on('createWaveform_error', function(e, data){

        //create waveform error, returns (instance, instanceName)

    }).on('beforeLoginScreen', function(e, data){

        //before loogin screen opnes, returns (instance, instanceName, media)

    });

    



    

Ad callbacks (called when ads play):

    player.on('adPrePlay', function(e, data){

        //called when ad pre starts, returns (instance, instanceName, ad)

    }).on('adMidPlay', function(e, data){

        //called when ad mid starts, returns (instance, instanceName, ad)

    }).on('adMidEnded', function(e, data){

        //called when ad mid ends, returns (instance, instanceName, ad)

    }).on('adEndPlay', function(e, data){

        //called when ad end starts, returns (instance, instanceName, ad)

    })



    

How to use returned parameters:

    player.on('soundStart', function(e, data){
        //called on song start, returns (instance, instanceName, counter)

        console.log(data.instance);
        console.log(data.instanceName);
        console.log(data.counter);

        //some api methods

        //get song current time
        data.instance.getCurrentTime();

        //get song duration
        data.instance.getDuration();

    });

    

API example is located in _api.html demo.

Following api methods are included:

player.playMedia(); //Play current media

player.pauseMedia(); //Pause current media

player.togglePlayback(); //Toggle current media (pause/play)

player.nextMedia(); //Play next media

player.previousMedia(); //Play previous media

/* set volume (0-1) */
----------------------------------
player.setVolume(0); //Set volume (0)
player.setVolume(0.5); //Set volume (0.5)
player.setVolume(1); //Set volume (1)

player.toggleMute(); //Toggle mute

player.toggleRandom(); //Set random playlist playback (true/false/toggle)
player.setLoop(); //Set loop state (playlist, single, off) 

player.setAutoPlay(boolean); //set autoplay

player.setPlaybackRate(0.5); //Set playback rate (0.5)
player.setPlaybackRate(1); //Set playback rate (1)
player.setPlaybackRate(2); //Set playback rate (2)

/* seek (seconds) */
--------------------------
player.disableSeek(boolean); //disable seekbar usage

player.seek(0); //seek (0)
player.seek(5); //seek (5)
player.seek(15); //seek (15)

player.seekBackward(value); //seek value seconds backwards
player.seekForward(value); //seek value seconds forward


/* load media from playlist on demand */
--------------------------
//Load media (format, value)

//by counter (counting start from zero, 0 = first media, 1 = second media...)
player.loadMedia('counter', 0); //Load first media in playlist
player.loadMedia('counter', 2); //Load third media

//by title 
player.loadMedia('title', 'Song title'); 


//by title and artist
player.loadMedia('title-artist', 'Song title', 'Artist name'); 


//by media-id attribute
player.loadMedia('id', 7); //Load media with data-media-id attribute 7
player.loadMedia('id', 2'); //Load media with data-media-id attribute 2


/* load more */
--------------------------
player.loadMore();// load more function, valid for Youtube playlist, Soundcloud (Soundclond is buggy and does not return next_href for pagination rather often), folder of mp3 files, Podcast

player.setLoadMore(boolean);//toggle load more function on/off





/* load playlist on demand */
--------------------------
player.loadPlaylist('#playlist-audio1'); //Load 'playlist-audio1'
player.loadPlaylist('#playlist-podcast1'); //Load 'playlist-podcast1'


/* play specific audio by passing track data */
--------------------------
var track = {
    type: 'audio', 
    mp3: 'PATH TO MP3',
    artist: 'ARTIST NAME',
    title: 'SONG TITLE', 
    thumb: 'THUMB URL'
}
player.inputAudio(track);


/* add track(s) to playlist */
--------------------------

//add single track
var track = {
    type: 'audio', 
    mp3: 'PATH TO MP3',
    artist: 'ARTIST NAME',
    title: 'SONG TITLE', 
    thumb: 'THUMB URL'
}

player.addTrack(track, false, 0); //add track, position 0
player.addTrack(track, true, 2); //add track, play it, position 2
player.addTrack(track, true); //add track, play it, position end


//add multiple tracks 
var track_array = [{
    type: 'audio', 
    mp3: 'PATH TO MP3',
    artist: 'ARTIST NAME',
    title: 'SONG TITLE', 
    thumb: 'THUMB URL'
},
{
    type: 'audio', 
    mp3: 'PATH TO MP3',
    artist: 'ARTIST NAME',
    title: 'SONG TITLE', 
    thumb: 'THUMB URL'
}, 
{
    type: 'audio', 
    mp3: 'PATH TO MP3',
    artist: 'ARTIST NAME',
    title: 'SONG TITLE', 
    thumb: 'THUMB URL'
}]

player.addTrack(track_array, false, 0); //add tracks, position 0
player.addTrack(track_array, true, 2); //add tracks, play it, position 2
player.addTrack(track_array, true); //add tracks, play it, position end




/* remove track(s) from playlist */
--------------------------
//remove track by counter (counting start from zero, 0 = first song, 1 = second song...)
player.removeTrack('counter', 0); //remove first song
player.removeTrack('counter', 2); //remove third song
player.removeTrack('counter', player.getPlaylistLength()-1); //remove last song in playlist
player.destroyPlaylist(); //remove all tracks

//remove track by title
player.removeTrack('title', 'A Bright And Hopeful Future'); //remove song 'A Bright And Hopeful Future'
player.removeTrack('title', 'Be My Valentine'); //remove song 'Be My Valentine'

//remove track by media id
player.removeTrack('id', 0); //remove track media id 0
player.removeTrack('id', 0); //remove track media id 1


/* destroy current playing media / playlist */
--------------------------
player.destroyMedia(); //Destroy current playing song
player.destroyPlaylist(); //Destroy current playlist


/* sort tracks in playlist */
--------------------------
player.sort('title-asc'); //sort playlist ascending
player.sort('title-desc'); //sort playlist descending
player.sort('random'); //sort playlist random

/* misc */
--------------------------

player.getCurrMediaData();//get current song data (title, audio url..)

player.getPlaylistData();//get whole playlist song data (title, audio url..)

player.getCurrentTime();//get current time in seconds

player.getDuration();//get duration in seconds

player.destroyPlaylistScroll();//destroy playlist scroll

player.getSetupDone();//get player ready to use api

player.getPlaylistLoading();//get playlist is loading

player.getPlaylistTransition();//Return playlist loading (is playlist loading)

player.getMediaPlaying();//get media playing

player.getCounter();//get active playlist item number starting from zero (0)

player.getPlaylistLength();//get playlist length




/* open player in popup window */
--------------------------
player.openPopup(); //open popup 

    

Note: when using player in popup, its restricted to one player per page.

To open popup manually on click add element class="hap-popup-toggle" in player html:

<div class="hap-popup-toggle" data-tooltip="Open in popup">...icon here...</div>

Using popup feature requires popup.html file in the same directory where player folders are located (js, css, includes..)

In popup.html file in head tag set link to css file of the player, for example:

<link rel="stylesheet" type="text/css" href="css/artwork.css"/>

Or alternatively, set cssUrl in settings:

cssUrl: "css/artwork.css"

To open player in popup on start (automatically or by clicking DOM element) without initializing the player in page beforehand do this (example from _api.html):

settings.popupWidth = 800;//choose popup size
settings.popupHeight = 590;

hap_player_auto_instance = {};
hap_player_auto_instance.settings = settings;//add settings
hap_player_auto_instance.wrapper = $("#hap-wrapper");//add player wrapper element

hapOpenPopup(settings);//call open popup

To use the api later from parent window when player is opened in popup:

settings.instanceName = 'player1'//settings has instanceName
Play next media

Included sharing sites are listed with hap-share-item class:

<div class="hap-share-item" data-type="tumblr" data-tooltip="share on tumblr">icon-here</div>
<div class="hap-share-item" data-type="twitter" data-tooltip="share on twitter">icon-here</div>
<div class="hap-share-item" data-type="facebook" data-tooltip="share on facebook">icon-here></div>

To add new sharing site add share-item class and data-type attribute, for example:

<div class="hap-share-item" data-type="pinterest" data-tooltip="Share on Pinterest">icon here</div>

Then add sharing code in sharemanager.js file.

Use this setting to control weather to use social sharing in the player. If set to false, sharemanager.js will not be loaded in the player.

useShare: true / false

Player can use following embedding functionality in embed screen.

Embed code

Available settings:

Song url link

Url link offers direct link to song on your website. This is set internally by the player.

To add embed code to the player add following html inside the player (if this code is already not present in the player):

1. button to toggle embed screen:

<div class="hap-embed-toggle hap-contr-btn" data-tooltip="Embed">
    <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
</div>

2. embed screen:

<div class="hap-embed-holder">
              
    <div class="hap-embed-holder-inner">
        <div class="hap-embed-data">
            <div class="hap-embed-title">Embed this song:</div>
            <div class="hap-embed-box">
                <div class="hap-embed-field-wrap hap-audio-embed"></div>
                <div class="hap-embed-copy">Copy</div>
            </div>
            <div class="hap-embed-title">Copy song link:</div>
            <div class="hap-embed-box">
                <div class="hap-embed-field-wrap hap-audio-link"></div>
                <div class="hap-embed-copy">Copy</div>
            </div>
        </div>
    </div>

    <div class="hap-embed-close hap-contr-btn" data-tooltip="Close">
        <svg role="img" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
    </div>
    
</div>

3. You may need some css, for example:

.hap-art-wide-dark .hap-embed-holder{
    background: #1b1b1b; 
    border: 1px solid #333;
}
.hap-art-wide-dark .hap-embed-field-wrap-selected{
    background: #2196F3;
    color: #fff;
}

How to change icons in player?

Icons in player can be anything, from inline SVG, font icons (like Font Awesome, Material icons, IonIcons...) to plain jpg png images.

To change icons in player simply replace svg part. For example, shuffle icon:

<div class="hap-random-toggle hap-contr-btn" data-tooltip="shuffle">

    <svg viewBox="0 0 512 512"><path d="M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"></path></svg>

</div>

For buttons that have multiple icons like pause/play, volume, loop, title sort, change multiple svg, for example pause/play:

 <div class="hap-playback-toggle hap-contr-btn">
     <div class="hap-btn hap-btn-play">

         <svg viewBox="0 0 448 512"> <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"> </path> </svg>

     </div>
     <div class="hap-btn hap-btn-pause">

         <svg viewBox="0 0 448 512"> <path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"> </path> </svg>

     </div>
 </div>

There are also some icons set internally in settings

Demo metalic_all.html contains different icon type examples (svg, font-awesome, images, material-design).

To see how to use image icons check metalic_image_icons.html demo.

CSS for image icons is the following (included in metalic.css file):

/*  image icons */
.hap-icon-active{
    display: none!important;
}
.hap-contr-btn:hover .hap-icon-active,
.hap-contr-btn-hover .hap-icon-active{
    display: block!important;
} 
.hap-contr-btn img{
    display: block;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*  image icons */
.hap-link:hover .hap-icon-active,
.hap-download:hover .hap-icon-active{
    display: block!important;
} 
.hap-download img,
.hap-link img{
    display: block;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

If you have your own custom input fields in player, you need to add hap-input-field class to them. This is to ensure they are excluded from keyboard input controls if keyboard controls are used in the player.

Use these options in settings:

Parameters:

Following events will be displayed inside Google Analytics panel / REAL-TIME / Events section:

song downloaded 
song played
song paused
song ended

Self hosted audio mp3 doesnt play

If you have trouble playing audio on your server in some browsers, and you get an errors in developer console similar to these:

HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource ... failed.

AddType audio/mpeg .mp3

Autoplay

Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback:

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript

Scrollbar doesnt work when player is located in an iframe

If you get this message in console: TypeError: Object.defineProperty called on non-object (https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/453)

There seems to be a bug between mcustomscrollbar and jQuery version 3. Try using different jquery version inside iframe for the player. For example jquery 1.10.2 seems to work. Or try using different playlist scroll

Plugin does not work as expected

Send a message at http://codecanyon.net/user/Tean#contact with a link to your live page to illustrate the problem so we can have a look. Include details of your issue so we can quickly solve the problem.