This tutorial shows you how to add audios to your WordPress site using the WordPress Classic Editor interface.

To learn how to add audio files in WordPress using the WordPress Gutenberg interface, go here: Using Audio Blocks.

***

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!

Complete the step-by-step tutorial below to learn how to add audio files to WordPress.

How To Embed Audios In WordPress: 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) …

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 Embed Audio In Earlier WordPress Versions

In earlier versions (e.g. v 3.5) WordPress did 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!

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

Compact WP Audio Player

Compact WordPress Audio Player plugin is an HTML5+ Flash hybrid based WordPress plugin that can be used to embed an mp3 audio file into your WordPress post or page using a shortcode. The plugin adds a compact audio player that will play on all major browsers, and supports .mp3 and .ogg file formats. The audio files that you embed into your posts and pages using this plugin will work on all devices.

HTML5 AUDIO PLAYER

This compact and responsive audio plugin for WordPress supports .mp3 and .ogg file formats and works on all browsers and devices. You can add audio files and audio previews to your WordPress posts and pages using a shortcode.

Here’s another WordPress plugin you can look at if you plan on adding podcasts to your WordPress site …

Blubrry PowerPress Podcasting

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

You can browse additional audio plugins for WordPress here.

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 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 …“

(Download audio files)

Adding Audios To Your Sidebar

In version 4.8, WordPress introduced a WordPress Audio Widget that lets you add audio files like podcasts, music or a personal greeting to your sidebar from your media library or an external storage location …

(Add an audio to your sidebar with the WordPress audio widget)

To learn how to add and display audios in your sidebar using the WordPress audio widget, see this tutorial:

• How To Use And Configure WordPress Widgets – Part 4

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

To learn how to manage, track and control your file downloads in WordPress, see the WordPress Management tutorials module below:

• WordPress Management Tutorials

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 insert audios into your WordPress posts and pages.

***

***