koel/resources/assets/js/components/layout/app-footer/AudioPlayer.vue

<template>
  <!--
    A very thin wrapper around Plyr, extracted as a standalone component for easier styling and to work better with HMR.
  -->
  <div class="plyr w-full h-[4px]">
    <audio class="hidden" controls crossorigin="anonymous" />
  </div>
</template>

<style lang="postcss">
/* can't be scoped as it would be overridden by the plyr css */
.plyr {
  .plyr__controls {
    @apply bg-transparent shadow-none absolute top-0 w-full;
    @apply p-0 !important;
  }

  .plyr__progress--played[value] {
    @apply transition duration-300 ease-in-out text-white/10;

    :fullscreen & {
      @apply text-white/50 rounded-full overflow-hidden;
    }
  }

  &:hover {
    .plyr__progress--played[value] {
      @apply text-k-highlight;
    }
  }

  .plyr__progress--played[value] {
    @apply no-hover:text-k-highlight;
  }

  :fullscreen & {
    @apply z-[4] bg-white/20 rounded-full;

    .plyr__progress--played[value] {
      @apply text-white !important;
    }
  }
}
</style>