Music Wrapped Web Component

  1. Spanish Love Songs
  2. Hot Mulligan
  3. Heart Attack Man
  4. Real Friends
  5. Trophy Eyes
  1. Sunshine
  2. The World
  3. Pendulum
  4. Sway
  5. Freak of Nature

This is a demo of the music wrapped web component. The default design is inspired by Spotify Wrapped.

You can download code from the music wrapped repository on GitHub.

Web Components

These cards are built using Web Components and must be imported before they are rendered. 

import './MusicWrapped.js';

Cards

To use the music wrapped card you must create a <music-wrapped> element with the required lists inside. The title="" attribute on the list is used for the list title. You can add the optional minutes listened and top genre by using attributes.

seconds="integer"
The total time listened, in seconds.
Represented in minutes.
genre="string"
The top genre value.

Spotify Wrapped

These are inspired by the 2023 Spotify Wrapped designs.

  1. Spanish Love Songs
  2. Hot Mulligan
  3. Heart Attack Man
  4. Real Friends
  5. Trophy Eyes
  1. Sunshine
  2. The World
  3. Pendulum
  4. Sway
  5. Freak of Nature
  1. Spanish Love Songs
  2. Hot Mulligan
  3. Heart Attack Man
  4. Real Friends
  5. Trophy Eyes
  1. Sunshine
  2. The World
  3. Pendulum
  4. Sway
  5. Freak of Nature
  1. Spanish Love Songs
  2. Hot Mulligan
  3. Heart Attack Man
  4. Real Friends
  5. Trophy Eyes
  1. Sunshine
  2. The World
  3. Pendulum
  4. Sway
  5. Freak of Nature
  1. Spanish Love Songs
  2. Hot Mulligan
  3. Heart Attack Man
  4. Real Friends
  5. Trophy Eyes
  1. Sunshine
  2. The World
  3. Pendulum
  4. Sway
  5. Freak of Nature
  1. Spanish Love Songs
  2. Hot Mulligan
  3. Heart Attack Man
  4. Real Friends
  5. Trophy Eyes
  1. Sunshine
  2. The World
  3. Pendulum
  4. Sway
  5. Freak of Nature

Download code from the music wrapped repository on GitHub.