Examples
Common patterns and tips for using the player.
Preventing Layout Shift
The player loads its content asynchronously, which can cause the page to jump as it expands.
To prevent this, set a min-height on the player element:
fortyfour-player {
display: block;
min-height: 200px;
}
Adjust the min-height value based on your typical transcription length. For
longer recordings with more text, you may want a larger value.
Dark Mode Integration
The player uses CSS custom properties for all colors, making it easy to integrate with your site's dark mode. Here are a few approaches:
Using prefers-color-scheme
Automatically match the user's system preference:
/* Light mode (default) */
fortyfour-player {
--fortyfour-player-accent: #c4956a;
--fortyfour-player-background: #ffffff;
--fortyfour-player-surface: #f5f5f5;
--fortyfour-player-text: #1a1a1a;
--fortyfour-player-muted: #6b7280;
--fortyfour-player-border: #e5e5e5;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
fortyfour-player {
--fortyfour-player-accent: #d4a574;
--fortyfour-player-background: #1c1917;
--fortyfour-player-surface: #262220;
--fortyfour-player-text: #e7e0d5;
--fortyfour-player-muted: #9c938a;
--fortyfour-player-border: #3d3632;
}
}Using a theme attribute
If your site uses a data-theme attribute for theme switching:
[data-theme="light"] fortyfour-player {
--fortyfour-player-background: #ffffff;
--fortyfour-player-text: #1a1a1a;
/* ... other light colors */
}
[data-theme="dark"] fortyfour-player {
--fortyfour-player-background: #1c1917;
--fortyfour-player-text: #e7e0d5;
/* ... other dark colors */
}Mapping to your design tokens
If you already have CSS custom properties for your color system, map them directly:
fortyfour-player {
--fortyfour-player-accent: var(--brand-primary);
--fortyfour-player-background: var(--color-bg);
--fortyfour-player-surface: var(--color-bg-subtle);
--fortyfour-player-text: var(--color-text);
--fortyfour-player-muted: var(--color-text-muted);
--fortyfour-player-border: var(--color-border);
}This approach keeps the player in sync with your site automatically as your design tokens change between themes.
Multiple Players
When you have multiple players on a page, you'll typically want to pause other players when one starts playing to avoid overlapping audio.
Auto-pause other players
Listen for the play event and pause all other players:
document.addEventListener('play', (event) => {
// Check if the event came from a fortyfour-player
if (event.target.tagName !== 'FORTYFOUR-PLAYER') return;
// Pause all other players
document.querySelectorAll('fortyfour-player').forEach((player) => {
if (player !== event.target) {
player.pause();
}
});
}, true);
The true parameter enables capture mode, which ensures we catch the event
as it propagates down from the document.
Tracking the active player
For more control, you can track which player is currently active:
let activePlayer = null;
document.addEventListener('play', (event) => {
if (event.target.tagName !== 'FORTYFOUR-PLAYER') return;
// Pause the previously active player
if (activePlayer && activePlayer !== event.target) {
activePlayer.pause();
}
activePlayer = event.target;
}, true);
document.addEventListener('ended', (event) => {
if (event.target === activePlayer) {
activePlayer = null;
}
}, true);Performance with many players
For pages with many players (e.g., a feed or list), use preload="none" to
avoid loading audio data until the user interacts:
<fortyfour-player
recording-id="..."
preload="none"
></fortyfour-player>This significantly reduces initial page load time and bandwidth usage.