Adding audio files and creating playlists in WordPress are considered easy tasks. However, many beginners really find it difficult to start. Therefore, in today’s blog, we will give you a step-by-step guide to help you handle this issue.
Why should you add audio files and create playlists in WordPress?
In addition to text and image content, audio is also an effective way of getting your message across to your audience. Moreover, adding audio files helps you enhance your site’s user experience thanks to memorable music and vocal presentations.
When someone enjoys what they hear, they will stay on your page longer. As a result, it will have positive effects on your WordPress SEO.
In particular, if you run a music production website, it is necessary for you to add audio files or create catchy playlists to share your favorite tracks with your audience.
How to Add Audio Files and Create Playlists in the WordPress Editor?
Adding a single audio file in the Classic Editor
It is easy for you to add a single audio file or music track to WordPress posts or pages. If you are still using the Classic Editor, simply click on the Add Media button on the post edit screen.
This will open a popup window where you can upload audio files from your computer by clicking on the Select file button or by dragging and dropping files.
Once the audio file is uploaded, you need to click on the “Insert into post” button at the bottom left corner of the popup window.
Immediately, you will see the file embedded in your post in the visual post editor. When you switch to the text editor, you are able to see the audio shortcode.
You can continue editing your post, then save or publish it. After publishing, you can view your post on the front end with your audio file embedded, as in the screenshot below.
Additionally, another simpler method to insert a single audio file in WordPress is to upload the file to your media library first. Then you can copy the file URL and paste it into the Visual editor.
WordPress will automatically embed this URL for you. Generally, adding a single audio file is similar to the process of embedding videos in WordPress. You only need to paste the URL of a YouTube video, and WordPress will embed it for you.
Creating an audio playlist in the Classic Editor
If you have ever create image galleries in WordPress, you will find the process of creating an audio playlist in WordPress extremely easy. First of all, you need to click on the “Add Media” button to add all your audio files to the media library.
Once all audio files are available in your media library, let’s choose the Create Audio Playlist option in the left-hand column and select the files you want to include in the playlist. Then click on the Create a new playlist button.
In the next popup window, you can drag and drop to reorder tracks in the playlist as you like. Additionally, you can enable or disable the display of track names, artist names, and images under the playlist settings.
This information comes from your MP3 file’s ID3 meta tags and is displayed by WordPress automatically.
When you are happy with your selection, click on the Insert Audio Playlist button. Then, your playlist will be inserted into your post and you can see it in the visual editor.
When you publish or preview your post, you will see how it looks on the front end, as in the screenshot below.
Adding a single audio file in the Gutenberg Editor
First of all, open the post or page you want to add audio files to. In the editor screen of Gutenberg, let’s click the Add block (+) symbol and select Audio block.
Now the audio block will display 3 ways to add audio files. You can click on the Upload files button to upload your files from a computer or click on the second button to choose uploaded files from the WP media library. And the final button allows you to insert an audio file by providing the URL.
For example, we are going to upload a sample file from the computer.
For this example, we’ll upload a sample mp3 file from the computer. The audio file will immediately appear in the post.
Now you can add and format a caption for the file (optional).
You can click the Preview link at the top to view your post in the front end. If you are happy with the result, click on Publish/ Update to finish.
Creating a playlist in the Gutenberg Editor
At the time of writing this tutorial, Gutenberg doesn’t offer any specific widget or block for creating an audio playlist in WordPress. Luckily, there are a lot of outstanding WordPress Music Player plugins that can help you handle this issue. However, if you don’t want to install additional plugins, you can use the following method.
First, you need to add the HTML block/ widget to a page/post where you want to add the playlist. Then paste the following shortcode in the block/widget.
[ playlist ids = "insert_track_ids_here" ]
In order to find out the IDs of tracks, you need to go to Media > Library. Click on the file you would like to include in the playlist to find its ID in the address bar. The ID will display between “post=” and “&action=”. In our case, the ID of the track is 581.
You can also get the ID at the end of the permalink.
Alternatively, you can hover over the file whose ID you want to get. You will see the edit link that appears at the bottom left corner of your screen.
After all track IDs have been collected, let’s add them to the shortcode. For example, ours looks like this.
[ playlist ids = "581, 578, 579" ]
After you save the changes, a playlist will appear on your site.
Editing meta information of audio files in WordPress
By default, WordPress will automatically pull the meta information from your MP3 file. However, if your file doesn’t include any meta information, or you would like to change some of it, you can easily do so in the media uploader.
Simply click on the Add Media button to open the media uploader. You can click on the Select files button to upload your audio file or click the media library tab if the audio files have been uploaded.
Click on the audio file that you want to edit and look at the attachment details column on the right. Here, you will see all the meta information of that track, including title, artist name, album name, caption, and description. You can easily change this information as you want.
If the audio file that you uploaded has an embedded image, WordPress will automatically extract it and use it as the album cover.
For an audio file without a cover image, you can edit the file in WordPress and then upload an image.
Just visit Media > Library and choose the audio file you want to edit by clicking on the Edit link under it.
If you are viewing the media library in grid view, clicking on the audio file will open a popup window. Now, you need to click on the Edit more details link at the bottom of the popup window to edit the file.
Here, you can edit all the meta information for your audio file. Additionally, you can also upload a featured image. This image will be used when the audio file is inserted into a playlist.
How to add audio files and playlists to the sidebar?
If you want to display a playlist in the sidebar on your website, you can use the Text widget.
Firstly, go to Appearance > Widgets. You will see a Text Widget available in the sidebar. Let’s click on it to edit.
Here you can enter a title and click the Add Media button to upload your audio files or choose uploaded audio files in the media library. The remaining steps are the same as adding a single audio file/playlist to pages and posts (see above).
Once you are done, click on the Update button and visit your website to see the result.
Wrap up
We have just shown you a detailed guide on how to add audio files and create playlists in WordPress. If you have any questions or encounter any problems while using the methods above, let us know by leaving a comment below.
Moreover, you can drop by our Free WordPress Themes to explore plenty of eye-catching designs for your website.
