Blocks

Blocks » Audio Block

Use the Audio block to display a piece of music, podcast, or other sound file on your page or post. Here’s how it looks:

Table of Contents

Add the Audio Block

To add the Audio block, click on the + Block Inserter icon and search for “audio”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /audio on a new line and press enter to quickly add a new Audio block.

Animated GIF showing the process of adding an Audio block using the slash command.
Adding an Audio block using the slash command.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Block Interface

When you click on the block, a toolbar of options will appear:

The audio block toolbar

The Audio block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Align to the left, right, or center (plus wide and full width options if supported by your theme)
  • Replace the file
  • More block settings

↑ Table of Contents ↑

Adding Audio

When you add an Audio block, you get three options:

  • Upload: Add a new audio file from your computer (requires a paid plan)
  • Media Library: Select a file that’s already uploaded to your site (requires a paid plan)
  • Insert from URL: Add an audio file from another source online.
The audio block, showing three options for adding an audio file.

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

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Block settings
Autoplay & Loop

Enabling Autoplay will make the audio play automatically when someone visits the page.

Please note that many browsers will block audio from playing automatically upon visiting a page because many internet users find it annoying. Consider leaving it up to your visitor to decide to play the music or not.

Enabling Loop will make the audio file repeat after it finishes.

The audio block settings show Autoplay, loop,and Preload.
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.

The options are:

Browser default – The preload is determined by the browser your visitor is using (Chrome, Firefox, Safari, etc.) The browser may use any of the other three options listed below.

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.

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.

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.

↑ Table of Contents ↑

Download Option

You may see an option in the audio player to download the audio file. This is added by certain browsers and cannot be turned off. If you do not wish for visitors to be able to download the audio file, consider embedding from a service such as Spotify or Soundcloud. More ways to add audio.

Advanced

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

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

↑ Table of Contents ↑

Podcasting for Beginners

If you’ve ever wanted to start or grow your podcast, we have a new course designed just for you! Gain all the fundamental (and a few advanced) skills you need to create a podcast you’re proud of. Easily digestible, go-at-your-own-pace lessons, taught by some of the most seasoned podcasters on the internet, will challenge you and help grow your confidence — until you’re a podcasting pro!

Not quite what you're looking for?

Get Help