SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30
SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30
BACK TO TOP

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

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.

Music WordPress Themes
Mixtape banner
Mixtape

Music Theme for Artists & Festivals

Noizzy banner
Noizzy

Music Theme

Shuffle banner
Shuffle

Music Theme

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.

Audio Block

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

Audio Upload

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.

Audio 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.

Meida Library Settings

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

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.

Elementor Audio

And then, upload the desired audio file.

Add Audio Elementor

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.

Track ID

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

View Attachment

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

Track ID

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.

Playlist

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.

Create a Playlist

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.

Create a Playlist button

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.

Edit Playlist

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

Insert 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.

Text Widget

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

Text Widget Add Media

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.

Post your comment

Comments0