<wavekit-ribbon>
The ribbon player was designed to be used as a list element for situations where you want to showcase many audios: music libraries, fx stores, etc.
This player doesn't feature a volume control but we recommend using it alongside our overlay player. See this demo of how it all works together.
HTML attributes#
Main settings#
| HTML attribute | Default | Value |
|---|---|---|
| audio-id Required | -- | A valid audio id |
| theme | light |
lightdarkauto |
Dimensions#
More information on customizing dimensions.
| HTML attribute | Type | Default |
|---|---|---|
| height | CSS length | 50px |
| width | CSS length | 100% |
Colors#
All colors have a -dark variant. More information on customizing colors.
| HTML attribute | Type | Default |
|---|---|---|
| accent-color | CSS color | Defined by the theme |
| background-color | CSS color | Defined by the theme |
| border-color | CSS color | Defined by the theme |
| play-arrow-color | CSS color | Calculated automatically |
| text-color | CSS color | Defined by the theme |
| wave-color | CSS color | Same color as the accent color |
| wave-opacity | CSS opacity | Calculated automatically |
Other settings#
| HTML attribute | Default | Value | More info |
|---|---|---|---|
| border | true |
true or false |
|
| hide-cover | false |
true or false |
|
| ignore-metrics | false |
true or false |
|
| referer | -- | A valid URL | This URL will be stored in the metrics. |
| rounded | false |
true or false |
|
| transparent | false |
true or false |
CSS variables#
All colors have a -dark variant. More information on customizing colors and dimensions using CSS variables.
| CSS variable | Type | Default |
|---|---|---|
| --wk-accent-color | CSS color | Defined by the theme |
| --wk-background-color | CSS color | Defined by the theme |
| --wk-border-color | CSS color | Defined by the theme |
| --wk-height | CSS length | 50px |
| --wk-play-arrow-color | CSS color | Calculated automatically |
| --wk-text-color | CSS color | Defined by the theme |
| --wk-wave-color | CSS color | Same color as the accent color |
| --wk-wave-opacity | CSS opacity | Calculated automatically |
| --wk-width | CSS length | 100% |