Play Button

A play/pause button that connects to a <fortyfour-recording> element. It shows the current playback state and toggles play/pause on click.

Basic usage

Link it to a recording element using the for attribute.

HTML

<fortyfour-recording
  id="rec"
  recording-id="YOUR_RECORDING_ID"
></fortyfour-recording>

<fortyfour-play-button for="rec"></fortyfour-play-button>

The button automatically shows the right icon for the current state: play, pause, loading, or error.

Shapes

The shape attribute controls the button shape. The default is circle.

HTML

<fortyfour-play-button for="rec" shape="circle"></fortyfour-play-button>
<fortyfour-play-button for="rec" shape="square"></fortyfour-play-button>
<fortyfour-play-button for="rec" shape="rounded-square"></fortyfour-play-button>
<fortyfour-play-button for="rec" shape="blob"></fortyfour-play-button>

Shape	Description
`circle`	Round button (default)
`square`	Square button with sharp corners
`rounded-square`	Square button with rounded corners
`blob`	Organic blob shape. Use `blob-animate` to animate.

The blob shape has extra options:

HTML

<fortyfour-play-button
  for="rec"
  shape="blob"
  blob-animate
  blob-speed="20"
></fortyfour-play-button>

Attribute	Type	Default	Description
`blob-animate`	boolean	`false`	Enable blob shape animation
`blob-speed`	number	`20`	Animation duration in seconds

Sizes

Control the button size with the --fortyfour-play-button-size CSS variable.

CSS

fortyfour-play-button {
  --fortyfour-play-button-size: 64px;
}

Colors

CSS

fortyfour-play-button {
  --fortyfour-play-button-background-color: #3b82f6;
  --fortyfour-play-button-icon-color: #ffffff;
  --fortyfour-play-button-border-width: 2px;
  --fortyfour-play-button-border-color: #ffffff;
}

For the rounded-square shape, you can also set the corner radius:

CSS

fortyfour-play-button {
  --fortyfour-play-button-border-radius: 12px;
}

Visualizations

The visualization attribute adds a visual effect around the button during playback.

HTML

<fortyfour-play-button for="rec" visualization="ring"></fortyfour-play-button>
<fortyfour-play-button for="rec" visualization="ripple"></fortyfour-play-button>

Visualization	Description
`none`	No visualization (default)
`ring`	Progress ring around the button that fills as it plays
`ripple`	Animated ripple effect that pulses during playback

Ring options

CSS

fortyfour-play-button {
  --fortyfour-play-button-ring-width: 3px;
  --fortyfour-play-button-ring-fill-color: #ffffff;
  --fortyfour-play-button-ring-track-color: rgba(255, 255, 255, 0.3);
}

Ripple options

HTML

<fortyfour-play-button
  for="rec"
  visualization="ripple"
  ripple-intensity="1.5"
></fortyfour-play-button>

Attribute	Type	Default	Description
`ripple-intensity`	number	`1`	Ripple effect intensity (0.5-2+)

Hover effects

The hover attribute adds an effect when the user hovers over the button.

HTML

<fortyfour-play-button for="rec" hover="scale"></fortyfour-play-button>
<fortyfour-play-button for="rec" hover="glow"></fortyfour-play-button>
<fortyfour-play-button for="rec" hover="lift"></fortyfour-play-button>

Hover	Description
`none`	No hover effect (default)
`scale`	Button scales up slightly
`glow`	Button gets a glow shadow
`lift`	Button lifts with a drop shadow

Fine-tune the hover with CSS variables:

CSS

fortyfour-play-button {
  --fortyfour-play-button-hover-scale: 1.04;
  --fortyfour-play-button-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

Custom icons

Replace the default icons using slots.

HTML

<fortyfour-play-button for="rec">
  <svg slot="icon-paused"><!-- your play icon --></svg>
  <svg slot="icon-playing"><!-- your pause icon --></svg>
  <span slot="icon-loading">...</span>
  <span slot="icon-error">!</span>
</fortyfour-play-button>

Slot	Description
`icon-paused`	Shown when paused or idle
`icon-playing`	Shown when playing
`icon-loading`	Shown when loading
`icon-error`	Shown when an error occurred

Styling with data attributes

The button sets data attributes based on the current state. Use these for CSS styling.

CSS

fortyfour-play-button[data-playing] {
  /* Button is currently playing */
}

fortyfour-play-button[data-loading] {
  /* Button is loading (200ms delay to avoid flicker) */
}

fortyfour-play-button[data-error] {
  /* An error occurred */
}

Reference

Attributes

Attribute	Type	Default	Description
`for`	string	required	ID of the `<fortyfour-recording>` to control
`shape`	string	`circle`	Button shape: `circle`, `square`, `rounded-square`, `blob`
`visualization`	string	`none`	Visual effect: `none`, `ring`, `ripple`
`hover`	string	`none`	Hover effect: `none`, `scale`, `glow`, `lift`
`ripple-intensity`	number	`1`	Ripple effect intensity
`blob-animate`	boolean	`false`	Enable blob animation
`blob-speed`	number	`20`	Blob animation duration in seconds

CSS Variables

Variable	Default	Description
`--fortyfour-play-button-size`	`48px`	Button size
`--fortyfour-play-button-background-color`	`#3b82f6`	Background color
`--fortyfour-play-button-icon-color`	`#ffffff`	Icon color
`--fortyfour-play-button-border-width`	`2px`	Border width
`--fortyfour-play-button-border-color`	`#ffffff`	Border color
`--fortyfour-play-button-border-radius`	`12px`	Corner radius (rounded-square)
`--fortyfour-play-button-ring-width`	`2px`	Ring visualization width
`--fortyfour-play-button-ring-fill-color`	`#ffffff`	Ring progress color
`--fortyfour-play-button-ring-track-color`	`transparent`	Ring track color
`--fortyfour-play-button-hover-scale`	`1.04`	Scale on hover
`--fortyfour-play-button-hover-shadow`	`0 2px 8px rgba(0,0,0,0.15)`	Shadow on hover
`--fortyfour-play-button-focus-color`	background color	Focus ring color
`--fortyfour-play-button-focus-width`	`2px`	Focus ring width
`--fortyfour-play-button-focus-offset`	`2px`	Focus ring offset

Slots

Slot	Description
`icon-paused`	Custom icon for paused state
`icon-playing`	Custom icon for playing state
`icon-loading`	Custom icon for loading state
`icon-error`	Custom icon for error state