mix-tape

A playlist component

      code
      
        <mix-tape>
  <mix-track label="La Cuacaracha" src="./La_Cucaracha.ogg"></mix-track>
  <mix-track label="Carmen - prelude to act 1" src="./Carmen_-_Prelude_to_Act_1.ogg"></mix-track>
</mix-tape>

Styling

      code
      
        <style>
  mix-tape.styled figcaption {
    text-align: center;
    font-family: var(--sans);
    font-weight: bold;
  }
  mix-tape.styled,
  mix-tape.styled audio {
    width: 100%;
  }
  mix-tape.styled ul li {
    padding: 0.3em;
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 0.5em;
  }
  mix-tape.styled li.current {
    background-color: var(--color-bg-down);
  }
  mix-tape.styled button {
    background: none;
    border: none;
    color: inherit;
  }
</style>
<mix-tape class="styled">
  <mix-track label="La Cuacaracha" src="./La_Cucaracha.ogg"></mix-track>
  <mix-track label="Carmen - prelude to act 1" src="./Carmen_-_Prelude_to_Act_1.ogg"></mix-track>
</mix-tape>

      
    


  
  