Thursday, June 18, 2015

How to Add Audio Files and Create Playlists in WordPress

Do you want to add audio files to your WordPress site? As a content management system, WordPress is capable of handling audio files by default. However, many beginners are not aware of this. In this article, we will show you how to add audio files and create playlists in WordPress.

An audio playlist in WordPress

Supported Audio File Formats in WordPress

WordPress uses HTML5 audio tag to embed audio files. It is compatible with most modern devices and works particularly well for mobile devices. HTML5 audio tag supports MP3, OGG, and WAV file formats.

MP3 is the most commonly used and widely supported format for audio files, and we recommend you to use it whenever possible.

Adding a Single Audio File in WordPress

Adding a single audio file or music track to any WordPress post or page is very easy. Simply click on the add media button on the post edit screen.

Adding an audio file in WordPress post using media uploader

Next, a media uploader popup will appear on your screen. You need to click on the upload file button to select and upload your audio file. Once it’s uploaded, you need to click on insert into post button.

WordPress will insert your audio file in the post. If you are using the visual post editor, then you will be able to see the file embedded into your post. If you are using the text editor, then you will see the audio shortcode.

Single audio file embedded into WordPress visual editor

You can continue editing your post, or save and publish it. Once published, you can preview your post where you will see your audio file embedded like this.

A single audio file added in a WordPress post

Another easier way to add a single audio file is to upload the file to the media library. After that simply copy the file URL and paste it in the visual editor.

WordPress will automatically embed the URL for you. This is similar to how you embed videos in WordPress where you just paste the URL of a YouTube video and WordPress automatically embeds it.

Adding Audio Playlist in WordPress

Just like image galleries, you can also add audio playlists to your WordPress posts using the media uploader. Simply click on the add media button to upload your audio files.

After uploading your audio files, you need to select the files you want to include in the playlist and then click on create new playlist link in the left hand column.

Creating audio playlist in WordPress

You can now drag and drop to rearrange songs in the playlist. You can also enable the display of track name, artist name, and image. This information is embedded with your MP3 file’s IDT meta tags and is automatically displayed by WordPress.

Playlist Settings

Once you are done, simply click on the insert audio playlist button. Your playlist will be added to your post, and you will be able to see it in visual editor. You can now save your post and preview your playlist.

An audio playlist embedded in a WordPress blog post

Editing Meta Information of Audio Files in WordPress

WordPress can automatically get the meta information from your MP3 file. However, if your file does not have any meta information, or you would like to change it, then you can do so in the media uploader.

Click on the Add Media button to launch the media uploader. You can upload your audio file or if you have already uploaded the audio file, then click on it in the Media Library.

Once the audio file is selected, you will notice the attachment details column on the right. This is where you can provide track title, artist name, album name, caption and short description for the track. This information will be displayed in the playlists and on single attachment pages.

audio-meta-info

If the audio file you uploaded has an embedded image to be used as album cover, then this image will be automatically extracted by WordPress. It will be stored in your media library and will be used when this track is added to a playlist.

However, if your audio file does not have a cover image, then you can edit the file in WordPress and upload an image. Simply go to Media » Library select the file you want to edit and click on the edit link below it.

Editing an audio file in WordPress

If you are viewing the media library in grid view, then clicking on the audio file will open a popup. You can click on the Edit more details link at the bottom of the popup to edit the file.

Edit more details link

You will now reach the edit media page, where you can not only edit all the meta information for your audio file, but you can also upload a featured image. This image will then be used when the audio file is added to a playlist.

Uploading album cover image by editing media file in WordPress

Adding Audio Files and Playlists to Sidebar Widgets

By default WordPress does not automatically embeds audio file URLs. First we need to enable automatic embedding for text widgets, and then we need to enable shortcodes. Simply paste this code in your theme’s functions.php file or a site-specific plugin.

add_filter( 'widget_text', array( $wp_embed, 'run_shortcode' ), 8 );
add_filter( 'widget_text', array( $wp_embed, 'autoembed'), 8 );
add_filter( 'widget_text', 'do_shortcode');

Now you can upload a file to the media library and copy its URL. Add a text widget to WordPress sidebar and paste the URL inside it.

WordPress will automatically embed the URL into media player to play your audio file.

To add a playlist, you will need to use shortcode [playlist] with the IDs of media files you want to include into the playlist.

First you will need to upload the audio files you want to include in the playlist by visiting Media » Add New.

Now you need to edit each audio file you want to add in the playlist. Simply click on the edit link below the file in media library or click on edit more details link if you are viewing media library in the grid view.

On the Edit Media page, you will get the media file ID below the title field.

Getting the media file ID in WordPress

Now that you have the IDs of the file you want to add into the playlist, you can use the shortcode like this:

[playlist ids=”14,24,36″]

Don’t forget to replace the ids with your own file IDs. You can use this shortcode in a text widget. This is how it looked on our test site:

Adding an audio playlist in WordPress sidebar widget

We hope this article helped you learn how to add audio files and create playlists in WordPress. You may also want to take a look at our guide on how to start a podcast with WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit How to Add Audio Files and Create Playlists in WordPress on WPBeginner.

No comments:

Post a Comment