Atlas Forms
Audio Player
The audio control embeds a native HTML5 audio player. Use it to present voice recordings, notification sounds, podcast clips, or any audio file that a user needs to review as part of a form workflow — such as call recordings in a quality assurance review form.
Minimal Example
{
"id": "call-recording",
"type": "audio",
"label": "Call Recording",
"width": "full",
"settings": {
"src": "https://cdn.example.com/recordings/call-20250115.mp3",
"controls": true
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
src | string | — | Audio file URL. Supports template expressions: {{context.recording.url}} |
controls | boolean | true | Show browser native audio controls (play/pause, seek, volume) |
autoplay | boolean | false | Start playing on load. Most browsers block autoplay with sound — use with caution |
muted | boolean | false | Start muted |
loop | boolean | false | Loop audio continuously |
preload | none | metadata | auto | none | Audio preload strategy. Use none to avoid bandwidth consumption on long recordings |
width | string (CSS) | "100%" | Player bar width |
Dynamic Source from Context
{
"id": "qa-recording",
"type": "audio",
"label": "Support Call",
"settings": {
"src": "{{context.ticket.recordingUrl}}",
"controls": true,
"preload": "metadata"
}
}Call QA Review Form Pattern
A common pattern is a quality assurance form where a reviewer listens to a call recording and then fills in a score sheet:
// 1. Audio player at the top
{
"id": "call-audio",
"type": "audio",
"label": "Call Recording — {{context.call.id}}",
"width": "full",
"settings": {
"src": "{{context.call.recordingUrl}}",
"controls": true,
"preload": "metadata"
}
},
// 2. Score sheet below
{
"id": "tone-score",
"type": "radio",
"label": "Agent Tone",
"settings": {
"options": [
{ "value": "1", "label": "Poor" },
{ "value": "2", "label": "Below Average" },
{ "value": "3", "label": "Average" },
{ "value": "4", "label": "Good" },
{ "value": "5", "label": "Excellent" }
],
"layout": "row"
}
},
{
"id": "resolution-score",
"type": "radio",
"label": "Issue Resolution",
"settings": {
"options": [
{ "value": "pass", "label": "Resolved" },
{ "value": "partial", "label": "Partial" },
{ "value": "fail", "label": "Not Resolved" }
],
"layout": "row"
}
}Supported Formats
| Format | MIME Type | Browser Support |
|---|---|---|
| MP3 | audio/mpeg | All modern browsers |
| WAV | audio/wav | All modern browsers |
| OGG Vorbis | audio/ogg | Chrome, Firefox (not Safari) |
| AAC / M4A | audio/aac | Chrome, Safari, Edge |
| WebM audio | audio/webm | Chrome, Firefox |
Preload Strategy
Default
preload: "none" avoids loading audio data until the user presses play. For short clips (under 60 seconds) where immediate playback is expected, use preload: "auto". For long recordings (30+ minutes), always use "none" to avoid consuming the user's bandwidth unnecessarily.