The audio block allow you to embed a piece of music or other sound files right into your post or page.

Here’s what it looks like when it’s added to the Block Editor.

Audio Block

To add an audio block you click on the + icon at the right of any empty block or at the top left of the editor then search for audio and click on the Audio block icon.

Add Audio block

More detailed instructions for adding blocks can be found here.

Add Audio

The audio block has three options:

  • Upload: upload a new audio file from your device.
  • Media Library: select an audio file that is already uploaded to your site’s media library.
  • Insert from URL: link to the location of audio on the Internet.

Once you’ve added your audio you can add optional text caption underneath the player and choosing align right or left allows you to place another block alongside the audio block..

Audio Block

Block Toolbar

You reveal the block’s toolbar by selecting the block. The audio block toolbar includes options to change block type, alignment and replace the audio.

The change block type or style icon is used to transform the block to a file block or a group block and edit audio is used to replace the audio file with a new audio file.

audio block toolbar

Click on the change alignment icon and select the preferred alignment. Choosing right or left allows you to place another block alongside the audio block.  Selecting center returns the block to the default and the audio player will take up the full width of the post or page.

  • Align left: used to align audio left.
  • Align Center: used to center align audio.
  • Align Right: used to align right audio.

Block Settings

Additional options for the audio block are located in the editor sidebar of the block editor.  Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.

Audio Settings

Your audio settings are:

  • Auto play:  set your audio file to auto play when someone visits the post or page.
  • Loop: allows you to choose if the audio file repeats after it is finished.
  • Preload: used to select how much auto file is downloaded as the post or page is loading. By default, Preload is set to None as this is the fastest page load setting.
    • None: the audio file is downloaded when the visitor clicks the Play button.
    • Metadata: only the basic info about the file is automatically downloaded and the audio file is only download when the visitor clicks on the Play button.
    • Auto: the entire audio file is downloaded automatically when the post or page is loaded.  This will slow down your post/page load speed especially with larger files.  For the fastest page speeds it is best to use None.

The advanced tab lets you add a CSS class to your block allowing you to write custom CSS and style the block.