Overview
The Audio component allows you to embed an accessible audio file on a page using AblePlayer, IU’s supported media player. It ensures audio content is usable by all visitors, with support for captions and transcripts.
Common uses
- Highlight a faculty or student interview
- Publish recordings of lectures, talks, or broadcasts
- Share a podcast episode
- Feature musical performances or audio samples
Component example
Component fields
| Element name | Required | Multiple |
|---|---|---|
|
MP3 file
MP3 audio file.
|
Yes
|
No
|
|
Closed captions (VTT)
File providing closed captions for the audio. Learn more about creating VTT files and when you are required to use them.
|
Sometimes (see description)
|
No
|
|
Heading level
HTML heading level (H2, H3, etc.). Match the surrounding page structure (usually H2).
|
Yes
|
No
|
|
Caption
Optional. Caption displayed beneath the audio player.
|
No
|
No
|
|
Attribution
Optional. Source or credit line displayed beneath the caption.
|
No
|
No
|
|
Transcript
Full transcript of the audio content. Learn more about audio transcripts and when you are required to use them.
|
Sometimes (see description)
|
No
|
Accessibility
-
Closed captions are requiredMost audio files embedded on IU websites should include a
.vttcaption file. Visit the IU Knowledge Base for more information on captioning audio. -
Transcripts are requiredMost audio files embedded on IU websites should include a full transcript. Visit the IU Knowledge Base for more information on transcribing audio.
-
Avoid replacing text with audioAudio should supplement your page content, not serve as the only way to access key information. Make sure that important information and calls to action are accessible even if a person cannot hear the audio.
Do
- Use to enhance your page with interviews, podcasts, or performances
- Provide captions and transcripts for audio files when needed
Don't
- Embed more than one audio player per page—put separate episodes or recordings on their own pages
- Use in place of text content—audio should enhance a page's content, not replace it