[music player] cr @ramdons

HTML

<link rel="stylesheet" href="https://web.archive.org/web/20230722202200cs_/https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="" crossorigin="anonymous">
</head>

<style>
  #musicplayer {
    display: grid;
    grid-template-columns: 20px auto;
    align-items: center;
    width: 200px;

    font-size: 20px;
    line-height: 140%;

    background: white;

    border: 3px double black;
    border-radius: 10px;

  }

  #musictitle {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: calc(100% - 10px - 1px);
    margin-left: calc(10px + 1px);
  }

  #musicpixel {
    width: 100%;
    padding: 5px;
    position: relative;

    min-height: 20px;

    border-right: 1px solid black;
  }


  .overlay {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: 0.3s ease;

    background: white;
  }

  #musicplayer:hover .overlay {
    opacity: 1;
    transition: 0.3s ease;
  }

  .playpause {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .playpause:hover {
    cursor: help;
  }

  #musicpixel img {
    display: block;
  }

  .marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
  }

  @keyframes marquee {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(-100%, 0);
    }
  }

</style>

<div id="musicplayer">
  <div id="musicpixel">
    <img src="https://64.media.tumblr.com/4b8b5edeb93a938b40814b1dd867833c/tumblr_inline_msbtvcHwwB1rkldve.gif">
    <div class="overlay">
      <div class="playpause"><i class="fas fa-play"></i></div>
    </div>
  </div>
  <div id="musictitle">
    <span class="marquee">windy summer cr ramdons</span>
  </div>
</div>

<audio id="musicsrc" loop...