In the first section of the WavePlayer Settings, you can define the default options for the autoplay, repeat_all and shuffle parameters. Whenever you insert an instance of the Waveplayer without providing any of these parameters, the instance will behave according to these settings.

In this panel you can also choose whether the WavePlayer will override the default audio and playlist shortcodes and if the playback will automatically jump for an instance to the following one at the end of each playlist.

In this section, you can select the default skin, style, size and shape. You can also choose the default font used for text elements of the player, the position of the sticky player and the default thumbnail used by the player when the track currently playing back is not associated to any featured image.

This section is reserved to the definition of the palettes that you can select to easily define the colors of the elements. The 1-click Palette Generator is particularly useful to define a new random palette in just one click. A new palette generated with this tool can then be fine-tuned color by color, saved in the palette list and used as both the site-wide default palette for every player of the palette of a specific instance.

Any change to these settings is immediately reflected in the two players – one for light mode, one for dark mode – at the bottom of the page.

In this section, you can define all the parameters that are responsible for the rendering and the behavior of the waveform.

The color you select here can be overridden by the selected palette, according to the overriding option in the previous Palettes tab.

One of the strengths of WavePlayer is that it doesn’t force you to have a predefined set of icons, buttons or information details for each track. In this section, you can define your own set of placeholders for each area of the player: the info bar of the currently playing track, the playlist row and the info bar in the sticky player.

This section is also where you can define any custom field for the audio attachments. Those custom field wi

The Advanced section is entirely reserved for the Custom CSS and the Custom Javascript box.

In regards to the Custom CSS box, WordPress offers you several places where you can add your custom CSS rulesets (e.g. the “Additional CSS” box of the Theme Customizer). Nevertheless, we like to keep things separated and use this area to write any custom CSS ruleset that applies to WavePlayer exclusively. This way, you can keep your customization even when switching to a different theme.

The Custom Javascript box allows you to add your own script. The placeholders technique gives you the ability to create custom icons and buttons and attach them to custom events. This would be the best place to add the scripts triggered by your custom events.

This section is also where you can define any custom field for the audio attachments. Those custom field wi

This section is divided into two areas.

In the top one, you can select all the options regarding how WavePlayer will incorporate an instance of the player to your products, in both the Shop and Product pages.

The bottom one allows you to batch create products for the audio files you have already in your Media Library with the further option of deciding whether the product will be drafted as a simple or a variable one. You can also set their price. In case of simple products, they will also be marked automatically as downloadable and virtual.

Once the process is complete, you can review each product, adding the necessary downloadable files, and publish it.

Step 1

In order to create a new instance of WavePlayer, simply create or edit the Post or the Page where you want to add the WavePlayer and click on the Add Media button, right above the Visual Editor toolbars.

Step 2

In the left sidebar, together with all the other elements WordPress allows you to create, you will find a menu to create a new instance of WavePlayer. Click on Create Waveplayer.

Step 3

If you have already uploaded some audio files, you can select it here. Otherwise, click on the Upload files tab, in order to upload new audio files.

Step 4

Upload your audio tracks dragging them to WordPress drop area or Selecting files from your local drives.

Step 5

The files uploaded while you are in the process of creating a new Waveplayer instance get automatically selected for the instance’s playlist.

Step 6a

While the uploading is still processing, you can select more tracks already present in your Media Library

Step 6b

When the upload is complete and you are happy with you selection, you can finally create a new instance of WavePlayer clicking on the Create a new WavePlayer button.

Step 7a

Now, you can edit your instance of WavePlayer, starting with the order of the tracks. In order to change the order, simply drag and drop their thumbnails around.

Step 7b

In the WavePlayer Settings panel, you can change the default settings of the player, that will alter the aspect of this instance in the page.

Step 7c

When you are happy with your configuration, click on the Insert WavePlayer button to insert the instance you have just created in your page or post.

Step 8

You can immediately preview the instance you have just inserted in the post editor. You can even playback the audio tracks!

WavePlayer allows you to work with a visually complete and fully interactive rendition of the player right in the post editor, thus saving you the time to go back and forth between the post editor and the actual page in the front end.

If you want to make changes to the selected instance, simply click on the button.

Step 9

If you want to add more tracks to your playlist, click on the Add to Waveplayer menu item.

Step 10a

When altering an instance of WavePlayer that you have previously inserted in your post, you can still add more audio tracks, selecting them from the Media Library or even uploading new files, the exact same way you did when originally creating the player.

Step 10b

When you are happy with your selection, click on the Add to WavePlayer button to see your new tracks added to the previous playlist of the player.

Step 11

Of course, you can still change the order of the tracks (draggind the files around) or the aspect of the player (altering the WavePlayer settings).

When you are done with your editing, click on the Update WavePlayer button to make your changes effective.

Step 12

Click on the Publish (for newly created posts or pages) or the Update button (for already published posts or pages) to finalize your changes.

Now it is time for you to visit the page with your final result!

In order to add a WavePlayer instance to a post or page using the Elementor editor, you first need to locate the WavePlayer widget among the ones offered by Elementor.

1. Open the widget list by clicking on the grid icon
2. Start typing “waveplayer” in the widget search bar
3. Locate the WavePlayer widget among the results
4. Drag and drop the widget anywhere you like in your page, inside the Elementor editor

WavePlayer will immediately appear as the empty block shown in the picture below. It is now time to add one or more tracks to the player.

The first panel in the WavePlayer widget editor is the “Player Options“.

Here you can first define which type of files you are going to include and select one or more files that will play inside the instance you are currently editing. For the type of files, you have three options:

Internal files: This is the option you need to select, if you want to add audio files that are uploaded to your Media library. It is the default option and also the one we recommend because of the more efficient way WavePlayer stores the statistics of those files in the database (play count, likes, downloads, etc).

External files: If your files are located in a remote server, you have to choose this option and you will be asked to provide one or more URLs of your remotely hosted files. Although this is perfectly possible, the method we recommend is using internal files only. If you need to host your files on a cloud storage service (such as Amazon S3 or Digital Ocean), we encourage you to look into the offloading of your Media library files.

WooCommerce Preview Files: WavePlayer integrates with your WooCommerce audio products. When you are using Elementor templates to build your shop and product page templates, overriding the default ones distributed with WooCommerce, you can choose this option and won’t need to specify the actual files. WavePlayer will select the appropriate files on the frontend, based on the preview files you previously associated to each product.

When the Internal Files option is selected, you can easily add your audio files by simply clicking on the “plus” icon of the media selector, initially empty. When the Media modal dialog appears, the option “Create Audio Playlist” is selected by default. This is the right way to add files to the player, so you can start selecting your audio files. When you are done selecting, click on the button “Create a new playlist“.

In the second step of the audio file selection, you will be presented with a panel where you can now reorder the tracks by simply dragging them around. When you are happy with the order, you can click “Insert audio playlist” to finalize your selection.

With the files you selected, WavePlayer is finally able to render the actual player on the page and the media selector now reflects your audio file selection.

After confirming the list of files included in your player, you can make any adjustment to your selection by simply hovering the mouse and clicking on the “pencil” icon that appears in the top right corner of the media selector.

You can also empty the playlist by clicking on the “trash bin” icon.

Like with any other block, adding a WavePlayer instance to your pages starts with clicking on the “plus” sign on the right or the top of the section where you want to add the player. After locating the WavePlayer block in the list of the available blocks – something that is even easier by typing “waveplayer” in the block search bar –, you are presented with an empty block that invites you to select the audio files that you want to include in the player.

The Media modal dialog that opens when clicking on the “Media Library” button shows the results of a search filtered to audio files only. You can select as many files as you like, keeping in mind that the order in which you select them is the order they will be listed in the player.

If you selected a file by mistake, you can remove it from the selection by un-checking the checkmark corresponding to its thumbnail.

The selection is additive by default, meaning that every time you click on a new thumbnail, that file will be added to the selection without any need to press any key on the keyboard.

You can also select a range of files by clicking on the first file and, keeping the SHIFT key pressed, clicking on the last file.

Once you are done with the selection of the tracks you would like to add to the player, you can click on the “Select” button. The Media modal dialog will close and a player with the selected tracks will appear on the page.

Now, you can start altering the visual aspect of the player using the multiple options available in the Block panel. The player is created according to the default settings you configured in Settings > Waveplayer section.

Any change in the visual parameters will be reflected immediately in the editor and the edited player will be re-rendered.

Gutenberg

The new Gutenberg Block Editor was created by the same team that developed and actively maintains WordPress. It is no surprise that it is so well integrated within the core of your website backend.

Elementor

With more than 5 million active installations, Elementor is arguably the most popular page builder in the market and for a good reason. If you love Elementor, you will love the new WavePlayer Elementor Widget that allows you to add a player instance in no time and customize it down to its finest detail.