4 Simple Ways to Add Audio to Your WordPress Site

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Do you have audio files you want to share with your audience? Facebook won’t let you… unless you resort to frustrating trickery like sharing an audio file in Dropbox or converting it to video. But if you’re hosting your own WordPress website, nothing could be easier.

If the mention of adding audio to websites gives you pause, let me explain. I’m not talking about adding cheesy background music to an animated-GIF-laden GeoCities site.

Though it’s not a good idea to add music to your site just for the sake of it, there are some good and valid reasons to include audio in your website. Here are a few:

• A musician sharing samples of her music.
• A podcaster making his shows available.
• Schools, churches and event websites allowing visitors to listen to seminars, sermons or keynotes.
• Teachers, trainers and educators including audio examples in their online lessons.
• Bloggers adding bonus content to their site, for example, interviews.

You may not realise this, but WordPress is capable of handling audio files by default. It’s not hard—if you know how to insert an image in the post, you won’t have any problems inserting audio.

Before HTML5 there was no standard way of playing audio on a web page. Flash was widely used. It wasn’t pretty. WordPress uses HTML5 to embed audio, so it’s compatible with most browsers and devices, including mobile devices.

There are other ways to include audio in your site. These include embeddable players by third parties (including audio library sites), and WordPress plugins. These give the benefit of additional features, and the ability to use audio from library sites.

Of course, only use audio files you can legally use. This would include audio you created yourself, audio you have licensed from others, and royalty free audio. The sample audio used in this article comes from YouTube’s Audio Library of free music.

1. Use the WordPress Audio Player

The easiest way to add audio to your website is with WordPress’ native audio player. Unless you have specific needs, there’s little reason to look elsewhere.

You can add .mp3, .m4a, .ogg, or .wav files to your WordPress media library. From there you can insert it into your post, along with an optional caption.

Here’s how:

1. Click the Add Media button.
2. Drag your audio file onto the library, or click the Upload Files then Select Files to add your audio content to the Media Library.
3. At the right on the screen, fill in the relevant metadata for the audio file, including title, artist, album, caption and description.
4. Make sure the Embed Media Player option is selected to allow your readers to play the audio file from your post.
5. Click Insert into Post.

Here is a screenshot of the Media Player after some audio files have been added. You can fill in the relevant metadata for the file in the panel on the right.

And now a text view of a post after an image has been added (see the second paragraph). The screenshot also demonstrates a few other ways to add code for the audio player manually.

And this is what the post looks like when previewing, or after it is published. A mini player is displayed for the audio file. Note that the player looks the same for all three methods.

Live Example

Try clicking on the audio file below to hear it play.

[audio mp3="http://ift.tt/2tFCW09"][/audio]

You don’t have to store audio files in your WordPress Media Player. Storing them on another server will take the load off your web hosting, saving you storage space, system resources and bandwidth. In that case, use the same audio shortcode, but with the correct URL for the audio file.

The audio file can be looped or autoplayed by adding some options to the code (see the Audio Shortcode page on WordPress.org). To change the color of the media player, you need to use custom CSS like this:

.music-player .wp-playlist-light,
.music-player .wp-playlist-light .wp-playlist-playing {
    background: #999;
    border-color: #999;

Alternatively, if additional functionality or customizing the appearance of the media player is important to you, check out the plugins below.

Continue reading %4 Simple Ways to Add Audio to Your WordPress Site%

by Adrian Try via SitePoint