How to Add Audio Blocks to Your WordPress Site

When we think multimedia for websites, it typically conjures thoughts of graphics, photographs, and video. However, adding audio files can be a compelling way to deliver information, instruction, or inspiration to your site visitors. Now, you don’t want to make your page or post an auditory experience without reason (remember when music automatically starting on webpages was ‘a thing’?). However, there are plenty of scenarios where audio will enhance the visit to a page, such as:

• A life coach or spiritual leader sharing a guided mindfulness or meditation session.
• A music teacher providing samples of her abilities and of her students’ progress.
• Any business that has a podcast wanting to make it available on their site.
• Event websites showcasing expert speakers they’ll be hosing.
• Churches allowing site visitors to experience past sermons.
• Educators including examples of online lessons or reading a poem or other primary source.
• Business owners or bloggers adding case studies and interviews.

Adding an Audio Block

If you have been following along with our series on the various blocks in the WordPress editor, this will be familiar, as well as similar to the process and settings for video blocks. While in the post or page where you want to add the audio file, click the “+” icon on the top, left-hand toolbar. Choose the audio block option (within the media section) of the dropdown that appears.

If you’re anything like me and avoid reaching for the mouse any time you can, you can also add blocks by typing /[block type]!
(e.g., /audio)

Adding Your Audio File

As usual, there are multiple ways to add your audio file. If you’re sharing audio that exists on the web, you simply select “Insert from URL” and paste in the link to the audio. If you’ve already uploaded the file to your WordPress Library, click “Media Library” and select the file from those you’ve stored in WordPress.

Selecting “Upload” will send you directly to your local folders to find the file stored on your computer, However, you can also upload files from within the media library (i.e., if you select “Media Library” as above). From library window, you can add files by clicking on “Select Files” and then navigating to the file on your computer, or you can simply click and drag the file from your computer onto the media library window.

Including File Details

Don’t forget to include your alt-text, title, and description to the file while you are in the media library. From there you can also type in a caption that will appear under the audio file on the webpage. However, unlike the other fields (which are behind the scenes metadata), the caption can also be added directly within the audio block of the editor. You’ll see the space directly beneath the audio player for a title or description. To add it from the block editor, simply click on it and type in your text.

As usual, the caption text can be formatted with the typical options available for text on WordPress, including bold and italic text and adding a hyperlink, which all have their own icons displayed on the toolbar. From a dropdown menu, strike through text and other choices are options for formatting.

The next set of icons allows you to adjust the alignment of the audio player to left, center or right wider line blocks will stick out from normal content on either side, and full width blocks will stretch out the entire width of the browser window. Remember that all WordPress themes support the block editor, but not all features within the block editor are supported by all themes. Full-width and full-width are block options that may or may not be available to you, depending upon your theme.

Additional Settings

Within the audio player, your visitors have access to controls for play and pause, as well as for adjusting the volume with a slider. There’s also a slider that shows the audio progress. Clicking and dragging it allows users to skip ahead or to back up the audio. They will also be able to download the audio file to their device. Take note! If you want to prevent visitors from downloading your audio material, you’ll need to consult with a web designer to add a bit of code to your website.

Now, let’s take a look at the settings sidebar on the right. In the sidebar, under the block tab, there are several settings that can be toggled on and off. The first is to automatically play the audio when the page is opened by the visitor. (Hint: Do NOT do this without a very compelling reason.) The next toggle activates playing the clip on a loop. When the audio ends, it will automatically restart from the beginning unless the user manually stops the audio.

The “Preload” dropdown menu allows you to select how much of the audio file is downloaded once the user opens it and the page is loaded. There are three settings:

None – Nothing from the audio file is downloaded automatically. The download of the audio file only begins when your visitor clicks the Play button. This setting allows for the fastest page loading, which is important for your user experience and minimizing your bounce rate.

Metadata – Only basic info about the file will be downloaded automatically. Similar to the None option, the download of the audio file (i.e., the part with the actual sound) only begins when someone clicks Play. This setting is also very fast, as the only thing downloaded is text. There’s likely to be no noticeable difference between “None” and “Metadata,” so going with either is an acceptable choice.

Auto – The entire audio file is downloaded before the user clicks on the “Play” button (keeping in mind that some visitors may never click play, anyway!). This option will slow down your page’s load speed (and annoy your visitors), especially if the audio is more than a short clip.

And there you have it! You are now fully equipped to add audio files to your website as another means of engaging your audience!