Skip to content

C. Track Information

<fb-track-text>

General-purpose track text display. It replaces the legacy fb-title, fb-artist, and fb-album elements; use a built-in field or a Title Formatting expression.

html
<fb-track-text field="title"></fb-track-text>
AttributeTypeDefaultDescription
fieldstring'title'Field to display (observed)
tfstringTitle Formatting expression; takes precedence over field (observed)
placeholderstringText shown when no value is available (observed)

CSS Parts: text

<fb-cover-art>

Cover-art display. Add use-fb2k to try the SDK's getFb2kUrl() helper first; the component falls back to artwork.getCurrent() when that path does not return usable artwork.

html
<fb-cover-art use-fb2k>
  <span slot="placeholder">🎵</span>
</fb-cover-art>
AttributeTypeDefaultDescription
typestring'front'Artwork type: front, back, disc, icon, or artist (observed)
use-fb2kbooleanfalseTries the SDK URL-helper lookup before the standard artwork request (observed)
loadedbooleanRead-only reflection of successful image loading
srcstringRead-only reflection of the current non-data image source

CSS Parts: container, imageSlots: placeholder

Events:

js
el.addEventListener('fb-cover-load', e => { /* artwork loaded */ });
el.addEventListener('fb-cover-error', e => { /* artwork failed to load */ });

<fb-time-current>

Current playback time, formatted as m:ss or h:mm:ss.

html
<fb-time-current></fb-time-current>
AttributeTypeDefaultDescription
secondsstringRead-only current position in whole seconds

CSS Parts: text

<fb-time-total>

Total track duration.

html
<fb-time-total></fb-time-total>
AttributeTypeDefaultDescription
secondsstringRead-only total duration in whole seconds

CSS Parts: text

<fb-time-remaining>

Remaining playback time, shown with a - prefix.

html
<fb-time-remaining></fb-time-remaining>
AttributeTypeDefaultDescription
secondsstringRead-only remaining time in whole seconds

CSS Parts: text

<fb-tech-info>

Technical track information. With field="all", the output is formatted like FLAC | 1411 kbps | 44.1 kHz | Stereo.

html
<fb-tech-info field="all"></fb-tech-info>
AttributeTypeDefaultDescription
fieldstring'all'Display field: all, codec, bitrate, samplerate, or channels (observed)

CSS Parts: text