Progress Bar

The Progress Bar block enables users to move backwards and forwards through the audio to a time of their choosing.

Goal: Understand the settings which are unique to the Progress Bar block.

Prerequisites:

• Podcaster Plus Blocks plugin installed and activated.
• Your Podcast RSS Feed successfully connected in the plugin settings.

Insert the Progress Bar #

You can insert the progress bar by clicking the blue ‘+’ button to open the inserter panel on the left of the block editor, or by typing ‘/progress’ in a new paragraph.

Progress Bar block settings #

When you click on the Progress Bar block, you will see the settings available in the sidebar to the right:

Settings unique to the Progress Bar block #

Time Settings: #

You can control the size of the time settings at the start and end of the progress bar.

Bar Settings: #

You are able to alter the height of the progress bar, as well as how rounded the ends of the bar are.

Thumb Controls: #

These settings allow you to increase the size of the ‘thumb’. This will make it more visible and easier to interact with, especially on mobile devices when a finger will be required.

Visualization Settings: #

This settings allow you to add a visualisation effect when the audio is played. The options are:

• None
• Bars
• Dots
• Wave

How the visualization might look (you can customize it) in the bars, dots, and wave states:

Additional settings become available if you select Bars, Dots or Wave:

• Density: How ‘tightly packed’ the visualization is
• Visualization Height: How tall the visualization is
• Animation Speed: How fast the visualization moves
• Show Toggle Button: Some visitors prefer not to see animations on the screen, and this displays a small ‘Hide Animation’ text below the player (under the timer at the right), which will enable them to toggle the animation on / off

Settings shared with other blocks #

There are many other options for styling the Play Button. You can find more information about those: