Adding Audio to WordPress

The following tutorial explains how to add audio to WordPress, including adding playlists on your site. We also cover details on some plugins that may be useful to extend the standard WordPress functionality for adding audio to your site.

WordPress Audio Shortcode

By default WordPress handles audio well, its uses the HTML5 audio tag to create shortcode and supports MP3, OGG, and WAV file formats. You can read more about the WordPress codex relating to Audio shortcodes.

The following video from WP Beginner gives a great overview of using WordPress as standard:

Add Single Audio File

Adding a single audio file or music track to any WordPress post or page is easy. Simply click on the add media button on the post edit screen, then drag and drop your media file (.mp3, .mp4, .ogg and .wav files) into the WordPress media uploader, once uploaded click insert into page:

add-audio-wordpress
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.

Its really as simple as that, just upload the file, and then insert into post. If you’d like to add a playlist the next section explains how to do so.

Create Playlist

Creating a playlist is very similar to adding a single audio file. Go to your page, then click add media, then drag and drop (or select your existing files) in your music files, then press “Create Audio Playlist” on the left hand side, then press “Create a new playlist bottom right”, you can now sort the order and then insert into the page:

add-music-playlist-wordpress-1

Again you’ll have either an playlist shortcode in the text view, and a playlist view in the visual mode:

edit_page__mark_allen_-_wordpress

Edit Meta Data

WordPress automatically gets the meta info from your MP3 files. 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, you can upload your audio file or if you have already uploaded the audio file, then select the file 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 update the 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.

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

If your audio file does not have a cover image, then you’ll need to edit the file in the media library. Go to Media > Library, then select the file music file you want to edit and click on the “edit” button just below the file:

edit-media

Or if in grid view, select a file, you’ll get a pop up and then select the “edit more details” link:

edit-more-media

You will now reach the edit media page, you can edit all the meta information for your audio file, including updating the featured image. This image will then be used when the audio file is added to a playlist.

edit-media-final

There you have it, thats how you can add a single audio file, or playlist to a page or post, as well as updating all the meta data with a file. In the next section, we discuss 3 possible plugin options that will also allow you to build on the standard WordPress functionality for inserting media into WordPress.

Plugins

The following plugins allow you to extend the functionality of the standard WordPress functionality.

Compact Audio Player

The default WordPress audio player takes all the available width in your post area. Compact WP Audio player solves this by adding a smaller audio player that can be easily adjusted to meet your needs.

Compact WordPress Audio Player plugin is an HTML5 + Flash hybrid based WordPress plugin which can be used to embed an mp3 audio file on your WordPress post or page using a shortcode.  Its fully responsive and will automatically adjust to fit on any users device.

Simple Audio Player

Simple Audio Player is a highly configurable and lightweight audio player plugin for WordPress. Instead of using HTML5 as the default playback option, Simple Audio Player uses flash as the default and HTML5 as the fallback.

The plugin also provides easier options to change the color and size of the media player. Simple audio player plugin lets you enter audio playlists and tracks using a shortcode.

Audio Album

Audio Album plugin is written for the purpose of displaying audio playlists and albums using the built-in WordPress functionality.

Audio Album extends this functionality by offering an easier way to style your media player and the appearance of your albums.
It can also be used to add single tracks. The plugin comes with easy to use shortcodes that offer plenty of options.

It lets you display as many albums as you’d like on your site including multiple on a single page or post.