How To Add Audios In WordPress

How To Add Audios In WordPress

Sound speaker iconThis tutorial covers:

WordPress provides a built-in audio player and a range of options for embedding, integrating, and streaming audios on your site.

WordPress audio player.
WordPress provides a built-in audio player.

You can upload and insert audio files into your content from the WordPress Media Library or from a remote server location (e.g. Amazon S3), and control how your audios play and display to visitors using various themes and plugins.

For this reason, we’ll also be exploring these areas in this tutorial.

Let’s begin by learning how to use the built-in WordPress audio player with the WordPress Media Library.

info

This tutorial uses the WordPress Classic Editor. If you are using the WordPress Block Editor, we have written a complete step-by-step tutorial on adding audios to your posts and pages here: How To Use The Audio Block

Adding Audios To WordPress Posts And Pages

You can audio files to your content using:

  • oEmbed – Add the URL directly.
  • Audio shortcode – Add an audio file using a shortcode.

Let’s go through each of these methods.

oEmbed

As stated in the official WordPress documentation site

It’s super easy to embed videos, images, tweets, audio, and other content into your WordPress site.

WordPress uses a technology called oEmbed to embed audios into content.

With Amazon S3, for example, simply copy the audio’s URL to your clipboard…

S3 Browser - Web URL Generator.
Copy the audio file’s URL.

And paste it into your content in its own line without any formatting…

Add Media screen - Content editor with paste audio url here placeholder.
Paste the audio URL into your content.

As soon as you paste the audio URL into your content…

Add Media screen - Audio URL pasted into content.
Audio URL pasted into content.

WordPress automatically converts the URL into audio using its own built-in audio player.

Audio embedded into content.
The audio is automatically embedded into your content.

Remember to click on the PLAY button after embedding an audio file to test and make sure that everything is set up and working correctly.

Test your WordPress audio player.
Test your WordPress audio player.

Audio Shortcode

You can also embed audio files into your content using the WordPress audio shortcode.

WordPress audio shortcode.
WordPress audio shortcode.

To embed an audio file into a WordPress post or page from the Media Library, just add the audio filename inside the audio shortcode as shown below, then publish.

WordPress audio shortcode with Media Library audio file.
Embed an audio file from the Media Library using this shortcode.

To embed an audio file from an external URL, use the shortcode format below.

Audio shortcode for playing an audio file from an external URL.
Use this audio shortcode to play an audio file from an external URL.

You can also add additional information to shortcodes, such as fallbacks for other HTML5-supported filetypes.

WordPress audio shortcode - fallbacks for other HTML5-supported filetypes.
Add fallbacks for other HTML5-supported filetypes to your audio shortcode.

Remember 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 than the default player shown below.

Default WordPress audio player.
Default WordPress audio player.

Also, the audio player is responsive and will auto-adjust to fit the width of your post/page and device screen.

WordPress audio player viewed on a simulated mobile device screen.
The audio player resizes to fit your screen.

Uploading Audios To The WordPress Media Library

WordPress supports uploading the most commonly used audio file types to the WordPress Media Library.

To upload audios to the WordPress Media Library:

First, add your audio files to a folder of your internal or external hard drive that you will be able to easily locate.

Computer folder with audio files.
Add the audio files to a folder on your hard drive.

Next, go to your post or page, place your cursor where you want to insert the audio into your content, and click the Add Media button.

WordPress Classic Editor - Add Media button.
Let’s add an audio to this post.

This will bring up the Add media screen.

Select the Upload files tab and click on the Select Files button. (Note: you can also drag and drop the audio file from your stored folder location into this area).

Add media screen: Upload files tab - Select Files button.
Click the Select Files button in the Upload files tab to import your audios to the Media Library

Locate the folder where you have stored your audio file, select the file, and click the ‘Open’ button.

Composite image - Add media screen and hard drive folder with an audio to be uploaded.
Select the audio to upload from your hard drive and click the Open button in the Uploader browser.

This will upload your audio file to the Media Library.

Once the audio file has been uploaded:

  • Add information about the audio file (e.g. caption and description) to help users and search engines understand what your audio is about (if you need help with this section, see this tutorial.)
  • Select ‘Embed Media Player’ in the Attachment Display Settings > Embed or Link section’s dropdown menu.
  • Click the Insert into post (or Insert into page) button.
Add media screen with audio file selected and Import into post button circled.
Select your audio and click the Insert into post button.

The audio file will be added to your post.

Edit Post screen - Audio inserted into post.
Audio inserted into post.

Inserting An Audio File From An External URL

To insert audios hosted on an external platform (e.g. Spotify, Amazon S3, etc.) into your content, do the following:

First, copy the URL of your audio from its external hosted location to your clipboard, then go to your post or page, place your cursor in the location where you would like to insert the audio, and click on the Add Media button.

WordPress Classic Editor Add Media button with cursor placed in content.
Let’s add an audio from an external URL.

In the Add Media screen, select Insert from URL.

This will bring up the ‘Insert from URL’ screen.

Paste the audio URL from your clipboard into the field and click the ‘Insert into post’ (or ‘Insert into page’) button.

Insert from URL screen.
Add the audio URL in the Insert from URL field and click the button.

Your audio will be added to your content and placed in the location you have specified.

Edit Post screen - Audio inserted into post.
Audio inserted into post.

info

Note: Not all audios will work with the oEmbed function and autoembedding doesn’t seem to work in all situations.

For security reasons, WordPress only allows audios from certain approved sites to be autoembedded into posts and pages. The WordPress oEmbed library currently supports various popular audio media services like Mixcloud, ReverbNation, SoundCloud, Spotify, etc.

To see the complete list of oEmbed supported audio sites go here.

If the audio you are trying to add to your content does not play after publishing your page or post, check that:

  • You have copied and pasted the correct audio URL.
  • You have enabled the correct permissions for playing the audio file.
  • The audio file is hosted on a WordPress-approved media service (e.g. Mixcloud, ReverbNation, SoundCloud, Spotify, etc.)

If none of the above options work, use one of the alternative methods shown further below to embed audios into your posts and pages.

Adding An Audio Playlist

WordPress has a built-in audio playlist feature that lets you play a sequence of audios from one location on your post or page.

To insert an audio playlist into your content, first make sure you have uploaded the audios to your Media Library.

Next, open your post or page, place your cursor in the location where you would like to insert the audio playlist, and click on the Add Media button.

WordPress Classic Editor - Add Media button with cursor placed in the content.
Let’s add an audio playlist.

In the Add media screen, select the Create audio playlist option.

This will bring up the Create audio playlist screen with all of the Media Library’s uploaded audios.

Create audio playlist screen.
Select Create audio playlist.

Select the audios you want to add to your audio playlist and click on Create a new audio playlist.

Create audio playlist screen - audios selected.
Select the audios for your playlist and click the Create a new audio playlist button

This will bring up the Edit audio playlist screen.

In this screen, you can perform various editing functions to your audio playlist, such as:

  • Remove or add audios to your playlist.
  • Drag and drop to reorder audios.
  • Reverse the order of your audio playlist (click on the ‘Reverse order’ button).
  • Display the audio Tracklist, artist name in Tracklist, and images in your playlist settings.
  • Cancel editing the audio playlist.

After configuring your audio playlist options, click the Insert audio playlist button.

Audio playlist
Configure your audio playlist options and click the Insert audio playlist button.

This will insert the audio playlist into your content.

Edit Post screen - Audio playlist added to content.
Audio playlist added to content.

Update your post or page. Your site visitors can now listen to the audios in your playlist.

Audio playlist in content.
Your visitors can now enjoy your audio playlist.

Editing Your Audio Files In The Media Library

To edit your audio file, do the following:

Go to your site’s Media Library to view and edit details about your audio files.

If there are a lot of media files uploaded to the media library, use the filter function to select and display only your uploaded audios.

Media Library screen: Media filter - audios selected.
Filter your Media Library items to display uploaded audios.

Click on an item to bring up details about the audio.

Edit Media screen.
Edit audio file elements in the Edit Media screen.

Details you can edit about your audio in the Edit Media screen include the following:

  • File Name – You can change the title of your audio (WordPress automatically assigns a default title based on the uploaded audio’s filename.)
  • Permalink – Edit the audio slug. Note: to edit the permalink, the audio must be attached to a post or page. The permalink cannot be edited for unattached audios.
  • Caption – Add a caption to your audio file. Note: audio captions display in places like audio playlists.
  • Description – Displays in your audio file’s attachment page.
  • Metadata – Add metadata like the Artist and Album name.

The Edit Media screen also lets you view information about your audio, such as:

  • Filename
  • File type (e.g. .mp4, .mov, etc.)
  • File size
  • Audio length
  • Audio bitrate

If you are editing an audio file in a post or page, you can access the Edit Media screen by clicking on the audio (or audio playlist) and then clicking the Edit button (pencil icon).

WordPress Classic Editor - Edit audio button.
Click the Edit button.

This will bring up the Audio details screen.

Audio details screen.
Edit your audio’s details in the Audio details screen.

In the Audio details screen, you can:

  • Replace your audio file.
  • Remove the audio source and add alternate audio sources for maximum HTML5 playback across all browsers and devices.
  • Select Preload settings:
    • Auto – This downloads the entire audio file as soon as the page loads, regardless of whether the visitor clicks the Play button or not. Note: this setting has the biggest impact on your page or post’s load speed, especially with larger audio files.
    • Metadata – Only basic info about your audio file is preloaded: dimensions, first frame, tracklist, duration, etc. Like the None option, your audio file only begins downloading when someone clicks the Play button. This setting is very fast, as the only thing downloaded is text.
    • None – No audio preloading takes place automatically. Your audio file only begins downloading when someone clicks Play. This is the fastest setting. Note: there’s not much difference between selecting Metadata and None.
  • Enable/disable Autoplay – The audio will begin to play as soon as the page is loaded.
  • Enable/disable Loop – The audio will play to the end and automatically begin playing again.

Removing Audios From Your Content

If you are working on a post or page and want to remove an audio file (or audio playlist) from your content, click on the audio (or audio playlist) and then click the Remove button (X icon).

Click the Remove audio button.
WordPress Classic Editor – Remove audio button.

This will remove the audio from your content.

To delete the audio file from your media library, go to the Media Library, then either:

Hover over the media item (in List mode) and click on the Delete Permanently link.

Media Library: List View - Delete Permanently link.
Click on Delete Permanently (List view)

Or click on the file to bring up the Edit Media screen and click on the ‘Delete permanently’ link.

Edit Media screen - Delete permanently link.
Click on the Delete permanently link in the Edit Media screen.

This will permanently remove the audio from your Media Library.

Enhancing Your Site’s Audio Capabilities

Although WordPress does come with a basic built-in audio player, its options are limited.

If you plan to make audios an integral part of your site, you may want to go beyond the default WordPress audio player and look at using themes and plugins to enhance your site’s audio capabilities.

Audio-Friendly Themes

Some WordPress themes come with a built-in audio player or audio enhancement features.

You can search for free themes with audio capabilities inside your WordPress dashboard or choose one of many excellent premium themes for additional features and access to technical support.

Add Themes screen - WordPress themes search results for audio keyword search.
Many WordPress themes are suitable for displaying audios.

If you need help finding WordPress themes, see this tutorial: Where To Find WordPress Themes

Audio Player Plugins For WordPress

Here are some free audio player plugins for WordPress that you may want to check out:

CP Media Player

CP Media Player.
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.

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

For more details, go here: CP Media Player

Compact WP Audio Player

Compact WP Audio Player.
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.

For more details, go here: Compact WordPress Audio Player

HTML5 AUDIO PLAYER

HTML5 Audio Player
HTML5 Audio Player

HTML5 Audio Player is a 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.

For more info, go here: HTML5 Audio Player

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

Blubrry PowerPress Podcasting

PowerPress.
PowerPress.

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

For more info, go here: PowerPress Podcasting Plugin

For additional information on using podcasts with WordPress, see this tutorial: Content Marketing With WordPress – Podcasts

Adding Downloadable Audio Files To WordPress

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.

Media Library screen.
Let’s turn this audio file into a downloadable link.

Next, open the post or page where you want to insert the download link to your audio file.

With the Visual tab selected, place your cursor in the content where you want to add your file download link, then click on the Add Media button.

Add New Post screen - Content editor
Select where you will add the audio link and click on the Add Media button.

Select the audio file you want to insert into your post or page, make sure that Media File is selected in the Link To drop-down menu in the Attachment Display Settings section, and click on the Insert into post button.

Addmedia screen - Select audio file and insert into post.
Select the audio file, link to Media file, and insert into post.

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

Post screen with audio download link.
Audio download link added.

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…

Sample post with downloadable audio file link.
Right-click on the audio link to download the audio file to your hard drive.

tip

WordPress Audio – Useful Tips

Tip #1: It’s a good idea to add some helpful text for visitors like download instructions, so they will know how to download your audio file.

Downloadable audio file download instructions.
Add helpful instructions for downloading 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: To monitor information about your downloads, consider using download management or link tracking plugins.

Additional Information

  • Some mobile platforms may not display certain 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. audios and videos), 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.
SoundCloud.

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.

SoundCloud is Gold.
SoundCloud is Gold.

Adding Audios To Your Sidebar

You can also add audios from your Media Library or an external storage location to your sidebar using the Audio block.

An audio file added to the sidebar.
Add audios to your sidebar.

This is done via the Widgets screen.

Widgets screen.
You can use widgets to add audio files to your site’s header, footer, and sidebar areas.

To learn how to add and display audios in your sidebar using widgets, see this tutorial: How To Use WordPress Widgets

Congratulations! Now you know how to add audios to your posts and pages in WordPress.

Equalizer bars
Adding audios to your posts or pages in WordPress is easy!

To learn how to add audio files using the WordPress Block Editor, see this tutorial: WordPress Block Editor – Audio Block

***

Print Friendly, PDF & Email

Terms Of Use | Privacy Policy

Scroll to Top