Using WavePlayer in Elementor

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.