API REFERENCE · MEDIA
<dj-audio>
A themed audio player.
It wraps the native HTMLAudioElement, hidden in the shadow root, with Dojo NG controls: a play/pause button, a seek slider, and a readout of the current and total time. It needs no third-party player.
npm install @dojo-ng/audio
import "@dojo-ng/audio";Accessibility
- Give the player a
label. It becomes the accessible name. - Keyboard support comes from the button and the slider.
Playback state
- The play/pause button follows the media's real
playandpauseevents, not the click. It stays correct when you control playback throughmedia(). - The seek slider's maximum comes from the media duration, and its value follows playback.
Events and analytics
dj-timefires at most once per second.- Put analytics, xAPI statements, and saved resume positions in your own event listeners, not in the component.
media()returns the raw audio element for advanced use. Code that uses it is not supported.
Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
srcMedia source URL. |
src |
string |
None |
labelAccessible name for the player. |
label |
string |
None |
preloadNative preload hint. |
preload |
string |
"metadata" |
Events
dj-playdj-pausedj-endeddj-time
CSS parts
Style these with dj-audio::part(name).
| Part | Description |
|---|---|
bar | the control row |
play | the play/pause button |
seek | the slider |
time |
Methods
| Method | Description |
|---|---|
play() | Start playback. |
pause() | Pause playback. |
media(): HTMLAudioElement | null | The underlying HTMLAudioElement. Advanced escape hatch; no support implied. |