How To Use The WordPress Audio Block

>>> Shared from Original Post Elegant Themes Blog

The WordPress Audio Block lets you provide playable audio files within your pages and posts. The audio files can be added from your media library or a URL. Users can play the audio from their browsers or download them to listen offline. This is a great way to provide music, podcasts, or other types of audio files for your visitors to hear and use.

In this article, we’ll look at the Audio Block and see how it works. We’ll also look at how to add it to your posts and pages, see tips and best practices for using it, and look at the frequently asked questions.

How to Add the Audio Block to your Post or Page

How to Add the Audio Block to your Post or Page

To add an Audio Block, click on the Block Inserter at the location you want to place the block or select it in the upper left corner. Search for Audio and click on it.

How to Add the Audio Block to your Post or Page

Alternately, you can type /audio and hit enter where you want to place the block.

How to Add the Audio Block to your Post or Page

The Audio Block will be added to your content where you can add an audio file to play or download. Click to upload the audio file, choose it from your library, or enter a URL for the file.

How to Add the Audio Block to your Post or Page

Your audio file will be displayed as an audio player complete with a caption where you can enter the name or other information about the file. It includes the basic audio player options.

How to Add the Audio Block to your Post or Page

Hovering over the volume icon opens the slider where the user can change the volume level.

How to Add the Audio Block to your Post or Page

On the right are three dots that open options for the user. This has a download link.

Audio Block Settings and Options

Audio Block Settings and Options

The Audio Block includes settings and options within the block itself and the right sidebar. Let’s look at both.

Audio Block Toolbar

Audio Block Toolbar

The Audio Block toolbar is placed above the block. It appears when you select the block and includes fewer tools than most of the WordPress blocks.

Change Block Type or Style

Change Block Type or Style

Transform the block to columns, a File Block to allow users to download the audio as a file, or a group that can be styled. I’m hovering over File in this example. It provides a preview of how the file would look as a File Block.

Drag and Move

Drag and Move

The Drag tool, the icon with 6 dots, lets you drag the block anywhere you want. The Move tool, the up and down arrows, moves the block up or down one content space every time you click on an arrow. Both provide an easy way to move the block around your content area.

Change Alignment

Change Alignment

The alignment options determine the block’s placement on the screen. Options include left, right, wide width, and full width. Choosing left or right places it on that side of the screen and wraps it with the content block under it.

Change Alignment

This is the Wide Width, which takes most of the width of the screen.

Replace

Replace

This option lets you replace the audio file without deleting the block. Open the library, upload a file, or input the URL of the file.

Options

Options

The Option includes the standard settings found in most WordPress blocks:

Hide More Settings – this hides the right sidebar.

Copy – this copies the block so you can paste it somewhere else within your content.

Duplicate – this adds a duplicate of the block under the original.

Insert Before – this places a space for a block before the block.

Insert After – this places a space for a block after the block.

Move To – this lets you move the block using a blue line to choose its placement.

Edit as HTML – this switches the block to the code editor view so you can edit the HTML without changing the rest of the blocks.

Add to Reusable Blocks – this adds the block to your list of reusable blocks.

Group – this adds the block to a group so you can adjust them as a single unit.

Remove Block – this deletes the block.

Caption

Caption

The caption has another set of options that includes settings for bold and italic text, links, and more options. I’ve used many of them in this example. They affect the text you’re highlighting.

The bold and italic options can be used together or independently. I’ve added bold and italic to the word “This” in the example above.

For the link, you’ll see suggestions from those you’ve used before. It includes an option to open the link in a new tab. I’ve added a link to the word “audio” in the example above.

Clicking More Options has settings to style the text. They all affect the text you’re highlighting. I’ve used several of them in the example above. They include:

Inline Code – this styles the text to look like code.

Inline image – this adds an inline image from your media library, as I’ve done between the words “audio” and “caption”.

Keyboard Input –this styles the text with keyboard HTML formatting that your browser uses.

Strikethrough – this places a line through the text, like the word “caption” in the example above.

Subscript – this makes the text lower and smaller than the rest, like the word “You” in the example above.

Superscript – this makes the text higher and smaller than the rest.

Text Color – this opens color tools to change the color of the text, as I’ve done with the word “you” in the example above. Choose from pre-selected colors or create a custom color. For custom colors, you can use the color picker or enter the hex code, RGB code, or HSL code.

Audio Block Sidebar Settings

Audio Block Sidebar Settings

The sidebar settings add audio settings and advanced settings. Select the gear to open the settings if the sidebar isn’t showing. Select the block to see the settings for this specific block. Let’s look closer at the settings.

Audio Settings

Audio Settings

Audio Settings lets you choose how the audio player handles the file. Setting it to autoplay will start the file when the page loads. Setting it to loop makes the file start over when it reaches the end of the file.

You can also choose how the preload works. This determines how much of the file is downloaded when the page loads into the user’s browser. Options include:

Auto – this downloads the entire audio file even if the user doesn’t click to play it.

Metadata – this downloads the text only, which is the basic information about the file. The audio file itself doesn’t download unless the user selects to play the file.

None – no information or data is downloaded automatically.

Advanced

Audio Advanced

The Advanced settings include fields for the HTML anchor and Additional CSS classes. The HTML anchor is a URL that allows you to link directly to the block. The Additional CSS classes field lets you add CSS classes to style the block.

Tips and Best Practices for Using the Audio Block Effectively

Use the caption to show the name of the audio file.

Use clear headings and paragraphs to describe the files. This informs the user of what to expect.

Set the preload to none or metadata to speed up the page loading for any block that doesn’t need autoplay.

Use autoplay and loop for product CTAs. Disable autoplay and loop for other Audio Blocks on the page.

Choose Group to style the background of the audio player.

Use this block to embed audio into your pages and posts.

Use an Embed Block with the file’s URL if you don’t want to include a download button.

Frequently Asked Questions about the Audio Block

What does the Audio Block do?

It adds an audio player to your website that allows users to play or download an audio file.

What’s the advantage of using the Audio Block?

It creates a player, so users are made aware that an audio file is available for them to listen to.

Can it be transformed into other blocks?

Yes. It can also be transformed into a File Block, columns, or a group. The File Block lets users download the file rather than play it through their browsers.

Can other blocks be used for audio files?

Yes. You can paste the URL into an Embed Block, but it doesn’t have the audio settings that the Audio Block has. It will give you’re an audio player on the front end, but it isn’t as elegant as the one supplied by this block. The embedded version includes the time on the tracking bar, but it doesn’t include a download option or a caption.

What are the best uses for this block?

This block can be used for music, audio tracks, album samples, podcasts, sermons, audio courses, audiobooks, etc.

What file types can the block use?

The Audio Block is compatible with .mp3, .m4a, .ogg, and .wav files. The player looks and works the same with each of the file types.

Conclusion

That’s our look at the WordPress Audio Block. It’s a simple block with a few settings. You have control over its location within your content and how it works within your visitor’s browsers. This block is an excellent choice for any type of audio file that’s compatible with WordPress.

We want to hear from you. Do you use the Audio Block? Let us know what you think about it in the comments.

Featured Image via everything bagel / shutterstock.com

The post How to Use the WordPress Audio Block appeared first on Elegant Themes Blog.

>>> Read the Full Story at Elegant Themes Blog