<wavekit-audio>

This is our default player which is also used in our regular iframe embeds. Following our embed settings, it supports multiple types of players and is highly customizable.

We also provide other audio player components. Check out our ribbon player and button player.

Wave#

Compact#

Compact wave#

Micro#

Micro wave#

HTML attributes#

Main settings#

HTML attribute	Default	Value
audio-id Required	--	A valid audio id
theme	`light`	`lightdarkauto`
type	`wave`	`wave` `compact` `compact_wave` `micro` `micro_wave`

Dimensions#

More information on customizing dimensions.

HTML attribute	Type	Default
height	CSS length	Depends on the player type
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
always-show-volume	`false`	`true` or `false`	Only applied to the `wave` player
border	`true`	`true` or `false`
hide-cover	`false`	`true` or `false`	Only applied to players with image covers
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`
with-volume	`false`	`true` or `false`	Only applied to the `micro` and `micro_wave` players

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	Depends on the player type
--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%