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

Adding block

To add an audio, click on the Block Inserter icon and select the “Audio” block.

add-audio-block
Inserting audio block

Alternatively, you can start typing /audio in a new paragraph block, then press enter.

Editing block

Upon adding an audio block, you will get three options to chose from: Upload, Media Library, and Insert from URL.

upload-to-audio-block
Drop files to upload to audio block
  1. The Upload button will allow you to upload a new audio file from your computer.
  2. The Media Library button lets you select a file that’s already uploaded to your site’s Media Library.
  3. Insert from URL button lets you input a URL where the file has already been uploaded on a streaming service or elsewhere on the web.

Right after you’ve selected the audio file to insert, you can add an optional text caption just underneath the player and start configuring your audio block.

Block interface

To reveal the block toolbar, you can click on the block, and the toolbar will display. Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

audio-block-toolbar
Audio block interface toolbar

Edit audio

Clicking on the pencil icon will enable you to select a new audio file to play for your block. This option can be used to replace the current audio file in the block.

Alignments

A few of the options are for the block’s alignment, “Right”, “Center”, and “Left”. Choosing the right or left will allow you to place another block alongside the audio block; moreover, selecting the “Center” will return the block to its default, taking up the full width of the post or page content.

If you wish for the audio block to be emphasized on the page, the Wide and Full-Width options will expand the block beyond the bounding column of the page.

These two options are available in any fluid width page or post template.

Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

audio-block-sidebar-settings
The audio block settings in the sidebar

Audio settings

The autoplay option lets you set your audio file to autoplay when a user visits the page or post, and the looping allows you to choose if the audio track needs to be repeated after it’s finished.

On the other hand, “Preload” feature allows you to select how much of the audio file is downloaded when the page or post is loaded. However, enabling this option might slow your page’s load speed down.

audio-block-settings
Audio block settings

The following are the settings for the Preload feature:

  • None — Nothing about the regarding the audio file is downloaded automatically. The download of the audio file only begins when your visitor clicks on the Play button. This might be 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 a user clicks on the Play button. This setting is also very fast, as the only thing downloaded is text or basic info regarding the file.
  • Auto — The entire audio file is downloaded, despite whether the visitor clicks the Play button or not. This might make the most significant impact on your page or post’s load speed, especially with larger audio files.

On a theoretical base, there’s not a big difference between None and Metadata.

Advanced

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

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 2 weeks ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept