Examples
Common patterns and tips for using the recorder.
Dark Mode Integration
The recorder 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-recorder {
--fortyfour-recorder-accent: #c4956a;
--fortyfour-recorder-background: #ffffff;
--fortyfour-recorder-text: #1a1a1a;
--fortyfour-recorder-muted: #6b7280;
--fortyfour-recorder-border: #e5e5e5;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
fortyfour-recorder {
--fortyfour-recorder-accent: #d4a574;
--fortyfour-recorder-background: #1c1917;
--fortyfour-recorder-text: #e7e0d5;
--fortyfour-recorder-muted: #9c938a;
--fortyfour-recorder-border: #3d3632;
}
}Using a theme attribute
If your site uses a data-theme attribute for theme switching:
[data-theme="light"] fortyfour-recorder {
--fortyfour-recorder-background: #ffffff;
--fortyfour-recorder-text: #1a1a1a;
/* ... other light colors */
}
[data-theme="dark"] fortyfour-recorder {
--fortyfour-recorder-background: #1c1917;
--fortyfour-recorder-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-recorder {
--fortyfour-recorder-accent: var(--brand-primary);
--fortyfour-recorder-background: var(--color-bg);
--fortyfour-recorder-text: var(--color-text);
--fortyfour-recorder-muted: var(--color-text-muted);
--fortyfour-recorder-border: var(--color-border);
}Handling Recording Complete
Listen for the recording-complete event to save transcription data to your
database or trigger other workflows:
const recorder =
document.querySelector("fortyfour-recorder");
recorder.addEventListener(
"recording-complete",
async (event) => {
const { recordingId, recording } = event.detail;
// Save to your database
await fetch("/api/recordings", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
recordingId,
transcription: recording.transcription,
translation: recording.translation,
duration: recording.duration,
language: recording.lang,
}),
});
}
);Styling with CSS Parts
Use ::part() to style elements inside the recorder's shadow DOM:
/* Brutalist style */
fortyfour-recorder {
--fortyfour-recorder-accent: #000000;
--fortyfour-recorder-background: #ffffff;
--fortyfour-recorder-text: #000000;
--fortyfour-recorder-muted: #666666;
--fortyfour-recorder-border: #000000;
}
fortyfour-recorder::part(button) {
border-radius: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
fortyfour-recorder::part(select) {
border-radius: 0;
}Limiting Recording Duration
Use the max-duration-ms attribute to set a maximum recording length. The
recorder will automatically stop when the limit is reached:
<!-- 30 second maximum -->
<fortyfour-recorder
session-id="YOUR_SESSION_ID"
max-duration-ms="30000"
></fortyfour-recorder>Organizing with Labels
Use the labels attribute to tag recordings for filtering and organization:
<fortyfour-recorder
session-id="YOUR_SESSION_ID"
labels="feedback,sprint-23"
></fortyfour-recorder>