WordPress Media Library https

As well as adding text, images and videos into your content, you can also insert audio files into your WordPress posts and pages.

This lets your visitors listen to (and/or download) audio-based content such as interviews, song previews, narrated articles, podcasts, lectures, seminars, classes and more. It also helps your site to engage better with your visitors, and keeps them longer on your pages.

You can add downloadable audio files to your WordPress site, or you can embed an audio player that lets your visitors listen to audio files while on your site … or both!

In this tutorial, you will learn how to insert playable audio files into your posts and pages and how to add downloadable audio files to your site.

Watch the video below and then complete the step-by-step tutorial to learn more about adding audio to WordPress …

How To Add Audio Files To Your WordPress Site: Step-By-Step Tutorial

WordPress provides a Media Uploader feature by default that allows you to easily upload media files such as images, videos and audio files to your WordPress site …

In WordPress Version 3.6, WordPress introduced the audio shortcode …

To embed an audio file into a WordPress post or page, just add the audio URL inside the audio shortcode as shown below, then publish …

You can add additional information such as fallbacks for other HTML5-supported filetypes ….

The WordPress Media Library lets you add audio files to your site.

From version 3.6, the option to embed an audio has also been added to the Media Library …

To embed an audio into your post, select Upload Files (1) and select your audio file (2) …

Your audio will then begin uploading …

Once your audio file has uploaded, select the file you want to insert into your post or page (optional: add or modify the file’s caption or description if you want) …

WordPress Media Library https

Choose Embed Media Player from the “Embed or Link:” drop-down menu and click on the Insert into post button …

The audio will be embedded into your post using the Audio shortcode …

Just publish your post or page and the audio will display on your site, ready to play …

How To Insert Audio In Earlier WordPress Versions

In earlier versions (e.g. v 3.5) WordPress did not not come with a default media player for playing audio files.

If you are using an earlier version of WordPress, then search online and you will find a number of plugins that allow you to embed audio files into WordPress. Refer to the section further below where we go through some of these plugins.

For now, let’s take a look at how to upload an MP3 audio file in WordPress using the default WordPress Media Uploader and then go through the process of embedding the audio file into a WordPress post or page using a simple plugin and a neat feature of WordPress called oEmbed.

oEmbed allows you to autoembed certain files into a post or page (e.g. a YouTube video) simply by adding the URL in a line of its own with no hyperlinks (i.e. the URL should not be clickable when viewing the post).

The WordPress oEmbed library currently supports a number of popular audio services like Rdio, SoundCloud, Spotify, etc. For the full list of services supported go here:

http://codex.wordpress.org/Embeds

Embedding MP3 Audio Files in WordPress

First, make sure that you have the audio file you want to add to your WordPress site ready to upload, then Click on the Add Media button …

Next, upload the audio file from your computer. You can upload files in mp3, ogg, and wav formats. If you need help using the WordPress Media Uploader, this tutorial …

Once your file has been uploaded, go to your Media Library, then locate the file you want to insert into your content and click on Edit …

In the Save section, select and highlight the File URL (1), then right-click with your mouse on your selection and copy the URL to your clipboard (2) …

Note: if you are currently working on a post or page and have already previously uploaded your media files, then do this instead:

Click on the Add Media button …

Select Audio from the Insert Media > Media Library drop down menu …

Select the file you want to insert into your content and copy the URL of the file to your clipboard …

Once you have copied the audio file URL to your clipboard, open up a new plain text file (e.g. Notepad), and paste the URL from your clipboard into this file …

You will need this URL later. For now, just minimize the text file and move onto the next step.

The next step is to download, install and activate a WordPress plugin called oEmbed HTML5 audio.

All you need to do for this plugin to work is install and activate it …

This plugin converts URLs of audio files (MP3, OGG, WAV) into HTML5 audio and embeds it into posts and pages using the oEmbed technology that is used by WordPress. Audio files are embeded using HTML5 audio tag, with a Flash-based backup player for MP3 format for browsers that don’t support either HTML5 or MP3 format.

After installing and activating the plugin, bring up the text file that you created in the previous step, and copy the file URL back to your clipboard …

Open up the post or page where you want to insert your audio file into, and make sure that you are in the Visual editor mode. Scroll down your content and create a new line where you want your audio player to appear, then place a string of characters to mark this location (e.g. @@@@@@@@) …

Next, switch to the Text editor, then find and highlight the string of characters you have used as a “marker” …

Note: make sure that you select all of the line where you have added your markers. The audio URL must be placed in its own separate line with no surrounding characters. This also includes no hyperlinks!

WordPress Media Library https

Paste the URL of the audio file’s location over the highlighted characters …

After publishing your post or page, the audio player should display in the location where you have inserted the code …

Remembers to click on the PLAY button and test to make sure that you have set up everything correctly …

Note: Depending on the browser type and version used by your visitors, your audio player might display differently. Below are screenshots of the same audio player viewed on different browsers.

Here is a screenshot taken of the audio player in the Google Chrome browser …

Here’s how the audio player looks in the Internet Explorer browser …

This is how the audio player displays in the Firefox browser …

Notes: If the browser does not support the HTML5 and/or the MP3 format, then a Flash based audio player will be used instead. The flash fallback method seems to work fine for most internet browsers and platforms.

Audio Player Plugins For WordPress

Some plugins allow you a little more customization than the one we have used earlier in the tutorial. Below is a list of free audio player plugins for WordPress that you may want to look at:

CP Media Player

With CP Media Player you can publish files in the following formats: MP4, OGG, WebM, WMV, MP3, WAV, WMA and WebSRT subtitle files. This plugin is based on MediaElement.js which guarantees support for all browsers that implement the HTML5 standard. For older browsers, it supports Flash and Silverlight. CP Media Player also allows you to associate a playlist to your media player and change the look of the player to match the design of your site as closely as possible.

Some of the plugin’s main features include:

Publish an Audio player and Video player anywhere
Support for audio and video files: MP4, OGG, WebM, WMV, MP3, WAV, WMA
Support WebSRT subtitle files
Allow playlist
Supported by web browser: IE, Firefox, Chrome, Safari, Opera
Supported by mobile devices: iPhone, iPad and Android devices

WP Audio Player

WP Audio Player introduces a meta box to each post that allows you to supply the URL to any audio file and will then append the player to the end of the post. This way, you can upload your media using the WordPress built-in Media Uploader, and then use the file’s URL to add the player to your posts.

HTML5 Audio

This plugin lets you use simple functions in your theme to display audio you have attached to Posts/Pages/Custom Post Types in your Media Library. Your player is styled 100% with CSS/images (if you want). Your audio player uses your browser’s native HTML5 capabilities when available with a fallback to Flash when necessary. Allows you to play audio inline on mobile browsers that support HTML5 Audio.

Another WordPress plugin you may want to look at if you plan on adding podcasts to your WordPress site is the Blubrry PowerPress Podcasting plugin…

This plugin lets you add essential features for podcasting to WordPress and offers full iTunes support, web audio/video media players and more.

Adding Downloadable Audio Files To WordPress

Depending on your business or the topic of your blog, you may want to share your audio files with your audience. If you want to let visitors to download your audio files instead of simply allowing them to listen to audios on your site, then here’s a simple way to do it:

First, make sure that you have already uploaded the audio file to your WordPress site, or a remote server location …

Next, open up the post or page where you want to insert the download link to your audio file. With the Visual Editor tab selected, click on the location in your content where you want to add your file download link to place a blinking cursor (1), then click on the Add Media button (2) …

Select the audio file you want to insert into your post or page and click on the Insert into post button (note: make sure that Media File is selected in the Link To drop down menu in the ATTACHMENT DISPLAY SETTINGS section) …

This places a link to the media file into your content …

After publishing your post or page, anyone will be able to download your audio file by right-clicking on the link and choosing “Save Link As …“

WordPress Audio – Useful Tips

Tip #1: It’s a good idea to add some helpful text for visitors, so they will know what to do to download your audio file …

Tip #2: You can store your audio files in a remote server (e.g. Amazon S3) as .zip files and create graphic “download” buttons instead of using direct links to your media files.

Tip #3: Adding direct links to media files does not allow you to monitor information about your downloads. For a tutorial where we explain how to manage, track and control your file downloads in WordPress go here: How To Manage Downloadable Files In WordPress

Additional Information

Some mobile platforms may not display certain video and audio players.
Uploading your audio files to your own server using the WordPress Media Uploader is fine, but it can lead to your bandwidth being consumed very quickly if your audio becomes popular. For example, if the size of your audio file is 10MB and 1,000 people listen to it, that’s 10 GB of bandwidth being consumed.
If you plan to add a lot of media to your WordPress site (e.g. videos and audios), a better solution is to upload your files to a remote storage location such as Dropbox or Amazon S3, then simply copy the links of the files and paste these into your posts.
If you plan to use audio extensively on your site or share music online, then consider signing up either for a free or premium account with SoundCloud – a service created specifically for sharing music and audio online …

SoundCloud is like a YouTube for audio files. You can upload your audios to your SoundCloud account and then embed your files as single files or entire sets (e.g. a lecture series).

Additionally, if you plan to use SoundCloud, you can download a plugin called SoundCloud Is Gold, which is useful if you want to avoid embedding audio codes manually into your posts. It also lets you customize your audio player and choose the tracks you want to play …

Congratulations … now you know how to add audio files to your WordPress posts and pages!

WordPress is huge and can sometimes be overwhelming about where to start. As you move on to the next Page, you will have a clearer picture of where to start and progress to building a professional WordPress Site.