WordPress

4 Simple Ways to Add Audio to Your WordPress Site

    Adrian Try
    Share

    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.

    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.

    2. Create a WordPress Audio Playlist

    Do you have more than one audio file to share? Support for playlists is also build right into WordPress. Here’s how to get started:

    1. In your Media Library, click on Create Audio Playlist.
    2. Select the audio files you’d like included in the playlist.
    3. Add any relevant metadata for the playlist, then click Create a new playlist.
    4. Select the required options (for displaying the track list, artist name and artwork), then click Insert audio playlist.

    Here is the screen you see after clicking Create Audio Playlist from the Media Library. That option is only available if there are audio files in the library.

    Here are the options you can choose for your playlist.

    Here’s a text view of a post with the playlist shortcake added.

    And here is how it looks once published.

    Live Example

    Here’s an embedded playlist you can play with.

    3. Embed Audio with SoundCloud’s Player

    SoundCloud is a popular service created specifically for sharing music online. It’s basically YouTube for audio. You can use SoundCloud to host the audio you embed in your website. Alternatively, there may already be content on SoundCloud you’d like to share with your website visitors.

    In either case, SoundCloud makes it easy to embed their content on your own website:

    1. Any audio file on SoundCloud that allows embeds will have a share button under the audio file. Press it.
    2. Click on Embed and choose either the large square player or smaller rectangular one. Choose any options you require.
    3. Copy the code and paste it into your post.

    Here is the screen that’s displayed after clicking the “share” button on SoundCloud. Click on Embed at the top, and select the options you like. Do not check the “WordPress code” box unless your site is hosted at WordPress.com.

    Here’s what the code looks like when pasted into your post.

    And here is what the SoundCloud player looks like once your post is live.

    You can also use the plugin SoundCloud is Gold, which we’ll include below.

    Other audio library sites, including Audiomack provide a similar embeddable players.

    4. Use a WordPress Audio Plugin

    If you’re looking for extended functionality or greater configurability than the WordPress Audio Player supports, grab a plugin. Here are some highly rated options that might have what you’re looking for.

    Compact WP Audio Player
    Active installs: 40,000+
    Rated: 4.3 out of 5 stars (49 reviews)

    This audio player is much more compact than the default. It appears as just a play icon. It supports .mp3 and .ogg audio formats.

    MP3-jPlayer
    Active installs: 30,000+
    Rated: 4.1 out of 5 stars (68 reviews)

    A flexible multi-player audio plugin that expands WordPress’ native shortcodes with new functions and options. Has style, color and layout options, a drag and drop interface, and plays media from your media library, uploaded folders, and URLs.

    Soundy Background Music
    Active installs: 20,000+
    Rated: 4.7 out of 5 stars (22 reviews)

    This plugin automatically plays an audio file whenever a page is being viewed. An optional play/pause button can be displayed.

    SoundCloud is Gold
    Active installs: 20,000+
    Rated: 4.2 out of 5 stars (21 reviews)

    This plugin is an excellent way of integrating your SoundCloud content into WordPress. If you’re a big user of SoundCloud, this one is for you.

    Seriously Simple Podcasting
    Active installs: 10,000+
    Rated: 4.8 out of 5 stars (126 reviews)

    An easy-to-use podcasting solution for WordPress. Powerful features, but simple to use. A growing library of add-ons is available, including a free statistics add-on.

    mb.miniAudioPlayer
    Active installs: 10,000+
    Rated: 4.6 out of 5 stars (44 reviews)

    A easy-to-use skinnable audio player. The online skin editor makes it easy to customise the appearance of your player.

    Audio Album
    Active installs: 3,000+
    Rated: 5 out of 5 stars (6 reviews)

    An excellent plugin for creating as many configurable playlists for your website as you like.

    Adding audio to your site is just one of the many interactions you can do with WordPress. If you’re looking for feature-rich managed WordPress hosting, check out our partner, SiteGround, which also provides free website migrations.

    Do you include audio on your site? Which method do you use?