<music-memory> Web Component

For Christmas, my wife's family has a charming tradition: we hand over our presents with a personal touch, like playing a game or doing a quest.

This year, I've decided to add a twist to the classic Memory game, where you flip cards to find matching pictures. But in my version, you need to match pairs from the same song.

This seemed like a weird enough use case for a web component... so here we are, proudly presenting the <music-memory> web component, which turns the following code into an (unstyled!) interactive memory card game:

<music-memory>
  <audio
    src="jingle-bells.mp3"
    data-range1="0-4580"
    data-range2="4580-9500"></audio>
  <audio
    src="joy-to-the-world.mp3"
    data-range1="0-5300"
    data-range2="5300-10000"></audio>
  <audio
    src="we-wish-you-a-merry-christmas.mp3"
    data-range1="0-5950"
    data-range2="5972-13000"></audio>
</music-memory>

You can grab the component from NPM, have a look at GitHub or try it out on the festive demo website or iFrame below: 😄

Let me just give you a little bit of advice: Don't put to many songs into it. I did the game with 8 songs and it was an overwhelming mess. 😂