Audio Block

Go back to the list of Blocks

Creating an audio block will allow you to embed a piece of music, podcast, or other sound file right into your page or post.

In order to add an audio block, click on the inserter icon.

You can also type /audio and hit enter in a new paragraph block to add one quickly.

Use the slash command /audio to insert an audio block.

Detailed instructions on adding blocks can be found here.

Block Interface

Every block comes with unique toolbar icons and block specific user controls that allow you to manipulate the block right in the editor.

The audio block has alignment toolbar icon.

Top ↑

Adding Files

When you add an audio block, you get three options: Upload, Media Library, and Insert from URL.

The audio block allows you to Upload Media, use media in your Library, or add from a custom URL.

Upload will allow you to upload a new audio file from your computer. Media Library lets you select a file that’s already uploaded to your site’s Media Library. Insert from URL lets you input a URL where the file has already been uploaded, on WordPress.com or elsewhere on the web.

Once you’ve selected your audio file, you can add an optional text caption just underneath the player. Now you can start configuring your audio block!

Top ↑

Alignment

When you select your audio block, a toolbar will appear where you can change block’s alignment. Choosing right or left will allow you to place another block alongside the audio block.

  • None – Default alignment option.
  • Wide width – Increase the width of the post beyond the content size.
  • Full width – Extend the block to cover the full width of the screen.
  • Align left – Make the block left-aligned.
  • Align center – Make the block alignment centered.
  • Align right – Make the block right aligned.

Top ↑

Replace Audio

This is another option in the audio block’s toolbar. Choosing this will allow you to select a new audio file for your block. Use this if you need to replace the audio file in your audio block.

More Options

Hide Block Settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

Top ↑

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.

Top ↑

Autoplay & Loop

These options let you set your audio file to autoplay when someone visits the page or post. Looping lets you choose if the audio file repeats after it’s finished.

The audio block can be set to Autoplay, loop, or Preload.

Top ↑

Preload

This option allows you to select how much of the audio file is downloaded when the page or post is loaded. While it may be tempting to go ahead and have the whole file download automatically, keep in mind that this can slow your page’s load speed down.

There are four settings:

Browser default – Use settings from site visitor’s browser.

Auto – The entire audio file is downloaded, regardless of whether the visitor clicks the Play button or not. This makes the biggest impact on your page or post’s load speed, especially with larger audio files.

Metadata – Only basic info about the file will be downloaded automatically. Like the None option, the download of the audio file only begins when someone clicks Play. This setting is also very fast, as the only thing downloaded is text. On a fundamental level, there’s not a big difference between None and Metadata.

None – Nothing about the audio file is downloaded automatically. The download of the audio file only begins when your visitor clicks the Play button. This is the fastest setting.

Advanced

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

The advanced section lets you add HTML anchor and a CSS class to your block.

Top ↑

Changelog

  • Updated 2022-03-15
    • Update screenshots for 5.9
    • Update alignment and replace sections content
    • Add More options section
  • Updated 2022-03-03
    • Update screenshots for 5.9
  • Updated 2020-06-18
    • Added ‘Link back to blocks’ to the top of the page
    • Replace the ‘Advanced’ section with the ‘Advanced settings’ reusable block
  • Created 2019-03-07

Was this article helpful? How could it be improved?