How to customize the info bar and the playlist rows

Infobar and Playlist templates

WavePlayer allows you to personalize the information displayed in the info bar and each playlist row. If you want to customize the Infobar and the Playlist templates, you can go to the Settings —> WavePlayer page on the Dashboard of your WordPress installation. It the HTML & CSS tab, you will find two text areas that you can customize using plain text or HTML syntax, together with audio tags and special placeholders, as explained below.

Each audio tag or placeholder you want to display in the Infobar or the Playlist must be listed in the respective text area, surrounded by the ‘%’ character.

For example, if you want to show the title of a track, you can use the %title% audio tag.

Please refer to the following lists of audio tags and special placeholders to learn what you can show in the Infobar and the Playlist of your players.


Audio Tags

Depending on the format of the audio tracks you upload on your website, the file may include one or more tags containing the audio track’s information. For an MP3 file, those tags are called ID3 tags and you can edit them with several different media players (such as iTunes, Windows Media Players) or other specialized applications. If you edit a file’s tags prior to its upload, WordPress can grab all of them and save the information in the database for future reference.

This is a list of the most common audio tags you can usually find in an MP3 audio file:

%album%, %artist%, %bitrate%, %bitrate_mode%, %channelmode%, %channels%%compression_ratio%, %dataformat%, %encoder_options%, %file%, %fileformat%%filesize%, %genre%, %length%, %length_formatted%, %lossless%%mime_type%, %sample_rate%, %title%, %year%.



Special placeholders

In addition to the previous audio tags, WavePlayer allows you to customize the Infobar and each playlist row using the following placeholders. When rendering a player instance, WavePlayer will replace each placeholder with the respective piece of information, icon or buttons, depending on the placeholder you use.

This is a list of the placeholders you can use:

%likes%: a like button and a counter of the total likes for a given track,
%downloads%: a download button and a counter of the total downloads for a given track,
%cart%: a cart button (an active WooCommerce installation is required),
%play_count%: a counter of the total playbacks for a given track,
%runtime%: a counter of the total time a given track has been listened to,
%share_fb%, %share_gp%, %share_tw% or %share_ln%: a share button , , or to share a track on Facebook, Google+, Twitter or LinkedIn, respectively.

NOTE: a like button can only be used by your logged in users and registers their likes on your website independently from any other social network.


Custom metadata and placeholder attributes

In addition to the default metadata WordPress automatically extracts from the audio files and store in the attachment metadata structure of each audio attachment, you can create any other custom metadata to use with your placeholders. For example, if you add a metadata called external_url, you can add it to the infobar or the playlist row simply using the %external_url% placeholder.

The placeholder functionality comes with a list of attributes that help you get the best result for your design. This is a comprehensive list of attributes currently available in WavePlayer.

 

urlWhen you specify a “url” key in the attributes of the placeholder, WavePlayer is going to build a link pointing to the URL you provide there. You can also use a metadata placeholder as the url value.

Example with a static URL:
%artist{"url":"https://www.example.com/artist_url"}%

Example with a metadata placeholder for the URL:
%artist{"url":"%_artist_url_metadata%"}%

In this second example, each track must contain a meta value for the “_artist_url_metadata” meta key in the postmeta table.

classAdd a class attribute to a <span></span> enclosing the placeholder

Example: %placeholder{"class":"my-placeholder-class"}%

rawNormally, WavePlayer encloses the placeholder in a <span></span> tag. When the raw attribute is set to 1, WavePlayer returns the raw data corresponding to the placeholder.

Example: <a href='%external_url{"raw":1}%'>BUY</a>

Mind the difference between the single quote enclosing the href attribute and the double quote enclosing the name (and values, in case of strings) of the placeholder attribute. The opposite way does not work, as the list of placeholder attributes must be formatted according to the JSON specifications.