Playback Speed Block User Guide

Overview #

The Playback Speed block provides an intuitive control for adjusting podcast playback speed, allowing listeners to consume content at their preferred pace. With speed options ranging from 0.25x to 2x, customizable display modes, and comprehensive styling options, this block seamlessly integrates with the atomized audio player system. It features keyboard navigation, accessibility support, and responsive design controls.

Key Features #

Speed Control #

• Speed Range: 0.25x to 2x in 0.25x increments
• Default Speed: 1x (normal playback)
• Menu System: Dropdown with 8 speed options
• State Memory: Maintains speed across episodes

Display Modes #

• Text and Icon: Shows speed text with settings icon
• Icon Only: Compact mode with just the icon
• Text Only: Minimal mode showing only speed
• Icon Positioning: Left or right of text

Responsive Design #

• Device-Specific Styling: Different looks per device
• Color Controls: Icon and background colors with hover states
• Spacing Options: Margin and padding per breakpoint
• Border & Shadow: Visual enhancement options

Accessibility #

• Keyboard Navigation: Full keyboard support
• Screen Reader Support: Clear announcements
• Focus Management: Proper focus handling
• ARIA Attributes: Complete accessibility compliance

Understanding Display Modes #

Text and Icon Mode #

What it shows: Current speed (e.g., “1.5x”) plus settings icon

When to use:

• Full-featured players
• Desktop layouts
• When clarity is important
• Primary speed controls

Icon positions:

• Left: Icon before speed text
• Right: Icon after speed text

Icon Only Mode #

What it shows: Just the settings icon

When to use:

• Compact layouts
• Mobile interfaces
• Space-constrained designs
• Minimalist players

User interaction:

• Click icon to open menu
• Speed visible in dropdown
• Saves horizontal space

Text Only Mode #

What it shows: Just the current speed

When to use:

• Ultra-minimal designs
• Inline with content
• When icon seems redundant
• Text-heavy interfaces

Using the Playback Speed Block #

Adding the Block #

1. Ensure an episode is selected via Episode Selector
2. Click the + button in the block editor
3. Search for “Playback Speed”
4. Click to insert the block
5. Configure display mode and styling

Basic Configuration #

1. Choose Display Mode: Text and icon, icon only, or text only
2. Select Icon Style: Outline or solid
3. Set Icon Position: Left or right (if applicable)
4. Adjust Sizes: Icon, text, and padding
5. Style the Control: Use responsive settings

The Settings Panels #

Playback Speed Settings #

• Display Mode: Choose from three options
• Text and Icon (default)
• Icon Only
• Text Only

Icon Settings (when applicable) #

• Icon Style:
• Outline (lighter weight)
• Solid (heavier weight)
• Icon Size: 12px to 32px slider
• Icon Position: Left or right of text

Text Settings (when applicable) #

• Text Size: 10px to 32px for menu items
• Menu Padding: 2px to 16px for spacing

Spacing #

• Margin: Outer spacing around control
• Padding: Inner spacing (button padding)
• Linked Sides: Toggle for uniform spacing
• Device-Specific: Different per breakpoint

Sizing #

• Width/Height: Control dimensions
• Min/Max Width: Boundary constraints
• Min/Max Height: Vertical constraints
• Auto Sizing: Leave empty for content-based size

Colors #

• Background: Control background color
• Background Hover: Color on mouse over
• Icon: Icon color
• Icon Hover: Icon color on mouse over
• Theme Integration: Use site color palette

Border & Shadow #

• Applied to Control: Styles the button directly
• Border Options: Width, style, color, radius
• Shadow Effects: Elevation and depth
• Responsive Values: Per-device settings

Display #

• Visibility: Per-device show/hide
• Sticky: Fixed positioning options
• Z-index: Layer stacking order
• Performance: Hidden controls don’t load

Speed Options Explained #

Available Speeds #

• 0.25x: Quarter speed (very slow)
• 0.5x: Half speed (slow)
• 0.75x: Three-quarter speed
• 1x: Normal speed (default)
• 1.25x: Slightly faster
• 1.5x: One and a half speed
• 1.75x: Noticeably faster
• 2x: Double speed (maximum)

Use Cases by Speed #

• 0.25x – 0.75x: Language learning, note-taking
• 1x: Standard listening
• 1.25x – 1.5x: Efficient listening
• 1.75x – 2x: Speed listening, review

Common Use Cases #

Standard Player Control #

Display Mode: Text and Icon
Icon Style: Solid
Icon Position: Left
Icon Size: 18px
Text Size: 14px
Background: Light gray
Hover: Darker gray
Border Radius: 4px

Compact Mobile Control #

Display Mode: Icon Only
Icon Style: Outline
Icon Size: 24px
Background: Transparent
Icon Color: Theme color
Padding: 8px
Border: 1px solid

Inline Text Control #

Display Mode: Text Only
Text Size: Inherit
Background: None
Color: Link color
Padding: 2px 4px
Hover: Underline

Featured Player Speed #

Display Mode: Text and Icon
Icon Position: Right
Icon Size: 20px
Text Size: 16px
Background: Brand color
Text Color: White
Padding: 8px 12px
Border Radius: 20px

Minimal Toolbar Item #

Display Mode: Icon Only
Icon Style: Outline
Icon Size: 20px
Background: None
Icon Color: Text color
Hover: Background appears
Padding: 6px

Styling Best Practices #

Display Mode Selection #

• Consider Context: Match player complexity
• Space Available: Icon-only for tight spaces
• User Expectations: Text for clarity
• Design Consistency: Match other controls

Icon Configuration #

• Style Consistency: Match other icons
• Size Hierarchy: Smaller than play button
• Color Contrast: Ensure visibility
• Hover Feedback: Clear state changes

Menu Styling #

• Text Readability: Adequate font size
• Touch Targets: 44px minimum on mobile
• Padding Balance: Comfortable spacing
• Visual Hierarchy: Current speed highlighted

Responsive Approach #

• Mobile: Larger touch targets
• Tablet: Balanced sizing
• Desktop: Can be more compact
• Breakpoint Logic: Progressive enhancement

Keyboard Navigation #

Control Activation #

• Tab: Navigate to control
• Enter/Space: Open speed menu

Menu Navigation #

• Arrow Up/Down: Navigate options
• Enter/Space: Select speed
• Escape: Close menu
• Tab: Exit menu

Navigation Features #

• Wrap Around: First to last, last to first
• Focus Visible: Clear focus indicators
• Menu Memory: Returns to last position
• Accessibility: Full ARIA support

Advanced Techniques #

Custom Speed Highlighting #

Using CSS classes:

.speed-menu-item[data-speed="1.5"] {
  font-weight: bold;
  color: var(--brand-primary);
}

Menu Animation #

With custom CSS:

.speed-menu {
  transition: opacity 0.2s ease;
}
.speed-menu.isopen {
  animation: slideDown 0.2s ease;
}

Conditional Styling #

Different styles per speed:

.current-speed:has-text("2x") {
  color: #ff6b6b;
}

Integration Patterns #

• With Play Button: Coordinated controls
• With Volume: Audio control group
• With Progress: Playback control set
• In Toolbar: Compact arrangement

Accessibility Features #

Built-in Support #

• Menu Role: Proper ARIA menu pattern
• Keyboard Navigation: Full keyboard access
• Focus Management: Logical focus flow
• Screen Reader: Clear announcements

ARIA Implementation #

• aria-label: “Playback Speed”
• aria-expanded: Menu state
• role=”menu”: Menu container
• role=”menuitem”: Speed options

Best Practices #

• Color Contrast: 4.5:1 minimum
• Focus Indicators: Visible outlines
• Touch Targets: Adequate sizing
• State Clarity: Clear current speed

Troubleshooting #

Menu Won’t Open #

Check these issues:

1. Episode Selected: Required for functionality
2. JavaScript: Must be enabled
3. Click Target: Ensure clicking button
4. Z-index: Check for overlays

Speed Not Changing #

Common causes:

1. Audio Loading: Wait for audio ready
2. Browser Support: Check compatibility
3. Menu Selection: Click speed option
4. State Sync: Refresh if needed

Visual Issues #

Solutions:

1. Icon Missing: Check display mode
2. Text Cut Off: Increase width
3. Menu Position: Check z-index
4. Colors: Verify contrast

Keyboard Issues #

Fixes:

1. Focus Lost: Check tab order
2. Keys Not Working: Verify focus
3. Menu Stuck: Press Escape
4. Navigation: Use arrow keys

Performance Tips #

Optimization #

• Icon Size: Use appropriate sizes
• Shadow Effects: Limit on mobile
• Transitions: Keep smooth
• Menu Renders: On-demand only

Mobile Considerations #

• Touch Targets: Minimum 44px
• Menu Position: Above fold
• Font Size: Readable minimums
• Contrast: High visibility

Frequently Asked Questions #

Q: Can I have multiple speed controls?
A: The block is set to single instance to ensure consistent control.

Q: How do I add custom speeds?
A: Currently limited to the 8 predefined speeds (0.25x to 2x).

Q: Does speed persist between episodes?
A: Yes, the selected speed is maintained across different episodes.

Q: Can I style the menu differently?
A: Yes, use custom CSS targeting .speed-menu and .speed-menu-item.

Q: What’s the default speed?
A: 1x (normal playback speed).

Q: Can I disable certain speeds?
A: Not currently, all 8 speeds are always available.

Q: How do I track speed preferences?
A: Speed changes can be tracked via JavaScript events or analytics plugins.

Q: Is the speed saved per user?
A: Speed is saved for the session but not permanently per user.

Integration Examples #

Basic Player Layout #

Container (flex row)
├── Play Button
├── Progress Bar
├── Volume Control
└── Playback Speed (icon only)

Advanced Player #

Container (grid)
├── Episode Image
├── Title/Description
├── Control Bar
│   ├── Play Button
│   ├── Skip Back/Forward
│   ├── Progress Bar
│   ├── Time Display
│   ├── Volume
│   └── Playback Speed

Mobile Stacked #

Container (flex column)
├── Progress Bar
├── Control Row
│   ├── Play Button (large)
│   ├── Playback Speed (text only)
│   └── Volume (icon only)

Best Practices Summary #

1. Choose Appropriate Mode: Match your design needs
2. Size for Context: Larger for primary controls
3. Test All Speeds: Ensure audio quality at extremes
4. Ensure Accessibility: Keyboard and screen reader support
5. Consider Mobile: Touch-friendly sizing
6. Style Consistently: Match other controls
7. Optimize Performance: Efficient menu rendering

Getting Help #

If you need assistance with the Playback Speed block:

1. Review this guide for common solutions
2. Check other Audio Block Guides
3. Visit our support forum
4. Contact support with specific questions

Remember: The Playback Speed block enhances the listening experience by giving users control over their consumption pace. Make it easy to find and use!