WordPress offers the ability to add different types of media to your posts. The audio files are a lesser known/used feature in a medium which celebrates the written word. Nevertheless, there are times when there is a need for adding audio to your site, and you can do it easily with the inbuilt functionality provided by WordPress. Here is how you go:-
Adding Audio Files to Posts/Pages
If you want to add an audio file to a post or a page, you can do so from the post/page editor.
#1. As you type in the textual content for the post, at the point where you want to show the audio player, click on Add Media button.
#2. If you have the audio file already uploaded, choose it from the Media Library.
#3. If not, go to the Upload Files tab and try to upload the files.
#4. Audio files and other media files are usually big in size. The default PHP maximum upload files size is 2M. So, you may encounter this error that your selected file exceeds the maximum upload file size.
#5. In such a case, go to the php.ini file and look for this line:
upload_max_filesize = 2M
Change it to
upload_max_filesize = 64M
#6. Restart the apache server and then retry to upload the file. You should see the new size on the Upload Files screen.
#7. On uploading the file and then inserting the media, you will get a player in the post editor.
#8. The published post will also have a similar player which can be used to start/pause/stop the audio. You can adjust the volume of the audio clipping too. This is the default audio player that comes with WordPress.
The Audio Shortcode:
Instead of using Add Media button, you may also use the audio shortcode to insert audio. Click on the Text tab of the post editor and you can see the audio shortcode for the clipping that you just uploaded.
The default audio shortcode looks like this. Add the source file of the audio as an argument within the shortcode which would look like this.
The audio player can use audio files in various formats. The supported formats are mp3, ogg and wav formats. You can include fallbacks for the other supported audio formats like this.
Do you want to play the audio clipping continuously in a loop? Do it with the loop argument. By default, the loop is set to “off“. Set it to “on“;
When a visitor reaches a page, do you want to start playing a clipping automatically? You can do it with the autoplay argument.
The default is false or 0. Set it to true or 1.
Some sites auto play a clipping in loop mode in the background whenever a visitor visits the site. This can be achieved with the audio shortcode with loop and autoplay set, besides some extra CSS, i.e., by setting the “visibility:hidden” for the audio player.
However, be cautious while doing something like this. Consider the user experience too. A user who does not want to listen to some background music doesn’t have any choice but to listen to the clipping continuously. This might put your visitor off.
Sometimes, in a music site or an audio-focussed site, there is a need to display a playlist instead of a single audio file.
Playlists can also be easily created in WordPress. Follow the instructions below.
#1. From the post/page editor, click on Add Media. Now, click on Create Audio Playlist.
#2. The Create Audio Playlist screen comes up. You can add the required (already uploaded audio files or you can upload them from the Upload Files tab)audio files and then click on Create a new playlist button.
#3. The files are included and the Edit Audio Playlist page appears where you can choose the settings for the playlist. You can choose to show or hide the tracks list, the artist names and the thumbnail images. These can also be done using the playlist shortcode (described in the next section in detail). Now, click on Insert audio playlist button.
#4. You can save the post and view it. You will see a playlist with the thumbnail image, details of the playlist, the audio player and finally a numbered listing of the tracks with the artist names and the time duration.
Take a look at the Text tab of the post editor and you will see the playlist shortcode with the ids of the tracks (or uploaded audio files) to be included.
The Playlist Shortcode:
Instead of creating a playlist using the Add Media button, you can also use the playlist shortcode in the post editor.
The basic format is to add the IDs argument with a comma separated listing of the IDs as shown above.
How to Find the Ids of the Audio Files?
1. Go to the media library and filter out the Audio files.
2. Click on the audio file to edit it. In the Edit Media screen, you can see the id on top in the url.
3. Now that you know how to use the basic playlist shortcode, let us look at the various options available.
4. You can change the style of the playlist using the style argument. Set it to dark or let it be the default light.
5. The playlist has a dark style now, and this looks good on light backgrounds.
6. You can choose not to display the track list by setting it to false or 0 instead of the default true or 1.
7. You will see the playlist details and the audio player only.
8. You can change the order of the ids to change the order of the tracks in the playlist.
9. You can also set the tracknumbers argument to false or 0 instead of the default true or 1 to hide or show the track numbers respectively.
10. Take a look at the playlist with the track numbers hidden.
What if you don’t want to display the thumbnail image on top? You can do so by setting the images argument to false or 0 instead of the default true or 1.
Here is the playlist without the thumbnail.
And finally, why not remove the artist names too?
Use the artists argument and set it to false or 0 instead of the default true or 1 to hide or show the artist names respectively.
Here is the playlist with the artist names removed.
So, there you are. Two different ways of using and displaying audio files on your site – either single or as a list. Use the shortcodes for the quick and easy addition of the audio files. Play around with the arguments or a combination of them to achieve the desired result that you have in mind.
Isn’t that awesome?
- Now Read: Top WordPress Audio Player Plugins
Audio files courtesy: DLSounds
This article is contributed by Menaka S, a WordPress developer, who loves to pen down the learning and thoughts of her day-to-day work. You can follow her on her Twitter handle @smenaka.