How to display audio with shortcodes on your WordPress site (2024)

Displaying audio files on your website with the WordPress audio shortcode is pretty limiting. While the default audio player is a bit limited, you can use the right WordPress plugin to help you better manage audio files on your website.

In this article, we’ll see how you can display audio files on your website more effectively, such as in a searchable table view.

There are multiple reasons why you’d like to integrate and display audio files on your website:

While the possibilities are endless, displaying audio files on a website can have many benefits. We will also see how you can make the most out of WordPress audio player by displaying it in searchable and sortable tables using Posts Table Pro.

What is WordPress audio shortcode?

The WordPress audio shortcode helps embed and display audio files into WordPress posts and pages. While the purpose is the same, the term 'WordPress audio shortcode' can mean two different things:

• The default WordPress shortcode
• A shortcode added by a WordPress plugin

Let's look at both of these in more detail.

Default WordPress shortcode

The default WordPress shortcode helps you display audio files on your website easily. Since WordPress uses HTML5 to embed audio, it is compatible with most web browsers out there.

With the default audio player, you can easily add .mp3, .m4a, .ogg, and .wav files. You simply need to add the audio files to your website’s media library and add it to your website using the default WordPress shortcode.

Shortcode added by a WordPress plugin

On top of the default WordPress shortcode, you can use advanced WordPress plugins to display multiple audio files, such as podcasts and music albums in a searchable table and grid view using a plugin. These plugins can help you enhance the power of the audio shortcode plugin and take it to the next level.

For example, if you want to create a searchable audio library on your website, such as a podcast, you can use the Posts Table Pro plugin. This plugin can display the default WordPress shortcode in a grid format with advanced table options such as search, filter, and even sorting.

Depending on your use case, you can use both the audio shortcode and external plugins on your website. In the next section, I’ll show you how to use the audio shortcode and Posts Table Pro on your website.

How to use the default WordPress audio shortcode

Using the default WordPress audio shortcode is pretty straightforward. You either need to host the audio file on your website or add the URL of the audio file you want to display.

You can upload the audio file on your website by opening the media library page and adding the audio file using the Add New button. For this, you can either drag and drop the audio file or simply locate it using the Select Files button.

If you don’t have the audio file on your website, you can also use the live URL of the audio file hosted somewhere else.

Once you have the audio files, you can display them using the WordPress audio shortcode. Here’s how you can do it.

Open the page or post using the WordPress editor. Now click on the ‘+’ icon and look for the audio widget. Click on the widget and add the file by either uploading it, selecting from the media library or inserting it using the URL.

Alternatively, you can use the [audio src=""] shortcode to display the audio player on any post or page on your website. You just need to add the URL in the src tag.

For example, this is a preview of a podcast interview audio file on the Barn2 website.

[audio src="https://barn2.com/wp-content/uploads/2016/11/Barn2-Media-WordPress-Plugin-Podcast-Interview.mp3"]

And the shortcode for this player looks like this:

[audio src="https://barn2.com/wp-content/uploads/2016/11/Barn2-Media-WordPress-Plugin-Podcast-Interview.mp3"]

You can repeat the audio shortcode multiple times with different URLs to display multiple audio files on the same page. You can even create a playlist on your website using the [playlist] shortcode or using an audio playlist plugin.

Enhancing your audio players with the best WordPress audio shortcode plugins

While the default WordPress shortcode is easy to implement, it lacks many basic features, such as the option to search, sort, or even filter audio files. If you add multiple audio files to your website, the only way your users can find a particular audio file is by going through each audio individually. You can improve this by using a WordPress audio shortcode plugin.

Broadly, there are two types of plugins for improving WordPress audio shortcode:

While these plugins have different purposes, you can still mix and match them based on your website's needs.

Here is a list of our top plugin recommendations for enhancing the default WordPress audio shortcode.

Posts Table Pro

Posts Table Pro is designed to help users display any form of content in a table format. Be it audio, video, images, or even text, you can display it all in a well-structured table format.

You can use Posts Table Pro to create a filterable and sortable audio library easily on your website.

For this, you’ll still be using the WordPress audio shortcode, but to display them in a sortable format, you need to add them to individual posts. You can add them to your website’s posts, but if you have multiple audio files, this can clutter up your posts.

To deal with this, you can use the free Easy Post Types and Fields plugin. With this plugin, you can create a custom dedicated post type (such as “Audio”) to reserve a dedicated space on your website to organize your audio embeds. You can even use tags and categories to easily manage and group your similar audio files within the custom post type.

Once you have created a post type and added all of your audio tracks as single posts, you can use the Posts Table Pro plugin to display your audio files in a tabular format.

For this, you just need to use the quick table builder to create a table listing the posts in a searchable table on your site. Apart from the Easy Post Types and Fields plugin, this plugin is also compatible with other popular audio plugins such as Waveplayer (featured later) which can be used to change how the player looks.

Document Library Pro

Document Library Pro is quite similar to Posts Table Pro, but there are some key differences. Although the plugin is primarily designed to display audio files, it fully allows you to display embedded audio files. Just like Posts Table Pro, you get a table view with search and sorting options. In addition, you also get a grid view and a folder view.

With Posts Table Pro, you need to create a custom post type for your use case so its content can be displayed easily. On the other hand, the Document Library Pro plugin comes with a Documents post type that you can use to embed and manage your audio tracks.

Once you have added the audio content to the Documents post type, you can directly display it by using the [doc_library] shortcode. The [doc_library] shortcode is not just limited to displaying audio files in a simple table. In fact, you get multiple customization options, and you can make changes to the design and work on the table rendered by the Document Library Pro plugin.

WavePlayer

WavePlayer lets you embed audio files with a more attractive and functional player. If you plan to sell audio, WavePlayer comes with full integration with WooCommerce. You get a product player, cart buttons, and even music variation popups to create a WooCommerce audio store on your website.

In addition to all the design customizations, WavePlayer fully integrates with Posts Table Pro and Document Library Pro. If you are embedding an audio track in a table, you can still make all the customization and changes to the audio player.

If you want, you can choose a different skin for your player, and you are not limited to one skin per website. You can even have multiple players with different skins on the same page.

Compact WP Audio Player

Compact WP Audio player is a free hybrid HTML5 and Flash-based plugin that is ideal for displaying .mp3 and .ogg files on the website.

Just like the default WordPress audio shortcode, you can embed this player using the shortcode [sc_embed_player fileurl="MP3 file URL"]

The player itself is pretty compact and does not take a lot of real estate on your website, thus making it appealing for most websites' styles.

The Compact WP audio player plugin works seamlessly with Posts Table Pro and Document Library Pro. If you want to show the player's intuitive interface in a tabular or grid format, you can do that easily.

Start displaying audio files on your website today!

There are many benefits of displaying audio files on your website. You can showcase your music, podcast, or any other audio content and share it with the world.

In this article, we covered two different ways to display audio files on a WordPress website. You can use either of the methods to display audio files, but if you want to display multiple tracks on a single page, I highly recommend using Posts Table Pro or the Document Library Pro plugin. They both are perfect for displaying audio files as they have:

In addition to all these features, you get access to world-class support from the Barn2 team. And if you don’t find the plugin fit for your use case, you are always covered with our 100% money-back guarantee!

All set to create your own audio library using WordPress audio shortcode? Get the Posts Table Pro plugin now and start creating your own audio libraries.