'This tutorial will show you how to create a WordPress audio library or MP3 player using the Document Library Pro plugin. Your visitors will be able to find and play audio tracks directly in a searchable and sortable table. They can play individual audio tracks or even complete audio playlists.
Audio galleries are a popular feature of many websites. There are lots of reasons for wanting to know how to create a filterable music library or audio track directory. You may be a band, artist, composer or musician and want to display your music or sound effects on a single directory page with embedded audio. Maybe you're a CD and want to include a track listing with samples.
You might need to provide samples as part of an audio or music catalogue or directory. Perhaps you're a voiceover artist and want to create an audio track library with examples of your work. Alternatively, your site might feature audio learning materials such as recorded tutorials or lectures, foreign language classes, or podcasts.
Whatever your reason for creating a WordPress audio library, this tutorial will show you how to do it using the Document Library Pro plugin.
The perfect WordPress audio library plugin
The Document Library Pro plugin has everything you need to create a WordPress audio library. While it has 'Document' in the name, it's perfect for listing any type of resource - including audio.
You add your audio files to the WordPress media library (or host it elsewhere, e.g. on Spotify), and the plugin displays them in a searchable table or grid. It contains embedded music tracks or MP3 players which you can listen to directly from the audio library page:
It's a really neat way of displaying audio tracks. People can listen to them, play, pause and fast forward directly within the table.
Document Library Pro also works as a WordPress audio playlist plugin. It creates a container for playlists by listing them in a table-like directory structure. You can listen to playlists and navigate between the tracks from the table. People don't have to click through to a separate page to listen to them - it's all on one page.
You can use Document Library Pro to display audio players and playlists created using the audio shortcodes that come with WordPress itself. I'll also share some third party WordPress audio plugins that can be used to display more fancy audio players.
Read on to learn how to create a searchable, filterable WordPress audio library.
What type of audio can you include in a WordPress audio library?
These days, people use audio files for a huge variety of purposes. The good news is that you can publish any of these in a WP audio library. This includes:
- Multiple audio file formatsMP3, WAV, MPEG and more.
- Types of audio recordingAudiobooks, bands, choir music, foreign language lessons, karaoke backing tracks, orchestra music, relaxing background music, samples, singles and albums, podcasts, stock music (e.g. corporate background music, royalty free music, sound effects, etc.).
- Audio from third party websitesIf you host your audio files externally, that's fine. The WordPress audio library also supports embeds from other platforms such as Mixcloud, ReverbNation, SoundCloud and Spotify.
How to set up your digital WordPress audio library
Now, we get to the tutorial part of this article. Keep reading to learn how to set up a WordPress audio library.
1. Add the audio files to WordPress
To get started, you need a WordPress website with the Document Library Pro plugin installed.
First, you need to add each audio item to WordPress as a 'Document' post. Each 'Document' will appear individually in your front end audio library. You need to do this even if your actual audio files are hosted outside of WordPress.
There are several ways to do this:
- Option 1: Add document manuallyGo to Documents → Add New in the WordPress admin and add all the information you want to display about each document. Don't worry about uploading the actual audio file yet - we'll do this in Step 2.
- Option 2: Use drag and drop file uploadGo to Documents → Import and drag and drop the audio files into WordPress. Then, go to Documents and manually edit each one as needed. For example, the name will be the same as the filename, and you can change this to make it more user-friendly.
- Option 3: Upload from CSVYou can also go to Documents → Import and upload a CSV file. This should contain all the information that you want to display for each audio track, as well as the URL where the audio file is hosted (e.g. in the WordPress Media Library or on another website).
2. Add embedded audio players
The next step is to add an embedded audio player to each of the audio items (i.e. 'Documents') that you added in Step 1. For each one, you can add either a standalone audio track or a full audio playlist.
Initially, we'll use the native WordPress audio and playlist shortcodes. Later, I'll show you how to create even more impressive-looking audio embeds using other plugins which work with the WordPress audio library.
- Go to the Documents section of the WordPress admin and click on one of the documents.
- Add an audio player to the main content area using one of these methods:
- If you plan to store the audio files in the WordPress Media Library, then you should click the 'Add Media' button and upload the file. When you insert it into the document content, WordPress will automatically convert it into a full functional audio player. It must be a valid audio file type such as MP3, AAC, WAV or FLAC.
- To embed audio files hosted on Mixcloud, ReverbNation, SoundCloud or Spotify, simply paste the URL into the content area. Again, WordPress will display this as an embedded audio player.
- If your audio files are hosted on another third party platform then you need to get an embed code. To add it, go to the 'Text' tab and paste the embed code there.
- Click 'Update' to save the document post.
Adding audio playlists
You can also add complete playlists to the WordPress audio library. If you're planning to treat the entire table as a playlist then you should add each embedded audio track as a separate 'Document' as described above. This would look like this:
Alternatively, it's also possible to add actual playlists which appear in a single row of the table like this:
To add a playlist to one of your 'Documents' - like in the second screenshot above:
- Edit the document.
- Click 'Add Media'. Instead of adding an individual MP3 file or similar, click 'Create Audio Playlist'. If you can't see this link, it's because you haven't uploaded any audio tracks to your WordPress media library yet. Once you have uploaded some audio tracks, this link will appear.
- Select all the audio or music tracks that you want to include in the playlist and click 'Create a New Playlist'.
- On the next page, you can add the track name underneath. This will appear on your playlist so make it as descriptive as possible - e.g. the song name. There are also some settings on the right, for example whether to display the artist name.
- Finally, click 'Insert Audio Playlist'. WordPress will automatically create and embed your playlist.
- Click 'Update'.
3. Create a front end WordPress audio library
Now it's time to list the audio files on the front end of your website so that everyone can see (and hear!) them.
Document Library Pro has already created a main audio library page for you. To find it, go to the Pages section in the WordPress admin and find the page called 'Document Library'. Rename this to something more relevant such as 'Audio Library' (remember to change the permalink too).
View the page and you'll see your audio files listed in a table or grid view with one on each row. However, it may not have the information that you want to display yet.
To customize it to your requirements, go to Documents → Settings. Read through the page and change the settings as needed.
Recommended settings for an audio library
Document Library Pro has over 50 options and you can set it up however you like. In particular, I recommend that you use the following options:
- Layout - Choose between a table layout with 1 audio track per row; or a grid layout with a tile for each document (like Netflix).
- Content - There are lots of available content types to choose from. For a WordPress audio library, add something like:
title, content, excerpt. This will display the title, the content field (which contains your embedded audio player or playlist), and an excerpt (which is useful for showing a brief overview of the audio file). You can rename the columns by adding a colon after each one like this:
title: Song, content:Listen Now, excerpt:Description.
- Shortcodes - Enable this option. This tells Document Library Pro to display the embedded music players in the main audio library, instead of the unrendered shortcode which WordPress has created behind the scenes.
- Links - By default, people can click on the title column to access a separate page for each audio item. The separate page will have the name at the top with the embedded audio player underneath, and any other data you've entered on the right (e.g. the file size). If you don't need these pages then add
noneto the Links option.
- Filters - If you have added categories or tags to your audio items, then add some filter dropdowns so that people can find then more easily.
- Lazy load - Enable this if you will be listing lots of audio files. This tells the plugin to load one page of the audio library at a time, speeding up the load times.
4. View the audio library
Your finished audio directory will look something like this:
This has created a professional-looking WordPress audio library listing all your music tracks. You can add as many as you like.
If you have lots or music tracks or audio playlists then the plugin will add pagination buttons at the bottom.
Restyling the audio player
So far, I've shown you how to display the built-in audio and playlist shortcodes in a searchable WordPress audio library.
Use it to create a very simple audio player, which appears as a small play button in a circle. When you click on the circle, the audio track plays and a pause icon appears within the button instead. If space is at a premium in your WordPress audio library, then this is an ideal plugin to add small audio players.
To display a compact audio player in the audio library, just install the plugin. Next, add the shortcode
[sc_embed_player fileurl="URL OF THE MP3 FILE"] to the content field for each document.
Need to add download links?
Some WordPress audio libraries simply embed the audio files on the page, like the examples above. This is very secure because visitors can listen online but can't download the files.
If you want people to be able to download the audio files, then that's fine too. You can add download links, buttons or file type icons. Visitors click on these to download the audio file to their computer.
- Go to Documents and click to edit a document.
- Find the 'Document Link' option in the top right hand corner. Use it to either select the audio file from the WordPress Media Library, or add the URL where it is hosted on another website.
- Go to Documents → Settings and add a 'link' column to your list of columns.
- Use the other link-related settings on the page to choose a style for the download links.
This will add a download column to the WordPress audio library.
Need to sell audio online?
If you want to sell audio files in your WordPress audio library then you need an e-commerce plugin. You can sell audio files using either WooCommerce or Easy Digital Downloads.
Either way, you can use our other plugins to list the audio products in a searchable table. Your audio store will look like the other screenshots in this article, but will also have 'Buy' buttons so that people can make purchases.
Selling audio with WooCommerce
The free WooCommerce plugin lets you sell absolutely anything online. Use it with our other plugin, WooCommerce Product Table, to create a searchable audio library.
For example, Dosado used WooCommerce Product Table to sell audio files with embedded music players in the table.
Read our tutorial about how to create a WooCommerce audio store.
Selling audio with Easy Digital Downloads
If you only sell digital audio files then you can also sell them using the Easy Digital Downloads (EDD) plugin.
EDD is a bit simpler than WooCommerce because it doesn't have any options you don't need, such as Shipping.
For example, Fascinated Sound use EDD with our Posts Table Pro plugin to sell royalty-free sound effects and music tracks. They list over 600 downloadable audio products in their WordPress audio library.
Each audio download is listed in a table with columns for audio player, title, description, category and add to cart button. You can click on a category in the table to filter by that category. There's also a category filter dropdown above the WordPress audio library.
Customers can listen to each track by clicking on the embedded play buttons. The play buttons were created using the free Compact WP Audio Player plugin, which works perfectly in the audio library.
We love Fascinated Sound's WordPress audio library because it's such a user-friendly way to list and sell music and other audio products.
Read our tutorial about how to list products (including audio products) with Easy Digital Downloads.
It's time to create a WordPress audio library!
So now you know how to create an audio library in WordPress. Now it's your turn. Follow the steps in this tutorial to create your own WordPress audio library or music directory. To get started, download Document Library Pro today - it's one of the best WordPress audio plugins around.
- Supports all types of audio file.
- Aimed at beginners or developers.
- Full support and documentation.
- Money back guarantee.
Good day team, i am a computer science student working on building a music archive please can you give any directive on how to create one or is a custom theme avilable for me to work on. thank you
Hi, Simi. Thanks for your comment. I'm not sure how a theme would have the functionality for what you'd like to achieve, but this article of ours has the information that you need for using our Document Library Pro plugin to create an audio library / music archive. You can also consider using its free version, Document Library Lite, albeit it of course has less features than the pro version. Best of luck with your project!
I've been looking for something like this and thought it would be the ultimate solution, but when i tried the demo on mobile (most users by on mobile nowadays), I see that the Play button is not displayed in portrait position (you expect the user to check on landscape mode). There is a plus sign that uncovers the play button but it's a no-no from a UX standpoint. Even that you had the play bar below always visible, it breaks the composition of presenting the info in one line in a more tidy way. If the play button cannot be displayed on the same row, clicking on the image or name should trigger playing the song. But as the audio progress bar couldn't be seen, you need to manage a way of displaying a small audio player progress bar as Beatstars do. Otherwise the plugin is not complete. Maybe this is already included, but more than one filter should be include ex. by genre and mood. Good work guys, hope it didn't sound sharp but wanted to go to the point. I'll wait for your answer to decide. Thanks!
Hi, Abel. Thanks for your feedback. I agree that most users visit sites using their smartphones these days and that the play button should be visible for an Audio Library table use case.
Please may I know which browser and exact device you used to view our Posts Table Pro Audio Gallery front-end demo in mobile responsive view. I ask because using even an iPhone 5/SE which has the least amount of horizontal pixels/space for its media query or viewport in portrait mode among today's entry-level phones does show the audio player's play button in the "Listen Now" column, which is the only column visible in the parent row in mobile responsive view:
You can also get in touch with us via our dedicated Support Center, where we can discuss further and in more detail.
Apologies there were some typos on my post. Here the corrections:
- *most users buy on mobile nowadays
- *you cannot expect the user to check on landscape mode
- *a small audio progres bar at the bottom of the screen as Beatstars does.
Hi again, Abel. I appreciate your follow up and no worries. Cheers.
Does the search tab shorlists songs with the words used in the description section?
Let's say I describe a song in the description field '' happy piano uptempo '', when I write '' uptempo '' in the search field, will the song appear in the results?
Yes. The search is just an exact match search, the search is done by keyword.
Should you have any other questions/concerns, kindly fill up a form at our Support Center so we can get back to you much sooner.
I'm reading about your plugin and I think it's gonna be perfect for a side project with a audio library!
We are a music studio company, who produce for adverstising. Along the years, we created a huge music database. However, this database is stored in our internal server. We want to put this online, so our employees can search our database wherever they are (and, of course, with a better UI experience), since we can reuse it in a lot of cases!
Just some doubts:
1 - There is a limit of archives that the plugin can show?
2 - Can I add a Download button on the tracks?
2 - There is a way to change the description columns without acessing the wordpress pannel? For example: When I download some of the musics on the database, I can set this to a especifc client and it starts to show on the columns?
Hi, Tico. Thanks for your comment and interest in Posts Table Pro. I'm glad you found our plugin, which I agree is exactly what you need for sharing your music database with your employees.
There is a limit of archives that the plugin can show? - Our plugin does not limit this. You can display/list/show as many archives (posts, custom post types, Media Library files) as you wish and which your WordPress site's database and web hosting account can support. It might also be worth for you to review our article about the Lazy load option for tables with many posts.
Can I add a Download button on the tracks? - Certainly - please see: Can I add links, downloads, icons or buttons in Posts Table Pro?
There is a way to change the description columns without acessing the wordpress pannel? - There are two ways that you can edit the information in the table. Please see: Can users edit posts after submitting them?
Should you have any other questions, please let me know. You can also contact us via email through our Support Center. Best regards.
I have an audio based site which I am looking to move to Wordpress, hence I have particular requirements of the library....
any visitor an play a small clip of an audio file (15s-30s),
a registered user can play or download the full version of the audio track, and multiple tracks selected for download would be zipped up.
A "contributor" could place their own content onto the site for others to access as above.
Admin level... access to everything
Each "album" of tracks, would be under an "Artist", and these may also be associated or under a Genre. Each Album page could also have pictures relevant to the album.
Is this all possible with Posts Table Pro?
Thanks for your interest in Posts Table Pro and porting over your audio files membership site to WordPress. For what you describe, you can use our plugin with one of the membership plugins that have been tested to work with ours, listed at Which plugins are compatible with Posts Table Pro? The latter will allow you to control which pages each user and access level / user role can access.
For public or logged out users, you can create/display a posts table as a WordPress audio library or directory with embedded audio tracks and playlists as described in this tutorial.
For registered users, you can use the membership plugin to allow them to access another page that includes download links or buttons for the zipped files (see Can I add links, downloads, icons or buttons in Posts Table Pro?).
I have added your ‘vote’ for a feature that allows you to download multiple files at once from the table and we will let you know if we add this in future. In the meantime, I'm sorry that this isn't possible, and you could look into having your developer add this as a bespoke or customization of the plugin. We have designed the plugin to be easy to customize and provide in-depth developer documentation to help you get started. If you don't have a developer who can do this for you, then I recommend that you post a job on Codeable where their pre-approved WordPress experts will send you a quote. We have partnered with them to provide plugin customization for our customers.
For each audio file or track, I suggest adding the album, artist, and genre as custom taxonomies, to allow you to display this data as Custom taxonomy columns in the table, as well as allow for use in a filter dropdown.
I'm really interested in your posts tables pro plugin, but I'm not sure it quite works for what I need and wondered if you might have any suggestions as to how I could 'automate' it to work how I need.
I'm looking to create a dynamic media library, so when a new media file lands in the uploads folder on the server, "something" automatically sucks the file in and creates a new post for it so that it shows up on the Posts Table Pro page. The other bit to it is that I need some way of allowing the site visitor to filter the output table by parts of the media file name. The way it would work is that every file would have the same format of file name e.g location, year, month, date and creation time - so an example might be England20190226_1806 which in this case would be location England, year 2019, month 02, date 26, creation time 18:06 then what I need is for the visitor to be able to filter by any of the attributes (perhaps not the creation time) - so as an example, they might want to see all the songs from England in Feb 2019. I know this is quite specific, but I wondered if you thought that Posts Table Pro (perhaps in conjunction with other plugin(s)) would be able to do it.
What I can't afford to do is be spending time manually updating it each time a new file lands - it needs to be totally automatic.
Hope you can help, and thanks in advance.
Hi Rob, sounds like an interesting project! You can do this by using Posts Table Pro with some custom development.
You would need to hire a developer to write a script that will automatically create a post (or custom post type) whenever a file is uploaded to the Media Library. They would also need to create custom taxonomies for the information that you want to be able to filter by, and write some code to automatically populate these taxonomies with information from the correct part of the filename. Unfortunately I don't think there are any off-the-shelf plugins to do either of these tasks, so you would need to get it done as a bespoke development. If you don't have a developer who can do this for you, then I recommend that you post a job on Codeable where their pre-approved WordPress experts will send you a quote. We have partnered with them to provide plugin customizations for our customers.
Once you have created a post (or custom post) with taxonomies and stored it in the WordPress database, you can use Posts Table Pro to list them in a table. You can add filter dropdowns above the table for each taxonomy (i.e. location, year, month, date and creation time).
Am I able to have this plugin list files from a directory instead of making a post for every item? I have a soundeffect library with around 1800 mp3 files and wouldn't want to manually create 1800 pages one at a time. Let me know if this is possible. Thank you!
Posts Table Pro can only display posts (or custom post types). To make it easier to set up, I recommend using any WordPress import plugin such as WP All Import to import all the items to the library. You can then display them in an audio library using Posts Table Pro.
Is it possible to add a filter in TablePro where I can view my audio either as list or grid (cover albums) ?
Hi Karim, yes you can add filter dropdowns above the table (instructions here). Or do you mean that you want users to be able to switch between 2 different views - a table view and a normal grid view? This is possible and there are 2 ways to do it:
Hi Katie, yes this is exactly what I was looking for! Thank you very much!
I am trying to create an audio chat or good looking library with like and dislike counter on each track (also includes share button)
The current layout I have of which I was content with is the one below
What's missing is the that counter on each track. The audio file are from a discography. It wont be a problem if you have a better suggestion. Looking forward for your urgent and prudent response.
Hi Terrence, if you use a third party WordPress audio plugin then you might be able to find one with a like/dislike counter for each track, along with share buttons. This isn't a feature of the built-in WordPress audio embed but there may be plugins with these features. If the plugins let you add the tracks to the content of your post or a custom field, then you can display it in an audio library using Posts Table Pro by following the instructions in this tutorial.