Customization reference
For customizing Wavekit's player we recommend using our embed generator but power users might prefer to generate the embed code themselves.
<iframe> properties
These are the minimum properties we recommend for the embed iframe:
Transparency
The background of our player can be configured to be transparent but to allow the <iframe> to be transparent you need to set allowtransparency="true".
Dimensions
Our player is responsive and will adapt to the dimensions you set to the <iframe> itself. Depending on the player type, there will be some minimum dimensions. See below for more information.
Border
By default, our player will render a border so we recommend removing the border of the <iframe> with style="border: none;".
Lazy loading
You can use loading="lazy" so that the <iframe> is only loaded once visible after the user starts scrolling. This feature is supported in the latest version of all major browsers.
Referrer policy
If you'd like our player to store the referer in the metrics set referrerpolicy to a valid value.
We recommend using referrerpolicy="origin" to store the domain that was used to embed a player. For more information check MDN.
Check the metrics section to know more about the metrics we collect.
Using settings
To customize the player you will need to add query parameters to the embed URL of the <iframe>. For example to add a red accent color:
.../embed/audio/qrRS3OOsmx?accent=red
Same with playlists:
.../embed/playlist/cAgkyheZmM?accent=red
You can chain multiple settings using the & character:
.../embed/audio/qrRS3OOsmx?border=false&rounded=true
We recommend trying our embed generator to see the effect of each parameter.
Available settings
These are all the available settings. Except for the player type, the paramaters are the same for both audios and playlists.
Player type
.../embed/audio/qrRS3OOsmx?type=compact_wave
You can set the player type with the type parameter.
The player is responsive and will adapt to the dimensions of the <iframe> but depending on the player type there are some minimum dimensions.
Audios
| Value | Min width | Min height |
|---|---|---|
wave default |
250px | 150px |
compact |
200px | 80px |
compact_wave |
200px | 100px |
micro |
200px | 30px |
micro_wave |
250px | 50px |
Playlists
| Value | Min width | Min height |
|---|---|---|
wave default |
250px | 300px |
Theme
.../embed/audio/qrRS3OOsmx?theme=dark
The theme parameter controls the overall color theme of the player.
| Value | Description |
|---|---|
auto default |
The theme will change automatically depending on the OS |
light |
The player will always render with the light theme |
dark |
The player will always render with the dark theme |
Accent colors
.../embed/audio/qrRS3OOsmx?accent=blue
The accent color is controlled via the accent parameter. Any valid CSS color value can be used like red or rgb(255,0,0). When using hex colors like #ff0000 be sure to escape the # character like this %23ff0000.
You can also define different accent colors for the light or dark themes using accentLight and accentDark. This is useful when using the auto theme because some colors don't work well in both light and dark scenarios.
More colors
.../embed/audio/qrRS3OOsmx?backgroundColor=lightpink&borderColor=red
You can control the background and border colors with backgroundColor and borderColor. Same rules apply as with accent colors. You can use any CSS value but remember to escape the # character with %23.
Border
.../embed/audio/qrRS3OOsmx?border=false
Enable or disable a visual border around the player. The default value is border=true.
Rounded corners
.../embed/audio/qrRS3OOsmx?rounded=true
Adds rounded corners to the player.
Hide the cover image
.../embed/audio/qrRS3OOsmx?hideCover=true
Always hide the cover for this player regardless of whether the audio or playlist have an assigned cover.
Make the player completely transparent
.../embed/audio/qrRS3OOsmx?transparent=true
Makes the whole background color of the player transparent.
This allows you to create your own container around the <iframe>. Be sure to also add the allowtransparency="true" paremeter to the <iframe>.
Opting out of metrics collection
.../embed/audio/qrRS3OOsmx?ignoreMetrics=true
If you do not wish for the player to store metrics for this player, just use ignoreMetrics=true. For more information about the metric we collect see the metrics section.