How to use WavePlayer?

WordPress Media Manager Installation

Starting from version 3.9, WordPress makes it possible to create audio playlists directly from the WordPress Media Manager. WavePlayer takes full advantage of this capability introducing a waveplayer shortcode that extends the default playlist shortcode. This new shortcode offers the users a more modern interface for their audio tracks, while keeping the same ease of operation in creating their favorite playlists. In addition to that, WavePlayer also overrides the built-in audio shortcode, so that you will automatically find a single-track instance of WavePlayer wherever you have already an audio shortcode in your pages. Even in the backend!

create waveplayer


The new Gutenberg editor

WordPress introduced a new editor that makes creating new posts and pages a much more productive and fun experience! Its name is Gutenberg! Although WavePlayer doesn’t come (YET!) with a native Gutenberg block, you can still create WavePlayer instances without losing the ease of use that made WavePlayer the best selling, best rated, most reviewed audio plugin in the Envato ecosystem.

You simply need to add a “Classic” block and, inside it, you will be able to access the “Add Media” button that you were used to in the old post editor.


How to create a new instance of WavePlayer

Step one: add media
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 two: insert media

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: upload audio files

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.

As you can see in this picture, some of the audio tracks display a thumbnail image. WordPress allows you to attach a featured image to audio tracks as well as to any other post type. When you set the feature image of an audio track, WavePlayer will use it as the thumbnail of that track in the player.

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

Step 5: select audio files
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 6: create waveplayer
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 7: edit player
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: visual editor
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: add more tracks
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: update waveplayer
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 you editing, click on the Update WavePlayer button to make your changes effective.

Step 12: publish and update
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!

Step 13: enjoy your music
CONGRATULATIONS! You have just created your first instance of WavePlayer!

You can finally enjoy your favorite music, with a cool, modern and trendy looking player.