Audio Block

The Audio Block lets you add audio files to WordPress via a simple audio player.

WordPress Gutenberg Blocks – Audio

WordPress Gutenberg - Audio Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Audio Block Description

The Audio Block lets you add audio files to WordPress via a simple audio player.

(Add Audios to WordPress using the Audio Block)

How To Use The Audio Block

To add an Audio Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select an ‘Audio’ block (in Most Used or Common Blocks section), or
    • Add the ‘Audio’ block in the Content Area.
  • Drag and drop, upload, or select an audio from your Media Library.
  • Use the tools in the Audio Block Editor or Block Settings section to edit and format your Audio.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select an ‘Audio’ block …

'Add Block' Tool - Add Audio Block

(‘Add Block’ Tool – Add Audio Block)

Or, select an Audio Block in the Content Area

Add an Audio from the Content Area

(Add an Audio block from the Content Area)

After inserting an Audio Block, you can add an audio file:

  • Using drag and drop.
  • Using the web browser uploader.
  • From your media library.
  • From an external URL.

Add An Audio Using Drag & Drop

To add an audio file using drag and drop:

  • Make sure you have your ‘media files’ folder open (you may have to resize your browser to view your post and your media folder).
  • Select an audio from your media folder and drag it onto the active (shaded) gallery upload tool.
  • Your audio will also be automatically uploaded to your media library.

Add an audio file using drag and drop

(Add an audio file using drag and drop)

Add An Audio Using Your Web Browser Uploader

To add an audio file using your web browser uploader:

  • Make sure you know where your ‘media files’ folder is located.
  • Hover your cursor over the Audio Block and click the ‘Upload’ button to open your web browser’s media uploader window.
  • Select an audio from your ‘media’ folder and click the ‘Open’ button to import the audio file into your site.
  • Your audio will be automatically uploaded to your media library, imported to your AudioBlock, and added to your post/page.

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Audio Block …

Upload Image button

(Upload Image button)

This will bring up the ‘Upload Media’ window on your browser. Select an audio from your media files folder and click on ‘Open’ to import the audio into your post/page …

Upload an audio to the Audio Block

(Upload an audio file to the Audio Block)

Add An Audio From Your Media Library

To add an audio from your media library:

  • Make sure that your audio file has been uploaded to your media library (if you need help with this step, see our How To Use The WordPress Media Library tutorial).
  • Hover your cursor over the Audio Block and click on the ‘Media Library’ button.
  • Click on an audio from the Media Library to select it.
  • Click on the ‘Select’ button.
  • Your audio will be added to your post or page.
  • Update or publish your post or page to save your changes and update your content.

Let’s go through the above steps:

Hover your cursor over the Audio Block and click on the ‘Media Library’ button …

Media Library upload button

(Media Library upload button)

Select an audio from your media library (or upload one from your ‘media files’ folder) and click on the ‘Select’ button …

Upload an audio from the Media Library

(Upload an audio from the Media Library)

The audio file will be added to your post or page …

Audio file added

(Audio file added)

Add An Audio From An External URL

You can add an audio to your post or page from an external URL.

To add an audio from an external URL:

  • Make sure you have uploaded your audio file to your server or an external cloud storage location (e.g. Amazon S3, Dropbox, etc.)
  • Copy the audio file URL
  • Hover your cursor over your Audio Block and click on ‘Insert from URL’
  • Paste your audio URL into the URL field
  • Click ‘Apply’ to insert the audio into your content.

Let’s go through the above process.

After uploading your audio to your storage location and copying its URL, hover your cursor over the Audio Block and click on ‘Insert from URL’ …

Insert audio from URL

(Insert audio from URL)

Paste the audio URL into the URL field and click ‘Apply’ to add the audio into your post or page …

Insert audio from URL

(Insert an audio from URL)

After adding audio files:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit An Audio Block

Edit your audio file settings

(Edit your audio file settings)

To edit an Audio Block:

  • Click inside the Audio Block to select it.
  • Use the Block Editor tools to:
    • Change the position of the audio player (left, center, right).
    • Change the player width settings (wide, full).
    • Add a caption to your audio player (and format the caption).
    • Edit the settings (replace the audio file).
  • Use the Block Settings to:
    • Change audio settings (autoplay, loop)
    • Change preload settings (none, auto, metadata).

Changing the alignment of your audio player lets you embed audio files with text and images …

Change the alignment of your audio player

(Change the alignment of your audio player)

Add a caption to help users identify the content of your audio file …

Add a caption to your audio file

(Add a caption to your audio file)

Remember to update and publish your post or page to save your settings.

How To Remove An Audio Block

To delete or remove an audio block:

  • Click inside the Audio Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove an Audio Block

(Remove an Audio Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Audio Blocks into Reusable Blocks.

Audio Block Tools, Options & Settings

The Audio Block includes tools, options, and settings for:

  • Audio Block Editor
  • Audio Block Settings

Audio Block Editor

Audio Block Editor

(Audio Block Editor)

The Audio Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘Audio Block – Additional Info’ section below.)
  • Align Player
    • Align player left
    • Align player center
    • Align player right
  • Player Width
    • Wide width
    • Full width
  • Edit
    • Replace audio file
  • More Options

Audio Block Editor

(Audio Block Editor)

Audio Block Settings

Audio Block Settings

(Audio Block Settings)

Audio Block settings include:

  • Block description area
  • Audio Settings
    • Autoplay (On/Off) – Set the audio to begin playing  as soon as the page is loaded on a visitor’s browser.
    • Loop (On/Off) – Set the audio file to loop after playing.
    • Preload:
      • Metadata – Only the metadata is preloaded: dimensions, first frame, track list, duration, etc.
      • Auto – The audio should start loading as soon as the page loads.
      • None – No preload is done.
  • Advanced Settings
    • Additional CSS Class

Audio Block Settings

(Audio Block Settings)

Audio Block – Additional Info

The Audio Block can be converted into the following block types:

Change Block Type - Audio Block

(Change Block Type – Audio Block)

Info

Notes:

  • Changing an Audio Block into a File Block allows users to download your audio file.

Change Audio Block into other block types

(Change an Audio Block into other block types)

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to Audio Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Audio Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Audio Block.