How to Add Audio Files and Create a Playlist on Your WordPress Website

The world is full of sounds that affect us in a variety of different ways. From lifting our mood or making us weep, to empowering us to stick to our exercise routine, sounds are an integral part of our everyday life.

Most brands use visual cues to create a specific aesthetic that will make them recognizable. But if you incorporate sounds into your marketing strategy, your website will become even more memorable and appealing to the audience.

The best way to organize songs or inspiring podcasts on a site is to create playlists. That way, users can easily sift through the featured content, select what they want to hear, and play the audio file they like as many times as they please. In one of our previous articles, we discussed the best audio player plugins you could use on your site. We also showed you how to embed a Spotify playlist to your pages. This time around, we’d like to demonstrate how to create a WordPress audio playlist using the platform’s default options in Gutenberg, the Classic Editor, and Elementor.

How to Add Audio Files in WordPress

Adding audio files in WordPress takes just a few clicks of your mouse. The platform supports .MP3, .M4A, .WMA, .OGG, and .WAV file types.

If Gutenberg is your preferred page builder, open the page or post where you wish to add the file. Click on Add Block and select Audio.

You can then upload a new audio file, select one from your media library, or insert audio from an URL.

If you choose the first option, you will be able to add a caption for the file once the upload is complete. Moreover, there are options on the right side of the screen allowing you to enable autoplay and loop effects, and adjust preload settings.

Metadata can be edited within the media library itself. Upon selecting the file, you can change its title, specify the name of the artist and the album, add caption and description, and modify the file’s URL.

To add audio files in the Classic editor, first, click on Add Media.

Then, choose a file from the media library or upload the new one. All editing options are placed on the right side of the screen and are the same as in Gutenberg’s media library.

In Elementor, you need to add the Audio widget to your page.

And then, upload the desired audio file.

How to Create a Playlist in WordPress

At the moment of writing this article, Elementor and Gutenberg don’t include a specific widget nor a block for making an audio playlist in WordPress. And if you don’t feel like adding yet another plugin to your roster, there’s a workaround.

In both page builders, you can add the HTML block/widget to a page or post where you wish to display the playlist. Then, paste the following shortcode in the block/widget:

[ playlist ids = "insert_track_ids_here" ]

To find out track IDs, go to Media > Library. Click on the file you wish to feature in the playlist and look for the ID in the address bar, at the end of the URL.

Alternatively, you can hover over the View Attachment Page or Edit More Details within the library.

And then, the track ID will show up at the bottom left corner of the page.

This activity may be somewhat time-consuming if you plan on adding a lot of files at the same time, but for now, this is the only way of adding a playlist in Elementor and Gutenberg.

Now that you know the track IDs, add them to the shortcode. Ours goes like this:

[ playlist ids = "449, 453, 454" ]

After you save the changes, a playlist will appear on your site.

In the Classic editor, you should first press the Add Media button and then click on Create Audio Playlist on the left-hand side of the screen.

Next up, select the desired files from the library or upload the new ones, and click the Create a New Playlist button in the bottom right corner.

Then, the Edit Audio Playlist window will appear on the screen. You can drag-and-drop the tracks to arrange them in the order that suits your needs and decide if you wish to display a tracklist, show artist name in the tracklist, and show images.

And lastly, after all the tweaking is complete, click on Insert Audio Playlist.

How to Add a Playlist to a Sidebar in WordPress

If you would like to add a playlist to a sidebar on your site, you can go about that by adding a Text widget to the section of your choice. First up, go to Appearance > Widgets, find this widget, and choose the sidebar area where you wish to display an audio playlist.

Then, click on Add Media and start creating your playlist.

Final Thoughts

Adding audio files to your site can help your brand leave a lasting impression on users and make their browsing experience more pleasant and fun. And creating a playlist in WordPress doesn’t require any particular skills or coding knowledge. Any layperson can do it, in just a few mouse clicks. The only downside of making an audio playlist this way is that there aren’t that many customization options at your disposal. To avoid having to do any work in CSS, consider purchasing a fully-customizable theme with the audio playlist shortcode.