One aspect making WavePlayer one of the best audio players for WordPress is the seamless integration with its core features. One of the most ignored features of the WordPress Media Library is that audio attachments can be assigned a thumbnail or featured image as any other WordPress post types. This is ignored mostly because the usual and most prominent attachments in the Media Library are images and assigning a featured image to an image is not allowed since is redundant and just… silly.
When it comes to audio attachments, though, setting a featured image allows WavePlayer to show that featured image as the thumbnail of an audio track in the player.
Method 1: Manually setting the featured image
This is the easiest way to associate an image to an audio attachment, both from your Media Library. Please consider that the following steps are possible because WordPress allows it out of the box, regardless of WavePlayer being installed or not on your website.
- Go to your Media Library and upload both the audio attachment and the image you want to use as its thumbnail.
- Click on the audio attachment to open the Attachment Details modal dialog
- Click on the link “Edit more details” in the bottom right corner of the modal dialog: this will open the usual post editor but the “post” you are actually editing is the audio attachment you have just uploaded (attachments are stored in the same table where regular posts or pages are, with the
post_typeset toattachment) - In the right sidebar, in the Featured Image section, click on the Set Featured Image link
- From the Media Library modal dialog that popups up, select the image you want to use as the thumbnail for this audio attachment and click on the Set Featured Image button in the bottom right corner.
- Click on the Update button
- Go back to the Media library, to verify that WordPress is already acknowledging the thumbnail assigned to the audio attachment.
WavePlayer will now use that image you selected as a thumbnail for that track.
Method 2: Automatic extraction of the embedded cover art picture from the ID3 tags
Another often underused function that WordPress features without the need to rely on any extra plugin is the automatic extraction of the embedded cover art picture from the ID3 tags of the audio file you upload to the Media Library. In this case, you don’t really need to do anything more than uploading your MP3 files where you previously embedded a cover art picture. Upon uploading such a file, WordPress will:
- automatically extract the embedded cover art picture from the audio file
- add that picture to the Media Library
- set the newly added image from the Media Library as Featured Image of the audio attachment that you have just uploaded
- in case you are uploading multiple audio files all sharing the same embedded cover art picture (think of an album where each track has the same album cover as the embedded cover art picture), WordPress will recognize that all the files share the same picture and upload the image only once, while setting it as the Featured Image of all the audio files you have just uploaded, even in batch
This method gives you the opportunity of operating on your audio files locally, embedding the picture you need or require and upload them only after the correct images have already embedded in the audio files. As for the software you can use to edit the ID3 tags of your MP3 files, an application we like is Kid3. It is open-source, available for Linux, Windows and Mac and constantly updated.
Thumbnails of external files
When you use WavePlayer with external audio files, you may want to consider that the tracks included in the player will have their own thumbnail only if the remote file includes an embedded cover art picture in the ID3 tags. In that case, WavePlayer has the capability of extracting the embedded picture (thanks to WordPress’ core functions) and store it locally together with the metadata and peak information so that it can easily access it every time the track is used in any player instance on your website.