Audio
Audio player component
Usage
The Audio component is used to display an audio player in your application. It can be used standalone or as a media
component in Cards.
Anatomy
A standard audio player typically includes:
- Play/pause button
- Current time and duration display
- Progress bar
- Volume control
- Options button (to download, control speed, etc.)
The Audio component is a simple wrapper around the Audio element in HTML, and visual appearance will vary depending on the browser, operating system, and other factors. The above screenshot was captured from the Chrome browser.
Related
- Cards - Can use the Audio component as media content
- Image - Image component
- Video - Video player component
Properties
The following is a list of the properties available for Audio.
We are currently updating how we implement components, and the list of properties may not be entirely accurate.
| Property | Type | Description |
|---|---|---|
textResourceBindings.altText | string | Alternative text displayed for screen readers |
audio.src | object | An object containing the audio files to play. The key is the language code, and the value is the URL to the audio file. |
Configuration
We are currently updating Altinn Studio Designer with more configuration options!
The documentation is continuously updated, and there may be more settings available than what is described here, and
some settings may be in beta version.
Add component
You can add a component in Altinn Studio Designer by dragging it from the list of
components to the page area. Selecting the component brings up its configuration panel.
Basic component:
App/ui/layouts/{page}.json{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
"data": {
"layout": [
{
"id": "myAudio",
"type": "Audio",
"textResourceBindings": {
"altText": "Alternative text for the audio (for screen readers)"
},
"audio": {
"src": {
"en": "https://example.com/audio.mp3",
"nb": "/org/app/assets/audio.wav"
}
}
}
]
}
}