Waveform Audio Filter

Javascript

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

Note: you can open any included demo page from deploy folder (dark_grid_pill.html ..etc) and use it as such or modify from there. Following installation instructions simply show how to create the same code from start.

How to add to your page?

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

<link rel="stylesheet" type="text/css" href="css/waf.css" />
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" /><!-- only for playlist icons font awesome -->
    
<script type="text/javascript" src="js/waf.js"></script>

2. Include player HTML into BODY section of the page:

<div id="waf-player"></div>

3. Initialize the plugin:

<script type="text/javascript">
        
    var player;
    document.addEventListener("DOMContentLoaded", function(event) {

        var settings = {
            playerSkin: "dark",//light, dark
            trackLayout: 'grid',//grid, list
            instanceName:"player1",

            usePagination: true,
            paginationType: 'buttons',//loadMore, scrollBottom, buttons
            loadMoreBtnText: "Load more",
            paginationPerPage: 8,
            scrollBottomOffset: 300,

            paginationPreviousBtnTitle:'Previous',
            paginationNextBtnTitle:'Next',

            preload: 'auto',
            volume:"0.5",
            songEndAction:"next",
            seekTime:10,
            useAudioPreview:false,

            useShare:true,
            useShareFacebook:true,
            facebookAppId:"",
            useShareTwitter:true,
            useShareTumblr:true,
            useShareWhatsApp:true,
            useShareReddit:true,
            useShareLinkedIn:true,
            useSharePinterest:true,

            useStatistics:false,
            tooltipStatDownloads:"Downloads",
            tooltipStatPlays:"Plays",

            useGa:false,
            gaTrackingId:"",

            useSavePlaylistButton:true,
            savePlaylistTitleText:"Enter playlist title",
            savePlaylistBtnText:"Save playlist",
            savePlaylistTitleRequiredMsg:"Title cannot be empty!",

            toggleFiltersBtnText:"Filters",
            copyFiltersBtnText:"Copy filters",
            copiedToClipboardText:"Copied to clipboard!",

            //search filter
            nothingFoundMessage:"No results",
            resetFilterBtnText:"Reset filter",
            includeKeywordsInSearch: true,
            showPreloaderOnSearch:false,

            //scroll top btn
            useScrollTop:true,
            scrollTopButtonVisibility: 0.3,
            scrollTopTitle:'Back to top',

            //filters
            useFiltering:true,
            isFilterAjax:true,
            applyFilterBtnText: "apply",
            filterLayout:'pill',//pill, dropdown
            sortMainFiltersByTitle:true,
            filterDropdownAccordion:false,

            createFilterTagsInSong:true,

            createArtistFilter:true,
            artistFilterTitle:"Artist",

            createDurationFilter:true,
            durationFilterTitle:"Length",
            durationStartText:"to",
            durationEndText:"seconds",

            createDateFilter:true,
            dateFilterTitle:"Date added",
            anyDateText: "any date",
            inTheLastDayDateText: "in the last day",
            inTheLastWeekDateText: "in the last week",
            inTheLastMonthDateText: "in the last month",
            inTheLastYearDateText: "in the last year",
            //

            filters:[
                {
                    "id":"0",
                    "title":"Price",
                    "type":"number",
                    "step":"0.01",
                    "startText":"to",
                    "endText":"$"
                },
                {
                    "id":"1",
                    "title":"Genre",
                    "category":[
                        {
                            "category_id":"0",
                            "title":"corporate"
                        },
                        {
                            "category_id":"1",
                            "title":"dance / techno"
                        },
                        {
                            "category_id":"2",
                            "title":"pop"
                        },
                        {
                            "category_id":"3",
                            "title":"rock"
                        },
                        {
                            "category_id":"4",
                            "title":"electronic"
                        }
                    ],
                    "type":"text",
                    "link":"https://www.your-domain.com/genre/",
                    "linkTarget":"_blank"
                },
                {
                    "id":"2",
                    "title":"Tag",
                    "type":"text",
                    "link":"https://www.your-domain.com/tag/",
                    "linkTarget":"_blank"
                },
                {
                    "id":"3",
                    "title":"Instrument",
                    "type":"text",
                    "link":"https://www.your-domain.com/instrument/"
                },
                {
                    "id":"4",
                    "title":"Mood",
                    "type":"text",
                    "link":"https://www.your-domain.com/mood/"
                },
                {
                    "id":"5",
                    "title":"bpm",
                    "range":[
                        {
                            "title":"Show all",
                            "selector":"any",
                        },
                        {
                            "title":"slow (0-100 bpm)",
                            "selector":[0,100],
                        },
                        {
                            "title":"medium (100-300 bpm)",
                            "selector":[100,300],
                        },
                        {
                            "title":"fast (300-500 bpm)",
                            "selector":[300,500]
                        }
                    ],
                    "type":"number"
                },
                {
                    "id":"6",
                    "title":"On Sale",
                    "type":"boolean",
                    "info":"Is the product on sale",
                    "default":"1"
                },
                {
                    "id":"7",
                    "title":"Looped",
                    "type":"boolean",
                    "info":"Is the song looped"
                },
                {
                    "id":"8",
                    "title":"Access",
                    "type":"radio",
                    "anySelector":"any"
                },
                {
                    "id":"9",
                    "title":"Licence",
                    "type":"text"
                },
                {
                    "id":"10",
                    "title":"Sales",
                    "range":[
                    {
                            "title":"Show all",
                            "selector":"any",
                        },
                        {
                            "title":"No sales",
                            "selector":[0,0],
                        },
                        {
                            "title":"Low",
                            "selector":[1,100],
                        },
                        {
                            "title":"Medium",
                            "selector":[100,200],
                        },
                        {
                            "title":"High",
                            "selector":[200,300]
                        },
                        {
                            "title":"Top sellers",
                            "selector":[300,99999999999]
                        }
                    ],
                    "type":"number"
                },
            ],

            artistUrlTarget:"_blank",

            

            rangeBgColor: "#dadae5",
            rangeFrColor: "#5b758c",

            closeTooltip: "Close",

            numberOfResultsText: "Number of results found",

            layoutSimpleButtonTitle:'Simple View',
            layoutExpandedButtonTitle:'Expanded View',

            useSeekOnLyrics:true,
            lyricsTooltipText:"Lyrics",

            volumeTooltipText:"Volume",
            playTooltipText:"Play",
            pauseTooltipText:"Pause",
            downloadTooltipText:"Download this song",
            linkTooltipText:"Purchase",

            shareCopyBtnText:"Copy",
            shareCopiedBtnText: "Copied!",

            shareTooltipText:"Share",
            shareTumblrTooltipText:"Share on Tumblr",
            shareTwitterTooltipText:"Share on Twitter",
            shareFacebookTooltipText:"Share on Facebook",
            shareWhatsappTooltipText:"Share on WhatsApp",
            shareRedditTooltipText:"Share on Reddit",
            shareLinkedinTooltipText:"Share on LinkedIn",
            sharePinterestTooltipText:"Share on Pinterest",

            dialogCancelText:"Cancel",
            dialogOkText:"Ok",

            toggleLyricsBtnText:"Toggle",

            //search filters
            searchFiltersPlaceholderText:"Search filters",

            //search song
            searchSongPlaceholderText:"Search song",

            searchPlaceholderText:"Search",

            //waveform
            waveform_waveColor:"#9e9e9e",
            waveform_progressColor:"#0073aa",
            waveform_barWidth:1,
            waveform_barRadius:0,
            waveform_barGap:5,

            //fixed player
            useFixedPlayer: true,
            fixedPlayerOpened: true,
            //fixed icons
            useShareIconInFixed:true,
            useDownloadIconInFixed:true,
            useLyricsIconFixed:true,
            useLinkIconInFixed:true,
            usePrevIconInFixed:true,
            useNextIconInFixed:true,

            //sort by
            sortTooltipText:"Sort by",
            sortByPopularAscText:"Popular tracks ascending",
            sortByPopularDescText:"Popular tracks descending",
            sortByTitleAscText:"Title ascending",
            sortByTitleDescText:"Title descending",
            sortByArtistAscText:"Artist ascending",
            sortByArtistDescText:"Artist descending",
            sortByDurationAscText:"Duration ascending",
            sortByDurationDescText:"Duration descending",
            sortByDateAscText:"Date added (newest)",
            sortByDateDescText:"Date added (oldest)",

            minWidthDisplayInlineWaveform: 0
            

        }

        //load playlist from json

        fetch('data/1.txt')
        .then(response => response.text())
        .then(content => {
      
            var d =  JSON.parse(content);
            settings.media = d
            player = new waf(document.getElementById("waf-player"), settings);
           
        }); 

    });

</script>
    

Basic gallery layout is set with the following settings. Choose between light or dark skin, song list or grid layout, use filtering with pill or dropdown style.

Parameters:

Filter layouts

Filter layout can be pill style. In this layout text filters (like Artist) are shown in pill style.

Settings for this layout

filterLayout: pill,
filterLayoutText: pill

Filter layout can be pill style with text dropdowns. In this layout text filters (like Artist) are shown in dropdown style.

Settings for this layout

filterLayout: pill,
filterLayoutText: dropdown

Filter layout can be dropdown style. All filters are shown in dropdown accordion style.

Settings for this layout

filterLayout: dropdown

All player options that can be set when initalizing plugin:

Parameters:

<div class="waf-spinner"><div class="waf-cube1"></div><div class="waf-cube2"></div></div>

How to add songs to playlist?

Songs are added over json file. Plugin will load json file (containing songs) before initialization:

fetch('data/1.txt')
.then(response => response.text())
.then(content => {
    var d =  JSON.parse(content);
    settings.media = d
    player = new waf(document.getElementById("waf-player"), settings);
}); 

And set them as settings.media. This means you can also add this data directly as settings.media if you dont want load them with json.

Example of json file is located in plugin package. Possible song properties are as follows:

"mediaId":"UNIQUE ID FOR EACH SONG",
"type":"audio",
"path":"SONG URL",
"audio_preview":"AUDIO PREVIEW SONG URL",
"title":"SONG TITLE",
"duration":"SONG DURATION IN SECONDS",
"artist":"SONG ARTIST",
"artistUrl":"ARTIST URL",
"artistUrlTarget":"ARTIST URL TARGET",
"description":"SONG DESCRIPTION",
"thumb":"SONG THUMB",
"alt":"SONG THUMB ALT",
"download":"SONG DOWNLOAD URL",
"link":"SONG URL LINK",
"target":"SONG URL TARGET",
"rel":"SONG URL TARGET REL",
"start":"SONG START TIME IN SECONDS",
"end":"SONG END TIME IN SECONDS",
"playback_rate":"PLAYBACK RATE",
"lyrics":"LYRICS FILE URL",
"peaks":"WAVEFORM PEAK DATA",
"date":"9/17/2021",//creation date, used for sorting and filtering
"c_download":13,//used for statistics
"c_play":6,//used for statistics, or sorting by popular
"filter":[],//song filters
"playlistIcons":[//optional playlist icons
  {"title": "Youtube", "url": "https://youtube.com", "target":"_blank", "icon": "&#xf167", "rel": "nofollow"},
  {"title": "Apple Music", "url": "https://apple.com", "target":"_blank", "icon": "&#xf179", "rel": "nofollow"},
  {"title": "Soundcloud", "url": "https://soundcloud.com", "target":"_blank", "icon": "&#xf1be", "rel": "nofollow"}, 
  {"title": "Amazon", "url": "https://amazon.com", "target":"_blank", "icon": "&#xf270", "rel": "nofollow"}
],

If you dont want to show all songs on start, you can use pagination. This is advised if you have many songs so not all songs are loaded on start which would slow the player load. Different kind of pagination type exist.

Available settings for pagination:

Player will display audio waveform for each song in the gallery. For this to happen, each song need to have waveform data avialable. This is set for each song inside song properties:

"peaks":"0.06,-0.03,0.12,-0.07,0.37,-0.1,0.23,-0.27,0.28,-0.27,0.17,-0.09,0.3,-0.27,0.2,-0.12,0.31,-0.3,0.32,-0.29,0.14,-0.29,0.3,-0.49,0.74,-0.2,0.46,-0.36,0.39,-0.38,0.58,-0.21,0.36,-0.41,0.51,-0.22,0.31,-0.37,0.44,-0.3,0.48,-0.57,0.5,-0.57,0.47,-0.47,0.58,-0.59,0.64,-0.31,0.39,-0.65,0.57,-0.54,0.76,-0.63,0.12,-0.66,0.39,-0.75,0.38,-0.72,0.22,-0.69,0.58,-0.35,0.38,-0.38,0.3,-0.44,0.37,-0.64,0.33,-0.47,0.43,-0.26,0.61,-0.33,0.61,-0.24,0.44,-0.55,0.59,-0.3,0.37,-0.44,0.32,-0.42,0.3,-0.69,0.58,-0.66,0.54,-0.51,0.68,-0.53,0.62,-0.7,0.44,-0.68,0.27,-0.58,0.42,-0.5,0.49,-0.54,0.63,-0.7,0.37,-0.48,0.5,-0.56,0.55,-0.65,0.49,-0.51,0.54,-0.77,0.57,-0.3,0.33,-0.48,0.38,-0.56,0.58,-0.76,0.46,-0.52,0.55,-0.48,0.56,-0.7,0.61,-0.32,0.73,-0.75,0.75,-0.78,0.25,-0.4,0.32,-0.51,0.24,-0.27,0.41,-0.27,0.32,-0.34,0.47,-0.42,0.38,-0.61,0.2,-0.59,0.24,-0.52,0.31,-0.5,0.52,-0.67,0.59,-0.68,0.37,-0.48,0.72,-0.44,0.71,-0.33,0.48,-0.54,0.62,-0.63,0.59,-0.59,0.63,-0.64,0.44,-0.47,0.72,-0.4,0.58,-0.43,0.38,-0.34,0.51,-0.6,0.05,-0.54,0.16,-0.1,0.11,-0.14,0.13,-0.14,0.12,-0.17,0.1,-0.13,0,0"

You can use included _generate_peaks.html demo to generate audio waveform data, then you can copy this into json playlist file for each song. Or you can provide waveform data youself. Note that wavesurfer is used to draw waveforms in the gallery.

Other available settings for waveforms:

Waveform style

Here are couple of waveform examples, to create such waveforms use following settings:

Settings:

waveBarWidth: 5,
waveBarRadius: 3,
waveBarGap: 5,
    

Settings:

waveBarWidth: 1,
waveBarRadius: 0,
waveBarGap: 5
    

Settings:

waveBarWidth: 0,
waveBarRadius: 0,
waveBarGap: 0,
    

Filter properies are defined in the settings, example:

filters:[
    {
        "id":"0",
        "title":"price",
        "type":"number",
        "step":"0.01",
        "startText":"to",
        "endText":"$"
    },
    {
        "id":"2",
        "title":"tag",
        "type":"text",
        "link":"https://www.your-domain.com/tag/",
        "linkTarget":"_blank"
    } 
]

Then each song can "hook" to these filters in song properties inside song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
	{
        "id":"0",
        "value":[40]
    },
    {
        "id":"2",
        "value":["tension","vocal"]
    }
]

This example sets price filter to value od 40$ and tag filter to value of "tension","vocal"

Filter properties explained

Filters can be text based (example keywords, genres etc..) single or 2 level with categories, number based (example song duration, sales count, bpm etc..), radio (one choice from multiple options), boolean type true / false (example is song on sale, is song looped etc..), date filter (filter songs by created date).

Example (filter property):

filters:[
    {
        "id":"2",
        "title":"tag",
        "type":"text",
        "link":"https://www.your-domain.com/tag/",
        "linkTarget":"_blank"
    } 
]

Then each song can "hook" to this filter in song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
    {
        "id":"2",
        "value":["tension","vocal"]
    }
]

This example sets tag filter to value of "tension","vocal".

Note the filter value is in array (even if single)! This aplies for all filter properties, regadless of filter type!

Example (filter property):

Define categories in filter properties, each category need to have unique id (per filter) starting from 0 and title.

filters:[
    {
        "id":"1",
        "title":"Genre",
        "category":[
            {
                "category_id":"0",
                "title":"corporate"
            },
            {
                "category_id":"1",
                "title":"dance / techno"
            },
            {
                "category_id":"2",
                "title":"pop"
            },
            {
                "category_id":"3",
                "title":"rock"
            },
            {
                "category_id":"4",
                "title":"electronic"
            }
        ],
        "type":"text"
    }
]

Then each song can "hook" to this filter in song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
    {
	"id":"1",
	"value":[
		{
			"category_id":"0",
			"value":["inspirational","motivational","artistic"]
		},
		{
			"category_id":"1",
			"value":["dance","dubstep"]
		},
			["battle","gangsta","superb"]
		]
	}
]

This example hooks to 2 categories ( "category_id":"0", "category_id":"1" ) and sets additional values inside an array( ["battle","gangsta","superb"] ).

These additional values (which do not belong to any category) need to be in a single array!

So in example above, song can hook to any number of filter categories (or none!) and define additional values which do not belong to any category and are treated as "top level".

Next example show song which uses the same filter, but does not have any category, just uses additional values on its own.

"mediaId":4,
"type":"audio",
"path":"media/audio/1/05.mp3",
"artist":"Tim McMorris",
"filter":[
    {
	"id":"1",
	"value":["rnb","funk","soul"]
	}
]

Example (filter property):

filters:[
    {
	    "id":"0",
	    "title":"Price",
	    "type":"number",
	    "step":"0.01",
	    "startText":"to",
	    "endText":"$"
	}
]

Then each song can "hook" to this filter in song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
    {
		"id":"0",
		"value":[40]
    }
]

This example sets price filter to value od 40$.

Example (filter property):

Number filter which has ranges defined (each range has title and selector):

filters:[
    {
	    "id":"5",
	    "title":"Bpm",
	    "range":[
	        {
	            "title":"Show all",
	            "selector":"any",
	        },
	        {
	            "title":"slow (0-100 bpm)",
	            "selector":[0,100],
	        },
	        {
	            "title":"medium (100-300 bpm)",
	            "selector":[101,300],
	        },
	        {
	            "title":"fast (300-500 bpm)",
	            "selector":[301,500]
	        }
	    ],
	    "type":"number"
	}
]

Then each song can "hook" to this filter in song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
	{
        "id":"5",
        "value":[55]
     }
]

This example sets Bpm filter to value od 55, which means it belong to range "title":"slow (0-100 bpm)" because 55 is beteeen 0-100 defined in that range.

Note: do not change this "selector":"any" property in this filter type!

filters:[
    {
	    "id":"5",
	    "title":"Bpm",
	    "range":[
	        {
	            "title":"Show all",
	            "selector":"any",
	        },
	        {
	            "title":"slow (0-100 bpm)",
	            "selector":[0,100],
	        },
	        {
	            "title":"medium (100-300 bpm)",
	            "selector":[101,300],
	        },
	        {
	            "title":"fast (300-500 bpm)",
	            "selector":[301,500]
	        }
	    ],
	    "type":"number"
	}
]

true / false

Example (filter property):

filters:[
    {
        "id":"6",
        "title":"On Sale",
        "type":"boolean",
        "info":"Is the product on sale",
        "default":"0",
    }
]

Then each song can "hook" to this filter in song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
    {
		"id":"6",
		"value":[1]
	}
]

This example sets On Sale filter to value od true (1)

1 = true, 0 = false.

Single choice from multiple text options

Example (filter property):

filters:[
    {
        "id":"8",
        "title":"Access",
        "type":"radio",
        "anySelector":"any"
    },
]

Then each song can "hook" to this filter in song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
    {
	    "id":"8",
	    "value":["free","paid"]
	}
]

This example sets Access filter to values ["free","paid"]

Create star rating (1-5)

Example (filter property):

filters:[
    {
        "id":"11",
        "title":"Rating",
        "type":"rating",
        "info":"Stars"
    }
]

Then each song can "hook" to this filter in song properties:

"mediaId":19,
"type":"audio",
"path":"media/Catfish and the Bottlemen - Longshot.mp3",
"artist":"Catfish and the Bottlemen",
"filter":[
    {
        "id":"11",
        "value":[4]
    }
]

This example sets Rating filter value rating to [4]

Rating filter works as following: There can only be single rating value from 1-5. If you want to select songs with rating 4 and above, you select 4 and 5 star rating in the filter dropdown.

Some filters are automatically created from song properties (artist, duration, date). This saves the step of creating filter manually and only requires song data to be added once.

Available settings for automatic filters:

Date filter belongs to automatic filters.

Date property for each song is set inside song properties:

"date":"9/17/2021",

Note: date needs to be in following format: m/d/y (9/17/2021)

Note about rangeBgColor and rangeFrColor. These colors are also used in waf.css file:

.waf-skin-light .waf-lyrics-popup-inner::-webkit-scrollbar-thumb {
    background: #9e9e9e; 
}
.waf-skin-light .waf-lyrics-popup-inner::-webkit-scrollbar-track {
    background: #eee; 
}
.waf-skin-dark .waf-lyrics-popup-inner::-webkit-scrollbar-thumb {
    background: #666; 
}
.waf-skin-dark .waf-lyrics-popup-inner::-webkit-scrollbar-track {
    background: #aaa; 
}

Those colors are slider line and thumb in filters:

Notes

1. Filters with no values in songs are hidden. For example, you have defined text filter:

Example (filter property):

filters:[
    {
        "id":"2",
        "title":"tag",
        "type":"text"
    } 
]

But if no songs "hooks" to this filter in song properties, then this filter will be hidden from the main menu when gallery displays in the web page. This is valid for all filters, for example, if no songs have date set, Date filter will not be shown.

Song can have tags generated from all text filters including artist filters.

Available settings:

You can also link these tags to specific url, example:

1. You have the following filter defined in settings (note filter link and linkTarget):

filters:[
    {
        "id":"2",
        "title":"Tag",
        "type":"text",
        "link":"https://www.your-domain.com/tag/",
        "linkTarget":"_blank"
    }
]

Song has these filters:

"mediaId":0,
"type":"audio",
"path":"media/audio/1/01.mp3",
"artist":"Tim McMorris",
"filter":[
	 {
	    "id":"2",
	    "value":["tension","vocal"]
	 }
 ]

This means song tags tension and vocal will have these links created:

Maybe you can use this on your website to set some permalinks.

Lyrics can be activated by pressing microphone icon when song is playing. This means lyrics is only available for active playing song.

Available settings for lyrics:

Url to lyrics file for each song is set inside song properties:

"lyrics":"LYRICS FILE URL",

Lyrics need to follow standard rules for formatting https://en.wikipedia.org/wiki/LRC_(file_format)

Example of lyrics file is located in plugin package.

Available settings for keyboard:

        keyboardControls: [
            {keycode:37, action: 'seekBackward'},
            {keycode:39, action: 'seekForward'},
            {keycode:32, action: 'togglePlayback'},
            {keycode:38, action: 'volumeUp'},
            {keycode:40, action: 'volumeDown'},
            {keycode:77, action: 'toggleMute'},
            {keycode:34, action: 'nextMedia'},
            {keycode:33, action: 'previousMedia'},
            {keycode:82, action: 'rewind'}
        ],
        

Any number of icons can be added to songs. Following example shows icons. One uses SVG for icon display, while other use Font Awesome 5 unicode.

Playlist icons for each song is set inside song properties:

"playlistIcons":[
  {"title": "Spotify", "url": "https://spotify.com", "target":"_blank", "icon": "<svg role='img' viewBox='0 0 496 512'><path d='M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z'></path></svg>", "rel": "nofollow"}, 
  {"title": "Youtube", "url": "https://youtube.com", "target":"_blank", "icon": "&#xf167", "rel": "nofollow"},
  {"title": "Apple Music", "url": "https://apple.com", "target":"_blank", "icon": "&#xf179", "rel": "nofollow"},
  {"title": "Soundcloud", "url": "https://soundcloud.com", "target":"_blank", "icon": "&#xf1be", "rel": "nofollow"}, 
  {"title": "Amazon", "url": "https://amazon.com", "target":"_blank", "icon": "&#xf270", "rel": "nofollow"}
],

Font Awesome unicode: https://fontawesome.com/v5/cheatsheet

&#xf167

If you use Font Awesome unicode make sure you include following link:

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

And the following CSS:

.waf-playlist-icon {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Regular', 'Font Awesome 5 Brands', 'Arial';
    font-size: 18px;
    font-weight: 900;
    margin: 0!important;
    border: 0!important;
    box-shadow: none!important;
    display: flex!important;
    justify-content: center!important;
    flex-direction: column!important;
    text-decoration: none!important;
}

Icons can also be full img tags (<img src="icon-url" alt=""/>), in which case you might need to add additional CSS.

Function call on icon click

If you want to call a function when some icon is clicked do the following.

Add icon, this will create an icon with chosen id attribute.

 {"title": "optional title", "icon": "&#xf270", "id": "unique-id-here"}

Note that url and target are optional attributes in custom playlist icons and dont need to be used. You can just use an icon to trigger javascript function.

Add javascript code to listen for icon click:

document.addEventListener('click', e => {
   if (e.target.closest('#unique-id-here')) {
        alert('function is called')

        //get song data
        var data = e.target.closest('.waf-music').media
        console.log(data)
   }
})

Icon color

If you want to change icon colors you can target them with following css:

.waf-playlist-icon{
    color:#aaaaaa;
}

Once you use filters or use song search field, you can generate link to the gallery containing all selected filters. To access this use the button Copy filters and you will get something like this, which you can then use to access selected filters.

?waf-instance=player1&waf-scroll-to-player=1&waf-filter-id-5=100,300&waf-filter-id-0=4,63.93&waf-filter-id-artist=Tim McMorris

Make sure you have instanceName set in settings for this to work.

Songs can be sorted in the gallery in the following ways:

You can also sort songs on player start automatically with the following setting:

Available settings:

popular_asc = Popular ascending 
popular_desc = Popular descending 
title_asc = Title ascending 
title_desc = Title descending 
artist_asc = Artist ascending 
artist_desc = Artist descending 
duration_asc = Duration ascending 
duration_desc = Duration descending 
date_asc = Date ascending 
date_desc = Date descending 

Note:

Sorting songs by Popular requires song to have statistics data c_play. This is set inside song properties:

Sorting by Date requires songs to have date set. This is set inside song properties:

User can save current playlist in the gallery by clicking Save playlist button:

Available settings:

Following event is dispatched when this button is clicked:

player.addEventListener('playlistSave', function(data){

    //called when save playlist has been instantiated, returns (instance, instanceName)

})

Then you can get visible songs by using and for example, get their mediaId's:

var arr = []

player.querySelectorAll('.waf-music-shown').forEach(function(el){
	arr.push(el.getAttribute('data-media-id'));
})

Learn more about callbacks

Activate social sharing in the gallery with the following settings:

Available settings:

To have access to Google analytics and get Google analytics tracking ID, follow these instructions: https://support.google.com/analytics/answer/1008080

Available settings:

Following events will be displayed inside your Google Analytics panel / Realtime / Events section:

Song played 
Song paused
Song ended
Song downloaded

Note: statistics is used for WordPress version of the plugin. But you can still display statistics icons in this plugin as supply these values (plays, downloads) yourself.

Available settings:

Statistics data for each song is set inside song properties:

"c_download":13,
"c_play":6,

You can also use following events which are dispatched from the player when song is played or downloaded and update statistic.

player.addEventListener('downloadCount', function(data){

    //called when download has been instantiated, returns (instance, instanceName, media)

})
player.addEventListener('playCount', function(data){

    //called on song is played, returns (instance, instanceName, media)

})

To update data which shows how many times song is player or downloaded in the player, use the following:

var media_id = data.media.mediaId//retrieved from event above

player.querySelector('.waf-music[data-media-id="media_id"]).querySelector('.waf-play-count span').textContent = new value;

This of course requires song to have UNIQUE mediId property which is set inside song properties

Sticky player can be shown on page bottom when song is playing.

Activate sticky player with the following settings. If you have multiple galleries in the same page, these settings with only take effect once, meaning sticky player will be initated when the first gallery is created in the page.

Available settings:

To use multiple players in the same page do the following:

1. create settings for each player (note different instanceName):

var settings = {
    instanceName:"player1",
    playerSkin: "light",//light, dark
    trackLayout: 'list',//grid, list
    .... (other settings)
}

var settings2 = {
    instanceName:"player2",
    playerSkin: "light",//light, dark
    trackLayout: 'list',//grid, list
    ....
}

2. Add HTML for each player in BODY (note different id attribute):

<div id="waf-player" class="waf"></div>

<div id="waf-player2" class="waf"></div>

2. Initiatialize each player:

fetch('data/1.txt')
.then(response => response.text())
.then(content => {
    var d =  JSON.parse(content);
    settings.media = d
    player = new waf(document.getElementById("waf-player"), settings);
}); 


fetch('data/1.txt')
.then(response => response.text())
.then(content => {
    var d =  JSON.parse(content);
    settings.media = d
    player = new waf(document.getElementById("waf-player2"), settings);
}); 

Icons in player are SVG and can be changed in settings. You can use images if you supply whole img tag. Using images may require additional CSS. Make sure you use valid HTML so it doesnt break the player!

lyricsIcon: '<svg role="img" viewBox="0 0 352 512"><path d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"></path></svg>',

downloadIcon: '<svg role="img" 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>',

linkIcon: '<svg role="img" 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>',
					
shareIcon: '<svg role="img" viewBox="0 0 448 512"><path d="M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z"></path></svg>',

statPlayIcon: '<svg role="img" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path>',				
					
statdownloadIcon: '<svg role="img" viewBox="0 0 512 512"><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z"></path></svg>',			
					
closeIcon: '<svg aria-hidden="true" role="img" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>',	

tumblrIcon: '<svg role="img" viewBox="0 0 320 512"><path d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>',

twitterIcon: '<svg role="img" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>',	
				
facebookIcon: '<svg role="img" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>',

whatsappIcon: '<svg role="img" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>',

linkedinIcon: '<svg role="img" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg>',

redditIcon: '<svg role="img" viewBox="0 0 512 512"><path d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"></path></svg>',

pinterestIcon: '<svg role="img" viewBox="0 0 496 512"><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"></path></svg>',

playIcon: '<svg role="img" 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>',

pauseIcon: '<svg role="img" 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>',

prevIcon: '<svg role="img" viewBox="0 0 448 512"><path d="M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z"></path></svg>',

nextIcon: '<svg role="img" viewBox="0 0 448 512"><path d="M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z"></path></svg>', 

volumeUpIcon: '<svg role="img" viewBox="0 0 576 512"><path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"></path></svg>',

volumeDownIcon: '<svg role="img" viewBox="0 0 384 512"><path d="M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"></path></svg>',

volumeOffIcon: '<svg role="img" viewBox="0 0 640 512"><path d="M633.82 458.1l-69-53.33C592.42 360.8 608 309.68 608 256c0-95.33-47.73-183.58-127.65-236.03-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 42.78-11.96 83.59-33.22 119.06l-38.12-29.46C503.49 318.68 512 288.06 512 256c0-63.09-32.06-122.09-85.77-156.16-11.19-7.09-26.03-3.8-33.12 7.41-7.09 11.2-3.78 26.03 7.41 33.13C440.27 165.59 464 209.44 464 256c0 21.21-5.03 41.57-14.2 59.88l-39.56-30.58c3.38-9.35 5.76-19.07 5.76-29.3 0-31.88-17.53-61.33-45.77-76.88-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61 11.76 6.46 19.12 18.18 20.4 31.06L288 190.82V88.02c0-21.46-25.96-31.98-40.97-16.97l-49.71 49.7L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.36 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.41-6.97 4.16-17.02-2.82-22.45zM32 184v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V352.6L43.76 163.84C36.86 168.05 32 175.32 32 184z"></path></svg>', 

searchIcon: '<svg aria-hidden="true" role="img" viewBox="0 0 512 512"><path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>',

removeFilterIcon: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" ><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>',

closeIcon: '<svg aria-hidden="true" role="img" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>',	

simpleLayoutIcon: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>',

expandedLayoutIcon: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M16 128h416c8.84 0 16-7.16 16-16V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v32c0 8.84 7.16 16 16 16zm480 96H80c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zm-64 160H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg>',

lyricsToggleIcon: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="waf-lyrics-popup-icon"><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>',	

fixedPlayerToggleIcon: '<svg role="img" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>',

scrollTopIcon: '<svg aria-hidden="true" role="img" viewBox="0 0 448 512"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path></svg>',

savePlaylistIcon: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"></path></svg>',

plusIcon: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg>',
					
minusIcon: '<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h352c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg>',

filtersIcon: '<svg viewBox="0 0 512 512"><path d="M0 416C0 398.3 14.33 384 32 384H86.66C99 355.7 127.2 336 160 336C192.8 336 220.1 355.7 233.3 384H480C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H233.3C220.1 476.3 192.8 496 160 496C127.2 496 99 476.3 86.66 448H32C14.33 448 0 433.7 0 416V416zM192 416C192 398.3 177.7 384 160 384C142.3 384 128 398.3 128 416C128 433.7 142.3 448 160 448C177.7 448 192 433.7 192 416zM352 176C384.8 176 412.1 195.7 425.3 224H480C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H425.3C412.1 316.3 384.8 336 352 336C319.2 336 291 316.3 278.7 288H32C14.33 288 0 273.7 0 256C0 238.3 14.33 224 32 224H278.7C291 195.7 319.2 176 352 176zM384 256C384 238.3 369.7 224 352 224C334.3 224 320 238.3 320 256C320 273.7 334.3 288 352 288C369.7 288 384 273.7 384 256zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H265.3C252.1 156.3 224.8 176 192 176C159.2 176 131 156.3 118.7 128H32C14.33 128 0 113.7 0 96C0 78.33 14.33 64 32 64H118.7C131 35.75 159.2 16 192 16C224.8 16 252.1 35.75 265.3 64H480zM160 96C160 113.7 174.3 128 192 128C209.7 128 224 113.7 224 96C224 78.33 209.7 64 192 64C174.3 64 160 78.33 160 96z"/></svg>',

copyIcon: '<svg viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>',

Following callbacks are supported:

    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('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('filterClear', function(e, data){

        //called when all filters have been removed, returns (instance, instanceName)

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

	    //called when save playlist has been instantiated, returns (instance, instanceName)

	})

    

Song statistics callbacks:

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

	    //called when download has been instantiated, returns (instance, instanceName, media)

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

	    //called on song is played, returns (instance, instanceName, media)

	})
    

How to use returned parameters:

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

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

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

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

});
    

What is player?

player is a variable defined at global level so you can use it later with API after you instantiate the player:

var player
document.addEventListener("DOMContentLoaded", function(event) {

	var settings = {
		...
	}
	player = new waf(document.getElementById("waf-player"), settings);

}

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.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.seekTo(0); //seek (0)
player.seekTo(15); //seek (15)

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


/* load playlist on demand */
--------------------------

player.destroyMedia(); //Destroy current playing song

player.clearPlaylist();//destroy current playlist (remove all songs)

player.loadPlaylist(type, url);//load new playlist
type = playlist_id (load WordPress playlist id, used for WordPress version), json (load new json file, used for javascript plugin version)
url = playlist id, json url



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

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

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

player.getMediaPlaying();//get media playing


player.closeLyrics();//close lyrics

player.toggleFixedPlayer();// open / close fixed player

    

What is player?

player is a variable defined at global level so you can use it later with API after you instantiate the player:

var player
document.addEventListener("DOMContentLoaded", function(event) {

	var settings = {
		...
	}
	player = new waf(document.getElementById("waf-player"), settings);

}

Autoplay

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

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.