When using WavePlayer for your podcasts, it can be useful to reference a specific part of the audio track in the text, allowing your visitors to jump directly to that part. This can be easily achieved by adding simple anchors to any part of your page. The structure of the anchor can be as follows:

<a href="#" data-marker="2:00">your anchor text goes here</a>

where the value of the data-marker attribute is the time you want to jump to when clicking on the link. Please note that the href attribute of the anchor can be disregarded or even omitted since WavePlayer will prevent any anchor with the data-marker attribute from behaving as regular links.

If you want to add time markers to your page, you are not forced to use anchor elements <a>. Any element can act as a time marker so long as you add the data-marker attribute with a well-formatted time to it. For example, WavePlayer will use any of the following elements as time markers:

Anchor elements <a>

<a href="#" data-marker="1:12">1:12</a>

1:12: by clicking on this link the player will jump to 1:12

Span elements <span> and Paragraph elements <p>

<span class="my-span-class another-span-class" data-marker="4:38">a few words</span>
<!-- PARAGRAPHS -->
<p class="my-paragraph-class" data-marker="1:03:13">A full paragraph</p>

A few words can become a time marker by adding the data-marker attribute.

Similarly, a whole paragraph can become a time marker. If you style the hovering over a paragraph that has the data-marker attribute (for example, by using a p[data-marker] CSS selector), you can make this behavior even more clear to your visitors. If you hover over this paragraph, you can see how the effect looks like.

Image elements <image>

<!-- IMAGES -->
<img src="path/to/my/image.jpg" data-marker="1:48:56" />

If you click on the image above, the player will jump to (or start playing from) 2:54. This is just because a data-marker="2:54" was added to the <img> tag definition.

Idiomatic elements <i>

<!-- IDIOMATIC -->
<i class="fas fa-play" data-marker="2:12:43"></i>

If you are using an icon library, such as Font Awesome, adding an icon to your page can be as easy as inserting an idiomatic element <i> with the appropriate classes. If you also add to it the data-marker attribute, you can use icons as time markers. For example, your page could contain several of these headphones icons , each one linking to a different time of your audio track

The scrollIntoView magic

WavePlayer can detect all the elements with a data-marker attribute and automatically scroll the page to each of them when the playback reaches the corresponding time. This is particularly useful when you have a full transcript of your podcast episode and you would like the page to follow the playback of the current track. If you want to activate this feature, please go to the Advanced section of the WavePlayer settings and paste the following line in the Custom JS text area:

WavePlayer.setOption( 'scroll_to_marker', true );

The current-time-marker class

When the current time reaches the value of a time marker, WavePlayer assigns the class current-time-marker to the corresponding element on the page. Thanks to this, you can easily style the current time marker relative to all the others on the page. For example, if you are using paragraph elements as your time markers, the current-time-marker paragraph could have a different background.

WavePlayer 3 gives you the ability to read your favorite tracks or playlists directly from Soundcloud, incorporating them into your website without worrying about the visual aspect of the player not fully matching the style of your page. With WavePlayer you are always in full control.

Adding tracks or playlists from Soundcloud

Adding a single track or a full playlist is as easy as copying the URL of the track or playlist from Soundcloud…

…and paste it in the URL field of the WavePlayer instance you are creating (in the following picture you can see a Gutenberg Block but this method is valid for an Elementor widget, as well as the Classic Editor and the regular WavePlayer shortcode).

What WavePlayer does is reading the track information directly from Soundcloud, including the URL of the audio files, the titles, the artists, even the thumbnails. It then generates a single-track instance or a playlist based on the data retrieved from Soundcloud.

With this method, you don’t have to worry about updating your posts or pages of your website every time a playlist changes. WavePlayer automatically updates the playlist on your page every time a visitor loads it. The following player shows the content of this playlist from Soundcloud.

How waveform are generated

When you load a track from Soundcloud that was never played back before, WavePlayer analyzes the audio file and generates a peak file, storing it in the /wp-content/uploads/peaks/soundcloud folder. Since Soundcloud uniquely identifies each track with an ID, WavePlayer uses that to name the peak file so that, every subsequent time the same track is loaded in the player, the rendering of the waveform can be nearly instantaneous.

It is worth noting that, unlike the waveform on Soundcloud that are stored as PNG image files, WavePlayer stores the waveform information as an array of sample values. The number of samples is large enough to guarantee a high-resolution rendering even on the largest screen and when the player occupies the full width of the browser. The use of peak files makes it also possible to render the same waveform with different visual configurations without any need to regenerate the peak file. For example, the following players show the waveform of the same audio track with different visual configurations. All players use the same peak file.

This answer in the FAQ offers more details about the peak files.

Limitations

Soundcloud closed the registration of new apps, which used to be the process through which you could request your own API Client ID and Client Secret. The API Client ID and Client Secret are necessary to access the tracks information on the Soundcloud server. Until very recently, we were pleased to share with all our customers our own Soundcloud App credentials. Unfortunately, due to our increasing customer base and also because of a recent change in the Soundcloud API, the limitation to the number of requests became a target that our customers end up hitting several times a day, something that makes the service unusable.

If you have already registered your app and received your own API Client ID and Client Secret, we strongly recommend using your own credentials. This way, the 15,000 calls a day will be reserved for your visitors only. If you don’t have any registered app with your Soundcloud account, you cannot register a new one now because Soundcloud closed the registration of new apps and has no plan in reopening the registration soon, as it is possible to read in the registration form.

Due to the high amount of requests recently received, we will no longer be processing API application requests at this time. We are working to re-evaluate our process to make it more efficient.

SoundCloud Application Registration

Please be aware that, in case you don’t have your own SoundCloud API Client ID and Client Secret, the limit of 15,000 calls a day for the Client ID distributed with WavePlayer will be covering the whole WavePlayer customer base. With the growing number of customers, this fact could lead to reaching the API calls limit pretty fast and cause interruptions of service.

We wish SoundCloud allows the registration of new apps soon. We wish we could continue sharing our own credentials with all our customers. Sadly, this is not possible anymore.

How to use your own API Client ID and Client Secret

The new version 3.1.7 resolved an issue with the old Soundcloud API being abruptly discontinued in July 2021. With the new API, you must now use your own API Client ID and Client Secret by simply adding the following filter callback to the functions.php file of your child theme or to any Code Snippet.

add_filter( 'waveplayer_soundcloud_client_id_secret', 'my_soundcloud_client_id_secret' );
if ( ! function_exists( 'my_soundcloud_client_id_secret' ) ) {
    function my_soundcloud_client_id_secret() {
        return array(
            'client_id'     => 'aaabbbcccdddeeefffggghhhiiijjjkkk',
            'client_secret' => '111222333444555666777888999000',
        );
   }
}

where you can replace client_id and client_secret with the corresponding values of your own app.

Adding custom fields

WavePlayer 3 includes a new feature that allows you to easily expand the factory placeholders with your own custom ones. If you go to the Placeholders page of the WavePlayer settings, you can find the “Audio Attachment Custom Fields” section. To add a new custom field, simply click on the Add Custom Field button and configure the options of the field you want to add:

• the label describing the field in the Attachment Details modal dialog
• the name used for both the meta_key in the database and the placeholder in the templates
• the type of the field, chosen among text, textarea, checkbox, radio, select, time, date, number
• the default value that will be used by default for the custom field
• a comma-separated list of options to pick from, in case the type is either radio or select

In the screenshot above, we added a lyrics_url custom field. That would give us the possibility to use a %lyrics_url% placeholder anywhere in the info templates. The value held by the custom field can be saved in the Attachment Details modal dialog that opens up when clicking on any audio attachment in the Media Library. In the following screenshot, you can see how three different custom fields – AJ Author URL, AJ Track URL and Lyrics URL – can be defined for each audio attachment so that they are replaced to the appropriate placeholder in the player.

Using custom fields

Once the custom fields are added, they can be used in the info templates to expose that information in the player. For example, the following code would add a text LYRICS linking to the URL found in the lyrics_url meta_key of each audio attachment:

<a href="%lyrics_url%">LYRICS</a>

while the following code would add the feather icon from the Font Awesome icon set as with a link pointing to the URL stored in the lyrics_url meta_key of the audio attachment.

%lyrics_icon{"url":"%lyrics_url%","icon":"fas fa-feather"}%

In regards to the last code example, please note that the lyrics_icon placeholder is merely a container that allows us to define the attributes of the button but it is not necessarily connected to any piece of metadata. What’s important, in this case, is that the url attribute of the icon is defined as the lyrics_url metadata we defined earlier.

For more information about how to use the placeholders, you can read this article.

Unlike other audio players, such as the default WordPress audio player, WavePlayer has special features (i.e. the waveform animations) that require to access the audio file through javascript. If the audio file is stored under the same domain name of your website, the browser always grants access from a script. By contrast, if the audio file being played back is stored on a remote server, before granting access from the script, the browser checks if the remote server allows the resource to be shared with a different origin. That mechanism is called CORS, Cross-Origin Resource Sharing.

Configuring the CORS on Amazon S3

Configuring the CORS policy of your Amazon S3 bucket is very easy and can be completed as follows:

1. Login to your AWS Management Console
2. In the Services menu, locate the S3 service, under the Storage category. You can also type S3 in the Search Bar

3. You will be presented with a list of your current Buckets. Click on the bucket you want to edit.

4. Click on the Behaviors tab

5. Scroll down to the bottom of the page, where you are going to find the CORS editor. Click on the Edit button to start editing the CORS policy of your bucket.
6. In the latest version of the AWS Management Console, the CORS policy is written as a JSON array of CORS policy objects. If you want WavePlayer to have access to the audio files stored in your S3 bucket, you must list HEAD and GET as the AllowedMethods and your domain name as the AllowedOrigin. The following CORS policy should work: make sure to replace https://www.example.com with the actual URL of your website.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "https://www.example.com"
        ],
        "ExposeHeaders": []
    }
]

7. When you are done editing the CORS policy, click the Save Changes button

The change should be effective immediately. So, you can go back to your website and verify that WavePlayer can now playback all your files from S3 and render the waveform animation the same way it does for all your local files.

In addition to displaying that data by using the appropriate placeholders in the info templates, you can create your custom code to retrieve and display that info wherever you like in your page templates.

The shortcode definition

The following code snippet shows an example of a custom shortcode that, after retrieving the wvpl_stats metadata of a given track, prints the info on the page.

add_shortcode( 'waveplayer_stats', 'waveplayer_stats_custom_shortcode' );
function waveplayer_stats_custom_shortcode( $atts ) {
	$html  = '';
	$pairs = array(
		'track_id' => '',
		'name'     => 'play_count',
	);
	$atts  = shortcode_atts( $pairs, $atts, 'waveplayer_stats' );
	if ( ! $atts['track_id'] ) {
		return $html;
	}
	
	$value = get_post_meta( $atts['track_id'], "wvpl_{$atts['name']}", true );
	if ( $value ) {
		$html = "$value";
	}
	
	return $html;
}

As an example, the previous shortcode can be used as follows:

[‎waveplayer_stats track_id="7956" name="downloads"]

where 7956 is the post ID of the audio attachment you want to get the statistics for.

You can easily customize line 17 to your preference, such as adding an icon or any additional CSS classes. For example, if you replace line 17 with the following code:

$html = "<span class=\"download-label fas fa-3x fa-download\">
	<span>$value</span>
</span>";

the shortcode will output something like this (assuming FontAwesome is active in your website):

The number of downloads shown above corresponds to the following track. You can easily confirm that by simply start downloading the following track and reloading this page in order to see that the number of downloads was incremented by at least one (other concurrent downloads may have occurred while you were visiting this page).

Once the [‎waveplayer_stats] shortcode is defined, you can use it also to get play_count, likes and runtime.

3.8.0

NEW

Added option to determine whether the instance data is preloaded on the page or not

FIX

Renderer class triggering PHP warnings under certain circumstances

DEV

Added new Data class

DEV

Implemented class autoload configuration

DEV

Refactored most of the class organization

3.7.1

FIX

Scripts and styles not being added in embed template

FIX

Caching transients not being loaded correctly

DEV

Tested up to WordPress 6.4.2 and WooCommerce 8.4.0

3.7.0

NEW

New class to handle instance data caching

NEW

Added dynamic tags to playlist internal and external files of the Elementor widget

FIX

Batch process to regenerate peak files hanging when files are missing

FIX

Sample instances on administrative area not being displayed correctly

FIX

Instances are not loaded if initially hidden

TWEAK

Improved selection of multiple preview files

TWEAK

Improved srcset attribute, particularly for non-square images

TWEAK

Improved caching of global settings

DEV

Added `queue:processed` event

DEV

Tested up to WordPress 6.4.1 and WooCommerce 8.3.1

3.6.4

FIX

Peak getter function doesn't work properly under certain circumstances

3.6.3

FIX

$wp_filesystem not being defined under certain circumstances

FIX

Unnecessary source maps being loaded and triggering 404 errors

FIX

Icon fonts being preloaded but not used immediately

TWEAK

Reduced size of waveform peak data

TWEAK

Reduced size of cached instances

DEV

Declared compatibility with WooCommerce HPOS and Cart&Checkout Blocks

3.6.2

FIX

Margins use the wrong CSS syntax

FIX

PHP warnings being output to the error log when users are not logged in

FIX

Removed extra quote after default placeholder classname

TWEAK

Improved product thumbnail handling for remotely hosted tracks

TWEAK

Improved placeholders with icons and links

DEV

Added cache clearing upon update

DEV

Tested up to WordPress 6.3.2 and WooCommerce 8.2.0

3.6.1

TWEAK

Improved stylesheets of most skins

TWEAK

Improved the alignment of placeholders in playlists

FIX

MediaSession doesn't show the correct track metadata on first play

3.6.0

NEW

Responsive image to player thumbnails

NEW

Support to Bundle Products

NEW

Integration with BEAR WooCommerce Bulk Editor

NEW

Added "Table Row" skin

FIX

WavePlayer doesn't display in Classic Editor when overriding audio and playlist shortcodes

FIX

Title attribute is not output correctly in the default placeholder definition

FIX

W3 Exhibition not displaying correctly

TWEAK

Added more configuration parameters to fall back to the Media Element in Safari and iOS

TWEAK

Improved playback continuity on iOS devices when the web page loses focus

TWEAK

Improved block styling in the block editor

TWEAK

Improved handling of product preview files metadata

TWEAK

Improved loading of instances through AJAX calls

TWEAK

Improved use of ABSPATH definition

TWEAK

Improved W3 skins styling

TWEAK

Other minor styling improvements

DEV

Adjusted code to new WordPress Coding Standards

DEV

Tested up to WordPress 6.3.1 and WooCommerce 8.1.1

3.5.4

FIX

Added the missing scripts on the back end preventing the Settings page from working as expected

FIX

Fixed the thumbnail placement of both W3 skins on small-screen devices

FIX

Error being triggered when track has no peak file generated

3.5.3

FIX

Fixed support of infobar in the main script

FIX

Fixed output of likes placeholder

FIX

Fixed product-related placeholders

TWEAK

Updated translation template

TWEAK

Improved styling of the sticky player

TWEAK

Improved method updating track statistics

DEV

Improved debug class and integration with Query Monitor

3.5.2

FIX

Typo in main stylesheet preventing the play button from changing state

FIX

Volume slider of the sticky player not hiding on mobile devices

FIX

Duplicated instances not loading due to caching mechanism

TWEAK

Improved detection of the default player settings on the WooCommerce pages

DEV

Changed event to update track stats when page unloads

3.5.1

FIX

Missing block registration

FIX

Wrong container CSS property

DEV

Added new event to the script

3.5.0

NEW

Refactored WavePlayer block for the Gutenberg Block Editor

NEW

Added a new Info'n'Wave skin based on Play'n'Wave with support for the info template

NEW

Added a new Mini Thumb skin, based on Thumb'n'Wave but with no waveform

NEW

Added support for thumbnail player in cart and mini cart with the new Mini Thumb skin

ENH

Improved caching of instance data

ENH

Reduced script execution time at page load and players initialization

ENH

Optimized script to remove any impact on performance and Core Web Vitals

ENH

All skins were refactored to take advantage of the new CSS Container Queries

ENH

Added more options for the placement on the WooCommerce shop/archive pages

ENH

Improved integration with single product pages

ENH

Improved integration with Storefront

ENH

Improved styling of product variation popup

FIX

Remotely hosted preview files being mishandled

FIX

Playlist failed to scroll to current track automatically

FIX

Integration with Barn2 WooCommerce Product Table

FIX

Files cannot be located on same server outside of Media library

DEV

Added several filters to further improve the customization

3.2.1

FIX

Preview files not loading properly for older configurations

FIX

Transients being deactivated for preview files

3.2.0

NEW

Added support for product import/export

NEW

Added Play,Wave'n'List skin, that adds a visible playlist to the Play'n'Wave skin

ENH

Improved track-related product query when ElasticPress is in use

ENH

Used transient to speed up the product preview files loading time

FIX

Problem with tracks being skipped on track end

FIX

Problem with skip buttons triggering the current instance instead of the ones they belong to

FIX

Autoplay being forced to true under certain conditions

3.1.8

ENH

Access to the Soundcloud API now requires personal Client ID and Client Secret credentials

ENH

Added filter to prevent FontAwesome fonts from being loaded

FIX

Retrieving tracks from Soundcloud causes HTTP errors

FIX

Regenerating peak files is stuck when downloadable files are included in the Media library

3.1.7

FIX

Added id to icon font style inline element

FIX

Custom fields defined in the Placeholder admin panel are not correctly added as placeholders

FIX

Updated support to latest Soundcloud API

3.1.6

FIX

Solved an issue with `attachment_url_to_postid()`

FIX

Product info not being added to the track properties

3.1.5

FIX

Updated support for Elementor 3.5

ENH

Improved the design of the Thumb'n'Wave skin

ENH

Removed the now deprecated ScriptProcessorNode

ENH

Replaced ScriptProcessorNode with a true requestAnimationFrame implementation for optimize refresh rates

3.1.4

FIX

Javascript error when clicking on pages without any player

FIX

Settings page malfunctioning on WordPress versions older than 5.3.0

FIX

Additional CSS classes not being added to the Gutenberg block

FIX

Player not rendering in the Classic Editor

FIX

Player not being rendered for cross-sells product on cart page

FIX

Registration not working in multisite environments

FIX

The detection of WooCommerce pages and sections was improved

3.1.3

FIX

Peak files not being generated when Content-Length header is not received (usually when mod_deflate is active)

FIX

Players that are hidden in the DOM are invoked by the sticky player

FIX

Product players only being rendered in shop and single product pages but not in other archive-like pages (featured, related, etc.)

3.1.2

NEW

AudioType can be manually redefined using the Custom JS option for compatibility purposes

FIX

Peak files for newly uploaded files not being generated

FIX

Uncaught Promise error in the console when clicking on the playlist

3.1.1

NEW

Scrolling to a marker on the page is now optional

FIX

WavePlayer not rendered for REST requests

FIX

Lazy-loading interrupts the playback

FIX

Smoother transition between tracks

3.1.0

NEW

Faster loading of tracks and instances

NEW

Time markers can be added to the page by specifying the data-marker attribute of any type of element

NEW

Native support for Google Tag Manager

NEW

Custom CSS and JS editors are now using CodeMirror

NEW

All the XMLHttpRequest calls have been replaced with the Fetch API

FIX

Graphic rendering was improved for both static and animated waveforms

FIX

Frequency animation is now logarithmic instead of linear

FIX

The non-minified script gets enqueued even when SCRIPT_DEBUG is false

FIX

Waveform settings not applying in realtime in the Waveform option page

FIX

Tumb'n'Wave skin not appearing in WC Product Table Pro

FIX

Player icons font missing in the backend

FIX

Taxonomy terms assignment not working properly in the modal dialog

FIX

Peak regeneration always regenerating peaks regardless of the overwrite option

3.0.9

FIX

Safari not being able to reconnect the ScriptProcessorNode (audio muted after first playback)

FIX

Wrong version being printed in the setting page title

3.0.8

NEW

Complete restyling of the option page in the backend

FIX

WavePlayer block not available when Gutenberg 8.4.0 or later is installed

FIX

Title in the popup variation form being duplicated

FIX

Cart button not visible for remotely hosted preview files

FIX

Likes increasing when user unlikes a track

FIX

Autoplay option preventing the player from loading as expected

3.0.7

NEW

The default skin for the player in the Barn2 Product Table is now selectable in the Product Table settings

NEW

The FontAwesome resources are not loaded below the fold and optimized for better PageSpeed performance metrics

FIX

Waveform not being rendered in the sticky player

FIX

OceanWP images for non-audio product disappearing

FIX

Reading local files that are not uploaded to the Media library returns an error

FIX

Cache returning empty track list when using external files

FIX

Variation form popup not showing a close button

FIX

Multitrack instances fail to jump to the next instance when repeat is set to false

3.0.6

NEW

Dynamic CSS moved below the fold and aggregated/minified for better page speed performance

NEW

Lazy-loading of the instances that are not in the viewport

NEW

Instance caching to improve the server response time

FIX

Share buttons not working as expected

FIX

The url attribute not transforming custom placeholders into links

FIX

SVG icon definitions create an empty space at the bottom of the page

3.0.5

FIX

Frontend breaking on websites without WooCommerce installed

3.0.4

NEW

Completely refactored code in compliance with the WPCS (WordPress Coding Standards)

NEW

Audio player fallback to mitigate the bug currently affecting iOS 13

NEW

A more detailed positioning of the player in the single product page

NEW

When playing remote audio files for the first time, the local copy is created via AJAX

FIX

Barn2 WooCommerce Product Table support malfunctioning

FIX

Improved out-of-the-box compatibility with WooCommerce Themes

3.0.3

NEW

Added support to the most popular Premium and Free Themes

NEW

It is now possible to select the default thumbnail size

FIX

Peak files for external URLs not being stored correctly

FIX

ID of parameter-less waveplayer shortcode (WC loop) being calculated incorrectly

FIX

Long titles in the sticky player shrinking the waveform

FIX

Typing a color code in the palette editor not working

FIX

Empty thumbnail in sticky player for external files

3.0.2

NEW

In the Gutenberg editor, it is now possible to transform an audio block into a WavePlayer block

ENH

The transformations of previous shortcodes into Gutenberg blocks has been enhanced

FIX

Automatic updates not working under certain installations

FIX

Purchase code disappearing when saving the settings

FIX

Peak files for external URLs not being stored correctly

FIX

Duplicated featured image in the shop products

FIX

Color picker malfunctioning in the Palettes tab

FIX

Changes to the palette not being stored upon saving

FIX

Cart icon not being updated in the sticky player when moving from track to track

3.0.1

FIX

The 'cart' placeholder is not correct in the sticky player template

FIX

The plugin crashes websites with Elementor

FIX

Other minor or cosmetic bugs

3.0.0

NEW

A completely re-designed code, for both server and client sides

NEW

Native support for audio analysis, peak saving and waveform rendering without WaveSurfer.js

NEW

WavePlayer Block for the new Gutenberg editor

NEW

WavePlayer Widget for Elementor

NEW

Custom column for Barn2 WooCommerce Product Table

NEW

SoundCloud support for both tracks and playlists

NEW

Waveform fully customizable animation

NEW

Color schemes and 1-click color scheme generator

NEW

Dark mode: light and dark color schemes automatically reacts to the visitor device setting

NEW

Optimized AJAX endpoint for faster track data loading

NEW

Fully customizable sticky player for the footer or header

NEW

Interface templates, with unlimited possibilities of custom design

NEW

possibility to use different interfaces for different sections of your website

NEW

Possibility to choose a specific interface on a single instance

NEW

Expansion interface packs, that you can purchase separately

NEW

Customizable templates to create your own placeholders

NEW

New updater class independent from external libraries

NEW

Customizable font using Google fonts

NEW

Cart buttons now allow to add both simple and variable products, with the possibility to select the product variation

2.4.2

FIX

Minor script improvements

2.4.1

CHANGE

The events triggered when interacting with the player have now been improved

2.4.0

NEW

WavePlayer now accepts playlists of external files

FIX

Minor optimizations to the main script

2.3.6

BUGFIX

A bug in the main script preventing the player from loading in some configurations

2.3.5

BUGFIX

The default placeholder gets the wrong class

2.3.4

NEW

Improvements in the placeholder management

2.3.3

NEW

It is now possible to manipulate the track array using the waveplayer_tracks_playlist filter

2.3.2

BUGFIX

The CSS stylesheet contained an error causing the disappearance of the thumbnail of the tracks in WooCommerce

2.3.1

BUGFIX

The download button increments the counter on click without downloading any file

NEW

It is now possible to use WavePlayer in external sites using an embed HTML element (requires an embed-attachment.php template added to your Theme)

2.3.0

NEW

The icons are now using Font Awesome 5.0

NEW

A more streamlined HTML markup that makes it easier to customize the player using your favorite style

NEW

How all the instances on a page load is now selectable in the Player Options settings

NEW

In the Maintenance page of the Settings, you can now generate the peak files for all the audio attachments in the Media library.

NEW

If WooCommerce is active and a track is associated with a product, two new placeholders are available in the Infobar and Playlist row templates: product_id and product_url

NEW

The info available for each track can now be filtered to make any custom information available in the frontend.

NEW

The thumbnail images use img elements with srcset and sizes attributes, allowing the browser to always select the best image resolution

NEW

When using the "Add to cart" button, the icon now changes to a spinnner until the completion of the operation

NEW

The cart button now reacts to the AJAX mini cart, so that when an item is removed from the cart using AJAX, the cart button reflects that change immediately (requires WooCommerce 3.5.0)

NEW

You can now add your own information to each track using the filter hook

FIX

In the post editor, it is now possible to edit the [audio] and [playlist] shortcodes, with a visual rendition of WavePlayer, if the overriding option is active

FIX

The title attributes of the icon appearing in the Info bar or the playlist are now passed through the localization variable and, as such, they are fully translatable

BUGFIX

WavePlayer hangs loading the instances when WordPress is installed in a subfolder of the root

2.2.2

NEW

JS and CSS files are now minified. Moreover, the front-end comes with a single script.

BUGFIX

The Custom CSS and Custom JS are not incorporated into the page

2.2.1

NEW

When a new audio file is loaded for the first time, a message displays the progress of the audio analysis before rendering the waveform

BUGFIX

In the Waveform tab of the Settings, the waveform preview is blank

BUGFIX

In the post editor, sporadically the preview of the player does not show up correctly

2.2.0

NEW

The title attribute of the icons in the info bar and playlist row are now translatable using the .po/.mo files

FIX

The compatibility with Safari 9 and Safari 10 has been restored for desktops, tablets and smartphones

FIX

Minor compatibility issues in the Product and Store pages

BUGFIX

When pausing a track, the next playback always starts from the beginning instead of the current time

BUGFIX

Spinning pause icon when the player completes a track loading

2.1.4

BUGFIX

WavePlayer trigger an error while trying to generate waveforms for newly uploaded tracks

2.1.3

BUGFIX

Social buttons broken with update to version 2.1.0

2.1.2

BUGFIX

The cart button did not work properly starting from version 2.1.0

2.1.1

NEW

WavePlayer can now correctly calculate the width of the waveform area even when the player instance is inside an hidden element

CHANGE

Because of the previous feature, the 'AJAX Containers' option was permanently removed

2.1.0

NEW

WavePlayer now supports all type of products in woocommerce

CHANGE

In order to support all types of product in WooCommerce, the Preview Files are now in the "Advanced", instead of the "General" section

NEW

Completely redesigned audio engine: using only one audio element per page, loading times and memory management are more optimized

FIX

Minor fixes to the aspect of the player

2.0.16

NEW

WavePlayer integration with WooCommerce now supports all kind of products (simple, variable, grouped)

FIX

WavePlayer gives now the right priority to featured image and gallery for the WooCommerce products

2.0.15

NEW

Nearly seamless loop playback when using one track per instance and repeat is active

BUGFIX

PHP Warning when overriding a playlist shortcode

2.0.14

NEW

Better integration with WooCommerce new gallery feature

FIX

Play count now increases when only 10% of a track gets played

FIX

Default thumbnail did not show up for any product using the new WooCommerce 3.0.0 and above

2.0.12

NEW

WavePlayer now detects the visibility status of elements to automatically refresh the content of the waveform. This is particularly useful when including WavePlayer instances into dynamically toggable elements.

BUGFIX

Clicking on a playlist item in scenario with multiple playlists on a single page always starts the first track of the last instance.

2.0.11

NEW

Placeholders now include 'attributes' in the form %key{"attribute":value}%, for future template developments

BUGFIX

Player size on WooCommerce Shop page did not correspond to settings

BUGFIX

Social share links are populated with an incorrect URL

BUGFIX

Default thumbnail doesn't show in the playlist

BUGFIX

Under WooCommerce integration panel, a query assumes the posts table name is "wp_posts"

2.0.10

NEW

Added a "limit" parameter to the shortcode, so you can get only the first n result in combination with the "music_genre" parameter

FIX

WooCommerce 3.0 deprecated the Download Type option. This made WavePlayer's integration malfunctioning.

BUGFIX

On iOS devices, playback does not start when clicking on a playlist row

2.0.9

BUGFIX

Missing info and cover art for remote files.

2.0.8

NEW

When the playlist is scrollable, jumping to a track makes the corresponding item in the list visible.

2.0.7

BUGFIX

The option "Jump to the next player" does not stay checked saving the settings.

2.0.6

BUGFIX

Downloads counter does not get updated

2.0.5

NEW

WavePlayer now overrides both audio and playlist shortcodes

BUGFIX

Install fails on WordPress versions older than 4.5

2.0.4

NEW

WavePlayer now supports auto update from the Plugins page

BUGFIX

WooCommerce product thumbnail not showing for non-music products

2.0.3

BUGFIX

Players on WooCommerce product pages always show in large size

2.0.2

NEW

Added a track sharer for LinkedIn

BUGFIX

Peak files for new external files don't get generated

2.0.1

BUGFIX

Player does not load on website where WooCommerce is not installed or active

BUGFIX

Players don't show the spinning icon when page is loading

BUGFIX

On WooCommerce Shop Page, first item never gets listed

BUGFIX

When batch creating WooCommerce products, progress bar doesn't work properly

2.0.0

NEW

A new customizable Playlist Panel. The webmaster can configure the info and buttons displayed on each row

NEW

WooCommerce integration. Preview files and Music Type (singles or albums) for simple, virtual, music, downloadable products.

NEW

WooCommerce integration. Plenty of options to automatically integrate the player in your music products.

NEW

WooCommerce integration. The webmaster can now create products based on audio files using a batch process. It is also possible to add a cart button on both the Info Bar and the Playlist Panel that interact with WooCommerce cart through AJAX.

NEW

Peak files now get generated upon uploading of new audio files.

NEW

Loading time have been reduced enormously. WavePlayer now loads all the instances on one page with a single AJAX call to the server. This allows all the instances to load simultaneously.

NEW

New placeholders to insert info and buttons (like, share, cart, statistics) in both the Info Bar and the Playlist Panel

NEW

Plugin's options don't get removed from the database when removing the plugin. This is particularly useful when updating to a new version of the plugin without losing your favorite settings.

NEW

Managing peak files from the Maintenance tab of the Settings page is now easier and more advanced.

NEW

Thumbnails for audio files in the Media Library can now show the title of a track instead of the file.

NEW

A new method "refresh" that allows you to force the redraw of the waveform and is particularly useful when loading or showing content via javascript

NEW

Current position and total length of the current track are now shown on the waveform

FIX

Minor CSS improvements

1.4.2

BUGFIX

Info Bar broken when inserting the %file% placeholder.

1.4.1

BUGFIX

Playback is not available until all instances in the page completed loading

1.4.0

NEW

Thanks to a completely rewritten AJAX call strategy, instance loading is now twice as fast as before.

NEW

In case of multiple instances in one page, the instances load in the order they appear on the page (from top to bottom).

NEW

It is now possible to choose whether WavePlayer override the audio shortcode or not

NEW

WavePlayer is now fully compatible with Internet Explorer 11. The compatibility with Internet Explorer 9 and 10 will be improved soon.

BUGFIX

The audio shortcode did not look correctly in the Post Editor and it was not possible to edit its content

1.3.4

NEW

When automatically replacing an audio shortcode, WavePlayer now tries to verify if the URL provided actually corresponds to an attachment in the Media Library. If it does, WavePlayer uses the attachment ID instead of its URL.

1.3.3

BUGFIX

Automatic replacement of audio shortcodes does not work if the src attribute is not provided

1.3.2

NEW

The Info Bar automatically hides if one of the placeholders used in the template does not get replaced by any data value

NEW

A spinning icon shows the loading status of the player. This is particularly useful when loading a file for the first time or from a remote location.

BUGFIX

Getting peaks for remote audio files generates cross domain XHR error

1.3.1

BUGFIX

Track's title not displaying properly when original audio file does not have the corresponding ID3 tag

1.3.0

NEW

Introducing a new taxonomy 'Music Genre' for attachments

NEW

Create a player that will automatically include all audio files pertaining to one or more 'Music Genre'

NEW

Create an instance simply providing the URL of an external audio file: WavePlayer will retrieve all the info stored in the ID3 tags, including a cover art picture if available, and make a local copy for a faster future access (only the ID3 tags and the cover art will be stored locally, not the audio file).

NEW

Customize the default image that appears when a track does not have its own thumbnail

FIX

Color Pickers now work also in the Media Manager, not only in the WavePlayer Settings page

FIX

Minor interface improvements

1.2.2

BUGFIX

Default settings not applying correctly to the shortcode when editing its properties in the Media Manager

BUGFIX

'autoplay' not working properly in combination with 'repeat_all'

FIX

A recent Chrome update changed some CSS default behaviors that messed up with the aspect of the player controls

FIX

Minor improvements to the styling of the player controls

1.2.1

BUGFIX

WavePlayer preview not showing properly in the post editor on some WordPress multisite installations

1.2.0

NEW

Multisite support. WavePlayer is now fully compatible with any WordPress Multisite installation

FIX

Graphic improvements in Safari

1.1.2

NEW

Added a volume control

NEW

Added a button to toggle the visibility of the title bar

BUGFIX

"No container found" error in javascript of the admin area

BUGFIX

the "NEXT" skip button disappears on last track even with repeat_all activated if the playlist only contains two tracks

1.0.18

* First release ]]> https://www.waveplayer.info/kb/version-3-5-update-css-container-queries/ Mon, 13 Mar 2023 11:14:09 +0000 https://www.waveplayer.info/?post_type=docs&p=9855 With the release of version 3.5, we introduced some changes that take advantage of the latest technology in the styling department. Those changes might have an impact on some of the CSS customizations you incorporated into your website.

The CSS Container Queries

The most prominent change of version 3.5 is the introduction of CSS Container Queries in the main WavePlayer stylesheet.

The main problem CSS Container Queries are trying to solve is the limitations that regular Media Queries have in certain situations. For example, when an element is contained in a sidebar, the total width of the whole viewport might be completely irrelevant to appropriately size and lay out its content.

Since version 3.0, WavePlayer has tried to solve this problem with a rather sophisticated mechanism in the script that required calculating the size of the direct container of a player. While addressing that issue, the solution we developed had some downsides, most notably the possibility that the script could add some overhead to the performance, particularly at the page load. Unfortunately, that was the only possible solution.

With the introduction of CSS Container Queries, those calculations become unnecessary because the browser can reshape or resize the content of an element based on the dimensions of any of its direct ancestors, through the use of appropriate container queries. For example, the following

How to properly update your customization to version 3.5

In order to take advantage of the new CSS Container Queries, it was necessary to add an extra container to the main player element. The following two code snippets show the main difference between the HTML markup in version 3.5 compared to any previous version.

<div class="waveplayer-container">
    <div class="waveplayer">
        <!-- all the elements in the player -->
    </div>
</div>

The HTML markup in version 3.5 and newer

<div class="waveplayer">
    <!-- all the elements in the player -->
</div>

The HTML markup in earlier versions

This change in the HTML markup of the player might affect the CSS customization you added to your player, particularly if you added some CSS rulesets altering the positioning, dimensions and alignment of the main player. In general, it would be enough to move those custom CSS rulesets to the top-level container. For example, if you used to have the following custom CSS ruleset applied to the .waveplayer class:

.waveplayer.wvpl-skin-play_n_wave {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 40px;
}

the adjustment you need to add is as follows:

.waveplayer-container:has(.waveplayer.wvpl-skin-play_n_wave) {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 40px;
}

You can see in the previous ruleset that, thanks to the new :has functional CSS pseudo-class, you can limit the style only to the .waveplayer-container elements that contain a .waveplayer.wvpl-skin-play_n_wave player. Therefore, any other .waveplayer-container elements will stay unaffected (check the browser compatibility of this functional pseudo-class).

]]> https://www.waveplayer.info/kb/info-templates/ Wed, 24 Jun 2020 07:00:50 +0000 https://www.waveplayer.info/?post_type=docs&p=8432 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 info templates, you can go to the Settings > WavePlayer page on the Dashboard of your WordPress installation. In the Placeholders tab, you will find three 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%: a share button allowing to share a track on Facebook, Twitter or LinkedIn
%genres%: a list of all the terms of the Music Genres categories the track is associated with
%separator%: a visual divider to push all the placeholders inserted after it to the right side of the container

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

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.

WavePlayer 2 introduced a waveplayer_add_track_info filter hook that allows you to add any custom value to any track object. In the following example, the callback function your_custom_track_filter is associated to the filter waveplayer_add_track_info. The callback function receives three parameters: $track is the track object; $track_id is the ID of the audio attachment in your media library; $post_id is the ID of the post or page that contains the instance of the player loading the track.

function your_custom_track_filter( $track, $track_id, $post_id) {
    
    // do something here to generate the value you want to assign
    // to the 'your_custom_meta_key' placeholder
    
    $track['your_custom_meta_key'] = $your_custom_meta_value;
    return $track;
}
add_filter( 'waveplayer_add_track_info', 'your_custom_track_filter', 10, 3);

When WavePlayer finishes loading all the default information into the track object, it invokes the filter so that you can add as many custom values as you like. In the example above, the your_custom_track_filter function uses the input parameters to retrieve the custom information your_custom_meta_value that you want to add to the your_custom_meta_key placeholder.

Simply adding the code above to the functions.php file of your theme/child theme, a new your_custom_meta_key placeholder will be available for you to use anywhere in the Info Bar or the Playlist Row templates.

Custom placeholders

In addition to the built-in placeholders, it is possible to add custom placeholders that do not correspond to any specific information in the audio track metadata. For example, custom placeholders can be used to add a custom button that triggers a custom event, to which a custom callback function can be attached (you can read the article about how to add a loop toggle button). When doing so, one or more attributes – described in the following section – should be provided, otherwise, the simple addition of the placeholder would not be able to output anything.

Consider the following placeholder:

%custom_placeholder{"event":"myCustomEvent","icon":"fa-bullseye"}%

In that definition, the name of the placeholder is arbitrary and totally irrelevant, so long as it doesn’t conflict with a factory placeholder or an existing meta value. The event property instructs WavePlayer to trigger a myCustomEvent event whenever the placeholder is clicked. Finally, the icon property tells the placeholder to use the fa-bullseye icon from FontAwesome.

Now that we have a custom icon triggering a myCustomEvent event when clicked, we only need to add a callback to that event. We do that by simply adding the following code to the Custom JS box in the Advanced section of the WavePlayer settings.

$('.waveplayer').on('myCustomEvent', (event) => {
    alert('This is a custom button triggering a custom event that you can then intercept and associate to any script.\n\nThe current track is ' + event.detail.track.title + ' by ' + event.detail.track.artist )
});

As you can see, a custom even always carries the track currently being played in the event.detail.track object. This way every track property can be used in the event callback, as it is shown in the example above.

Placeholder attributes

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.

url	When 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.
icon	When you specify an “icon” key in the attributes of the placeholder, WavePlayer adds two classes: the wvpl-icon class and the value assigned to the attribute as an additional class. This second value is particularly useful when using external icon libraries like Dashboard Icons or Font Awesome.   Example: %my-custom-icon{"icon":"fa-exclamation-triangle"}%
class	Add a class attribute to a <span></span> enclosing the placeholder   Example: %placeholder{"class":"my-placeholder-class"}%
raw	Normally, 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 attributes. The opposite way does not work, as the list of placeholder attributes must be formatted according to the JSON specifications.
event	You can associate a custom event to any placeholder simply adding the event attribute with a value representing the name of the event triggered when clicking on the placeholder. You can call the placeholder any way you like.   Example: %my_icon_with_custom_event{"event":"myCustomEvent","icon":"my-icon-class"}% The example above will create an icon that, when clicked, triggers the myCustomEvent event on the enclosing WavePlayer instance. You can then detect that event as follows: $(document).on( 'myCustomEvent', '.waveplayer', (event) => { // your custom callback function here }); The callback function gets passed the usual event parameter. WavePlayer adds to it the current track object by using the event.detail.track property.

]]> https://www.waveplayer.info/kb/embedding-waveplayer/ Thu, 02 Aug 2018 22:31:49 +0000 https://www.waveplayer.info/?post_type=docs&p=8384 Starting from version 2.3.1, it is now possible to embed WavePlayer inside other websites using an <embed> element.

WavePlayer 2.3.1 comes already with this capability, but you need to add an embed-attachment.php file to your Child Theme.

When WordPress finds that file in your Theme root folder, it uses it to display an element from your website inside an <iframe>. If you want to read more about this technique, you can refer to this article in the WordPress documentation.

The embed-attachment.php template file

Let’s start with a basic structure of the embed-attachment.php file.

<?php
get_header( 'embed' );
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        echo do_shortcode("[waveplayer ids='" . get_the_ID() . "']");
    }
} else {
    get_template_part( 'embed', '404' );
}
get_footer( 'embed' );
?>

Compared to the usual single.php, the file embed.php (or, in this case, embed-attachment.php) adds the name ’embed’ to get_header() and get_footer(). We then see the main query looping among all the results. Since this is going to be used on a single attachment post, the query is going to return only one result: the page of the attachment we want to embed inside an external website.

How do we get the right link to be used in the embed element? It is pretty easy. Just go to the Media library and click on the thumbnail of the audio attachment you want to embed. In the right bottom corner, look for the link “View Attachment Page“, right click on it and choose “Copy link address” (or, alternatively, click on it and copy the URL in the address bar of the browser).

Now, it is just a matter of typing the right embed code inside the website where we want to publish our attachment. The embed code looks like this:

<embed height="220" src="https://www.waveplayer.info/10197133_wedding_by_audiopizza_preview/?embed=true">

Please note that, in order for this to work, it is important that you add embed=true at the end of the link. You need also to pay attention to the structure of the URL you copied. If the URL already contains some arguments, like the following one:

www.waveplayer.info/?post_type=attachment&p=1614

then you have to add embed=true at the end of the URL prefixing it with an ampersand (&) like this:

www.waveplayer.info/?post_type=attachment&p=1614&embed=true

On the contrary, if your URL is a permalink like this:

www.waveplayer.info/10197133_wedding_by_audiopizza_preview/

you have to prefix embed=true with a question mark (?), like this:

www.waveplayer.info/10197133_wedding_by_audiopizza_preview/?embed=true

A simple rule of thumb to better understand whether you need to use a question mark or an ampersand is checking the URL you have before adding the embed argument. If the URL already contains a question mark, then it means you need to add the embed argument prefixing it with an ampersand. If the URL doesn’t contain a question mark, then you need to use that to add the embed argument.

Providing additional arguments

You can also pass additional arguments to the URL you embed, so that you can alter the aspect and the property of your embedded WavePlayer instance. For example, the following example pass the size and the shuffle argument to the embedded player:

www.waveplayer.info/10197133_wedding_by_audiopizza_preview/?embed=true&size=large&shuffle

Of course, we have to make some adjustments to the embed-attachment.php file as well, so that we process the additional arguments. The following code retrieves the size and shuffle arguments from the URL and incorporates them into the shortcode:

<?php

$skin   = $_GET['skin'] ?? get_option( 'waveplayer_skin', 'play_n_wave' );
$size   = $_GET['size'] ?? get_option( 'waveplayer_size', 'md' );
$args   = array();
$args[] = "skin=\"{$skin}\"";
$args[] = "size=\"{$size}\"";
$args   = implode( " ", $args);

get_header( 'embed' );
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        $post_id = get_the_ID();
        echo do_shortcode("[waveplayer {$args} ids=\"{$post_id}\"]");
    }
} else {
    get_template_part( 'embed', '404' );
}
get_footer( 'embed' );

By following the example above, you can add as many arguments as you like to the embedded URL, adjusting the WavePlayer instance to your needs.

The following block contains an embedded WavePlayer instance that was input using the URL https://www.waveplayer.info/?post_type=attachment&p=1614&embed=true&skin=play_n_wave&size=lg where 1614 is the ID of the audio attachment we want to play in the embedded WavePlayer instance.

You can also check this test on Codepen.

]]> https://www.waveplayer.info/kb/shortcode/ Fri, 24 Jun 2016 07:04:31 +0000 https://www.waveplayer.info/?post_type=docs&p=8437

Although the waveplayer shortcode with all its parameters is created automatically when adding a player in your posts, it is useful to understand its structure, especially when you need to add a player programmatically or inside an editor that doesn’t support any of the default insertion methods.

        [ waveplayer ids = "<comma-separated IDs of the selected audio attachments>"
                     url = "<comma-separated list of URLs for remotely hosted audio files"
             music_genre = "all | <comma-separated list of music genres>"
                    size = "lg | md | sm | xs"
                    skin = "w2-legacy | w2-evolution | inline-play | play_n_wave | thumb_n_wave | w3-standard | w3-exhibition | <custom-skin-folder-name>"
                   style = "light | dark | color-scheme"
                   shape = "square | circle | rounded"
                    info = "none | bar | playlist"
                autoplay = "true | false"
              repeat_all = "true | false"
                 shuffle = "true | false"
              wave_color = "#ddd"
            wave_color_2 = "#666"
          progress_color = "#59f"
        progress_color_2 = "#05a"
           hover_opacity = "0.4"
            cursor_color = "#ee2"
          cursor_color_2 = "#d93"
            cursor_width = "2"
               wave_mode = "4"
               gap_width = "1"
        wave_compression = "2"
          wave_asymmetry = "2" ]

Parameters

ids	This is the only required parameter and it gets automatically populated with the IDs of the tracks selected in the Add Media frame. If left blank together with the following parameter url, this instance of the WavePlayer will be hidden.
url	Instead of the ids parameter, you can provide a URL to an audio file through this parameter. If the file is on the local server, WavePlayer will access the ID3 tags information and show them in the info bar of the player. If the file is on a remote server, WavePlayer will create a local copy of the ID3 tags for a faster future access.
music_genre	Starting from version 1.3.0, WavePlayer registers a custom music_genre taxonomy for the attachments. After creating your desired music genres and associating them to your audio attachments, you can create an instance of WavePlayer specifying which music genre you want it to load. Every time a page containing that instance loads, WavePlayer will include in it all the audio attachments pertaining to the listed music genres. This is the best way to have an instance automatically updated with any new uploaded audio file, because you are not creating an instance with a static list of audio files. Furthermore, using the wildcard all in the music_genre parameter, you are going to have an instance of WavePlayer that will load all the audio attachments you have ever uploaded to your server. Please also note that the use of this parameter is not yet integrated in the Media Manager. This means that you have to type the shortcode manually in the post editor.
skin	Defined the skin that is going to be used for this instance of the player. The possible values are w2-legacy, w2-evolution, play_n_wave, thumb_n_wave, w3-standard, w3-exhibition. Those are the factory skins that come with WavePlayer. If you created your own skin, this value needs to reflect the exact name of the folder containing the custom skin.
size	Defines the size of the player. Accepted values are: lg, md, sm and xs. If left blank, the player will be displayed at the default size setting, according to the corresponding option of Settings –> Waveplayer.
style	Can be set to light, dark or color-scheme and defines the color mode of the player. Both light and dark force the player to be displayed in that style regardless of the visitor’s browser color scheme setting. When this option is set to color-scheme, the player will display in light or dark mode depending on the setting of the visitor’s computer or device. If left blank, the player will use the default style option, according to the corresponding option of Settings –> Waveplayer.
shape	Can be set to square, circle or rounded and defines the shape of the thumbnail where the playback controls are located. If left blank, the player will use the default shape setting, according to the corresponding option of Settings –> Waveplayer. Please note that this setting might not be available to every skin. Skins that do not implement this option will simply disregard it.
autoplay	If set to true, the player will start to playback the track as soon as the page completes loading. If set to false, the user will have to start the playback manually. If left blank, the player will use the default autoplay setting, according to the corresponding option of Settings –> Waveplayer.
repeat_all	If set to true, the player will keep playing back the tracks continuously, restarting from the first track when the last one has ended. If set to false, the playback will stop after the last track has ended. If left blank, the player will use the default repeat_all setting, according to the corresponding option of Settings –> Waveplayer.
shuffle	If set to true, the player will shuffle the tracks every time the visitor reloads the page. If set to false, the order of the tracks will be the one provided with the ids parameter. If left blank, the player will use the default shuffle setting, according to the corresponding option of Settings –> Waveplayer.
wave_color wave_color_2	Defines the starting and ending color of the vertical gradient filling the waveform. If left blank, the player will use the default wave_color and wave_color_2 settings, according to the corresponding option of Settings –> Waveplayer. For a better understanding of the waveform coloring scheme, please refer to the Waveform Options section of the Settings.
progress_color progress_color_2	Defines the starting and ending color of the vertical gradient filling the performed portion of the waveform. If left blank, the player will use the default progress_color and progress_color_2 settings, according to the corresponding option of Settings –> Waveplayer. For a better understanding of the waveform coloring scheme, please refer to the Waveform Options section of the Settings.
hover_opacity	Defines the opacity of the wave overlay when the user moves the pointer over the wave. Set this parameter to 0 to have a regular continuous waveform. If left blank, the player will use the default hover_opacity setting, according to the corresponding option of Settings –> Waveplayer.
cursor_color cursor_color_2	Defines the starting and ending colors of a vertical gradient for the cursor scrolling over the waveform. If left blank, the player will use the default cursor_color and cursor_color_2 settings, according to the corresponding option of Settings –> Waveplayer. For a better understanding of the waveform coloring scheme, please refer to the Waveform Options section of the Settings.
cursor_width	Defines the width of the bars displaying the waveform. Set this parameter to 0 to have a regular continuous waveform. If left blank, the player will use the default cursor_width setting, according to the corresponding option of Settings –> Waveplayer.
wave_mode	Defines the visualization mode of the wave. If set to 0 (‘Continuous’ in the settings page), the waveform will be displayed as a regular continuous waveform. Any other setting from 1 to 10 represents the width a the bars used to display the waveform in a histogram fashion. If left blank, the player will use the default wave_mode setting, according to the corresponding option of Settings –> Waveplayer.
gap_width	If wave_mode is set to any value other than 0 (‘Continuous’), this parameter defines the width of the gap between the bars representing the waveform. If left blank, the player will use the default gap_width setting, according to the corresponding option of Settings –> Waveplayer.
wave_compression	Defines the compression of the wave. This option does not affect the file of the audio, but only the way its waveform gets displayed. A lower level of compression shows a more evident difference between low intensity and high intensity in the waveform. Conversely, a higher level of compression flattens those differences, showing a more uniform wave. If left blank, the player will use the default wave_compression setting, according to the corresponding option of Settings –> Waveplayer.
wave_asymmetry	Defines the ratio between the height of the top half of the wave and the height of the bottom part of the waves. If left blank, the player will use the default wave_asymmetry setting, according to the corresponding option of Settings –> Waveplayer.

]]>