Music Player

DEMO LINK 👉👉 https://ub6tk8.csb.app/

Follow for more

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    
      <!-- a code by saravanan -->
      <audio id="a">
        <source src="superman.mp3" type="audio/mpeg"/>
      </audio>
      <div class="main flex" id="h">
        <div class="shadows">
          <div class="shadow shadow-1"></div>
          <div class="shadow shadow-2"></div>
          <div class="shadow shadow-3"></div>
        </div>
        <div class="waves is-wave-playing" id="lgh">
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
          <div class="wave"></div>
        </div>
        <div class="a">
          <div class="a__front face"> </div>
          <div class="a__back face"> </div>
          <div class="a__right face"> </div>
          <div class="a__left face"> </div>
          <div class="a__top face"> </div>
          <div class="a__bottom face"> </div>
        </div>
        <div class="b">
          <div class="b__front face"> </div>
          <div class="b__back face"> </div>
          <div class="b__right face"> </div>
          <div class="b__left face"> </div>
          <div class="b__top face"> </div>
          <div class="b__bottom face"> </div>
        </div>
        <div class="c">
          <div class="c__front face"> </div>
          <div class="c__back face"> </div>
          <div class="c__right face"> </div>
          <div class="c__left face"> </div>
          <div class="c__top face"> </div>
          <div class="c__bottom face"> </div>
        </div>
        <div class="d">
          <div class="d__front face"> </div>
          <div class="d__back face"> </div>
          <div class="d__right face"> </div>
          <div class="d__left face"> </div>
          <div class="d__top face">
            <div class="d-shadow" id="tsh"></div>
          </div>
          <div class="d__bottom face"> </div>
        </div>
        <div class="e">
          <div class="e__front face"> </div>
          <div class="e__back face"> </div>
          <div class="e__right face"> </div>
          <div class="e__left face"> </div>
          <div class="e__top face"> </div>
          <div class="e__bottom face"> </div>
        </div>
        <div class="f">
          <div class="f__front face"> </div>
          <div class="f__back face"> </div>
          <div class="f__right face"> </div>
          <div class="f__left face"> </div>
          <div class="f__top face"> </div>
          <div class="f__bottom face"> </div>
        </div>
        <div class="g">
          <div class="g__front face"> </div>
          <div class="g__back face"> </div>
          <div class="g__right face"> </div>
          <div class="g__left face"> </div>
          <div class="g__top face"> </div>
          <div class="g__bottom face"> </div>
        </div>
        <div class="h" id="cas">
          <div class="h__front face"> </div>
          <div class="h__back face"> </div>
          <div class="h__right face"> </div>
          <div class="h__left face"> </div>
          <div class="h__top face"> </div>
        </div>
        <div class="i">
          <div class="i__front face"> </div>
          <div class="i__back face"> </div>
          <div class="i__right face"> </div>
          <div class="i__left face"> </div>
          <div class="i__top face"> </div>
          <div class="i__bottom face"> </div>
        </div>
        <div class="j">
          <div class="j__front face"> </div>
          <div class="j__back face"> </div>
          <div class="j__right face"> </div>
          <div class="j__left face"> </div>
          <div class="j__top face"> </div>
          <div class="j__bottom face"> </div>
        </div>
        <div class="k">
          <div class="k__front face"> </div>
          <div class="k__back face"> </div>
          <div class="k__right face"> </div>
          <div class="k__left face"> </div>
          <div class="k__top face"> </div>
          <div class="k__bottom face"> </div>
        </div>
        <div class="buttons">
          <div class="button">
            <div class="button-a">
              <div class="button-a__front face"> </div>
              <div class="button-a__back face"> </div>
              <div class="button-a__right face"> </div>
              <div class="button-a__left face"> </div>
              <div class="button-a__top face"> </div>
              <div class="button-a__bottom face"> </div>
            </div>
            <div class="button-b">
              <div class="button-b__front face"> </div>
              <div class="button-b__back face"> </div>
              <div class="button-b__right face"> </div>
              <div class="button-b__left face"> </div>
              <div class="button-b__top face"> </div>
              <div class="button-b__bottom face"> </div>
            </div>
          </div>
          <div class="button">
            <div class="button-a">
              <div class="button-a__front face"> </div>
              <div class="button-a__back face"> </div>
              <div class="button-a__right face"> </div>
              <div class="button-a__left face"> </div>
              <div class="button-a__top face"> </div>
              <div class="button-a__bottom face"> </div>
            </div>
            <div class="button-b">
              <div class="button-b__front face"> </div>
              <div class="button-b__back face"> </div>
              <div class="button-b__right face"> </div>
              <div class="button-b__left face"> </div>
              <div class="button-b__top face"> </div>
              <div class="button-b__bottom face"> </div>
            </div>
          </div>
          <div class="button">
            <div class="button-a">
              <div class="button-a__front face"> </div>
              <div class="button-a__back face"> </div>
              <div class="button-a__right face"> </div>
              <div class="button-a__left face"> </div>
              <div class="button-a__top face"> </div>
              <div class="button-a__bottom face"> </div>
            </div>
            <div class="button-b">
              <div class="button-b__front face"> </div>
              <div class="button-b__back face"> </div>
              <div class="button-b__right face"> </div>
              <div class="button-b__left face"> </div>
              <div class="button-b__top face"> </div>
              <div class="button-b__bottom face"> </div>
            </div>
          </div>
          <div class="button">
            <div class="button-a">
              <div class="button-a__front face"> </div>
              <div class="button-a__back face"> </div>
              <div class="button-a__right face"> </div>
              <div class="button-a__left face"> </div>
              <div class="button-a__top face"> </div>
              <div class="button-a__bottom face"> </div>
            </div>
            <div class="button-b">
              <div class="button-b__front face"> </div>
              <div class="button-b__back face"> </div>
              <div class="button-b__right face"> </div>
              <div class="button-b__left face"> </div>
              <div class="button-b__top face"> </div>
              <div class="button-b__bottom face"> </div>
            </div>
          </div>
          <div class="button">
            <div class="button-a">
              <div class="button-a__front face"> </div>
              <div class="button-a__back face"> </div>
              <div class="button-a__right face"> </div>
              <div class="button-a__left face"> </div>
              <div class="button-a__top face"> </div>
              <div class="button-a__bottom face"> </div>
            </div>
            <div class="button-b">
              <div class="button-b__front face"> </div>
              <div class="button-b__back face"> </div>
              <div class="button-b__right face"> </div>
              <div class="button-b__left face"> </div>
              <div class="button-b__top face"> </div>
              <div class="button-b__bottom face"> </div>
            </div>
          </div>
          <div class="button">
            <div class="button-a">
              <div class="button-a__front face"> </div>
              <div class="button-a__back face"> </div>
              <div class="button-a__right face"> </div>
              <div class="button-a__left face"> </div>
              <div class="button-a__top face"> </div>
              <div class="button-a__bottom face"> </div>
            </div>
            <div class="button-b">
              <div class="button-b__front face"> </div>
              <div class="button-b__back face"> </div>
              <div class="button-b__right face"> </div>
              <div class="button-b__left face"> </div>
              <div class="button-b__top face"> </div>
              <div class="button-b__bottom face"> </div>
            </div>
          </div>
        </div>
        <div class="circle flex">
          <div class="circle-a">sa
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__side"></div>
            <div class="circle-a__bottom"></div>
            <div class="circle-a__top"></div>
          </div>
        </div>
      </div>
      <!-- script -->
        <script  src="./script.js"></script>
      
  </body>
</html>

style.css

/*
A code by saravanan
follow for more..
*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  font-family: cursive;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  background-color: #fffff9;
}
.face {
  position: absolute;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
/***********************/
/***********************/
.main {
  position: absolute;
  width: 70vmin;
  height: 49vmin;
  transform: perspective(700vmin) rotateX(60deg) rotateZ(40deg) translateZ(-10.5vmin);
  transition: transform 350ms ease-out;
}
.shadows {
  position: absolute;
  top: 0;
  left: -2%;
  width: 102%;
  height: 100%;
  transform: translateZ(-0.175vmin);
  background-color: #a67e6e;
}
.shadow {
  position: absolute;
}
.shadow-1 {
  top: 100%;
  width: 100%;
  height: 7vmin;
  transform-origin: top left;
  transform: skewX(-5deg);
  background-image: linear-gradient(to bottom, #a67e6e, #b39284, #bda094 40%);
}
.shadow-2 {
  left: 100%;
  width: 1.75vmin;
  height: 100%;
  transform-origin: top left;
  transform: skewY(40deg);
  background-image: linear-gradient(to right, #a67e6e, #bda094);
}
.waves {
  position: absolute;
  top: 112%;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  width: 100%;
  height: 100%;
}
.is-wave-playing {
  display: none;
}
.wave {
  height: 0vmin;
  width: 7vmin;
  background-color: #bda094;
}
.wave:nth-of-type(2) {
  animation: wave 500ms ease-in alternate infinite 200ms;
}
.wave:nth-of-type(3) {
  animation: wave 500ms ease-in alternate infinite 300ms;
}
.wave:nth-of-type(4) {
  animation: wave 500ms ease-in alternate infinite 400ms;
}
.wave:nth-of-type(5) {
  animation: wave 500ms ease-in alternate infinite 500ms;
}
.wave:nth-of-type(6) {
  animation: wave 500ms ease-in alternate infinite 600ms;
}
.wave:nth-of-type(1), .wave:nth-of-type(7) {
  height: 0vmin;
  animation: wave-2 600ms ease-in alternate infinite 4250ms;
}
@keyframes wave {
  0%, 100% {
    height: 7vmin;
  }
  24% {
    height: 10.5vmin;
  }
  25%, 30% {
    height: 11.375vmin;
  }
  55%, 60% {
    height: 7.875vmin;
  }
  61%, 65% {
    height: 11.55vmin;
  }
  80%, 82% {
    height: 6.125vmin;
  }
  83%, 90% {
    height: 5.25vmin;
  }
  95% {
    height: 5.6875vmin;
  }
}
@keyframes wave-2 {
  0%, 50% {
    height: 0vmin;
  }
  75%, 100% {
    height: 8.75vmin;
  }
}
.a {
  width: 66.5vmin;
  height: 47.25vmin;
  position: absolute;
  top: 0.875vmin;
  left: 0;
}
.a__front {
  width: 66.5vmin;
  height: 1.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(45.5vmin);
}
.a__back {
  width: 66.5vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-66.5vmin) translateY(-1.75vmin);
}
.a__right {
  width: 47.25vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(66.5vmin) translateX(-47.25vmin) translateY(-1.75vmin);
}
.a__left {
  width: 47.25vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.a__top {
  width: 66.5vmin;
  height: 47.25vmin;
  transform-origin: top left;
  transform: translateZ(1.75vmin);
}
.a__bottom {
  width: 66.5vmin;
  height: 47.25vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-66.5vmin);
}
.a__front {
  background-image: linear-gradient(to bottom, #988193, #bfb1bc);
}
.a__back {
  background-image: linear-gradient(to bottom, #be9eb9, #d7c3d3);
}
.a__left {
  background-image: linear-gradient(to bottom, #988193, #bfb1bc);
}
.a__right {
  background-image: linear-gradient(to bottom, #aa97a6, #c1b3be);
}
.a__top {
  background-color: #e7dbe5;
}
.a__bottom {
  background-color: #aa97a6;
  box-shadow: 0 0 1.3125vmin 0.875vmin #62473c;
}
.b {
  width: 70vmin;
  height: 49vmin;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(1.75vmin);
}
.b__front {
  width: 70vmin;
  height: 5.25vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(43.75vmin);
}
.b__back {
  width: 70vmin;
  height: 5.25vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-70vmin) translateY(-5.25vmin);
}
.b__right {
  width: 49vmin;
  height: 5.25vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(70vmin) translateX(-49vmin) translateY(-5.25vmin);
}
.b__left {
  width: 49vmin;
  height: 5.25vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-5.25vmin);
}
.b__top {
  width: 70vmin;
  height: 49vmin;
  transform-origin: top left;
  transform: translateZ(5.25vmin);
}
.b__bottom {
  width: 70vmin;
  height: 49vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-70vmin);
}
.b__front {
  background-image: linear-gradient(to top, #2c2514, #3d341c);
  border-top: 0.35vmin solid #62532c;
  border-bottom: 0.35vmin solid #2b2513;
}
.b__front::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 7.875vmin;
  height: 2.1875vmin;
  background-image: linear-gradient(to right, #0c0a05, black, #0c0a05);
}
.b__back {
  background-image: linear-gradient(to bottom, #2c2514, #3d341c);
  border-top: 0.35vmin solid #62532c;
  border-bottom: 0.35vmin solid #3a311a;
}
.b__left {
  background-image: linear-gradient(to top, #2c2514, #3d341c);
  border-top: 0.35vmin solid #62532c;
  border-bottom: 0.35vmin solid #2c2514;
}
.b__right {
  background-image: linear-gradient(to top, #1d190d, #2f2815);
  border-top: 0.35vmin solid #4e4324;
  border-bottom: 0.35vmin solid #0c0a05;
}
.b__top {
  background-color: #211c0f;
}
.b__bottom {
  background-color: #0c0a05;
}
.c {
  width: 38.325vmin;
  height: 48.3vmin;
  position: absolute;
  top: 0.175vmin;
  left: 0.175vmin;
  transform: translateZ(7.175vmin);
}
.c__front {
  width: 38.325vmin;
  height: 1.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(46.55vmin);
}
.c__back {
  width: 38.325vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-38.325vmin) translateY(-1.75vmin);
}
.c__right {
  width: 48.3vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(38.325vmin) translateX(-48.3vmin) translateY(-1.75vmin);
}
.c__left {
  width: 48.3vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.c__top {
  width: 38.325vmin;
  height: 48.3vmin;
  transform-origin: top left;
  transform: translateZ(1.75vmin);
}
.c__bottom {
  width: 38.325vmin;
  height: 48.3vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-38.325vmin);
}
.c__front {
  background-image: linear-gradient(to top, #674e40, #96725d);
  border-top: 0.2625vmin solid #b99681;
  border-bottom: 0.2625vmin solid #785846;
}
.c__back {
  background-image: linear-gradient(to top, #674e40, #96725d);
  border-top: 0.2625vmin solid #b99681;
  border-bottom: 0.2625vmin solid #785846;
}
.c__left {
  background-image: linear-gradient(to top, #574236, #96725d);
  border-top: 0.2625vmin solid #b99681;
  border-bottom: 0.2625vmin solid #785846;
}
.c__right {
  background-color: #3e2e24;
}
.c__top {
  background-color: #b08871;
  background-image: linear-gradient(to bottom, #b5907b, #b08871, #ab8067);
  border-top: 0.35vmin solid #d4bfb3;
}
.c__top::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 2.0125vmin 1.75vmin;
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #b08871 50%, #b08871 100%), linear-gradient(0deg, #1e1611 0%, #5e4537 50%, #b08871 50%, #b08871 100%);
  background-size: 2.45vmin 1.8375vmin;
  background-clip: content-box;
}
.c__bottom {
  background-color: #4e392e;
}
.d {
  width: 20.825vmin;
  height: 13.65vmin;
  position: absolute;
  bottom: 0.35vmin;
  left: 38.85vmin;
  transform: translateZ(7.175vmin);
}
.d__front {
  width: 20.825vmin;
  height: 1.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(11.9vmin);
}
.d__back {
  width: 20.825vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-1.75vmin);
}
.d__right {
  width: 13.65vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-13.65vmin) translateY(-1.75vmin);
}
.d__left {
  width: 13.65vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.d__top {
  width: 20.825vmin;
  height: 13.65vmin;
  transform-origin: top left;
  transform: translateZ(1.75vmin);
}
.d__bottom {
  width: 20.825vmin;
  height: 13.65vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-20.825vmin);
}
.d__front {
  background-image: linear-gradient(to top, #49423d, #736860);
  border-top: 0.2625vmin solid #89817a;
  border-bottom: 0.2625vmin solid #5d534b;
}
.d__back {
  background-image: linear-gradient(to bottom, #615b56, #7c746e);
}
.d__left {
  background-image: linear-gradient(to top, #574f49, #736860);
}
.d__right {
  background-color: #39322e;
}
.d__top {
  background-color: #7c746e;
  background-image: linear-gradient(to bottom, #6e6762, #6e6762);
}
.d__bottom {
  background-color: #39322e;
}
.d-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.25vmin;
  background-image: linear-gradient(12deg, transparent 50%, #554b45 50%);
  transition: height 100ms linear;
}
.is-tape-close {
  height: 0;
  transition: height 100ms linear;
}
.e {
  width: 20.825vmin;
  height: 1.75vmin;
  position: absolute;
  bottom: 14vmin;
  left: 38.85vmin;
  transform: translateZ(7.175vmin);
}
.e__front {
  width: 20.825vmin;
  height: 1.3125vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0.4375vmin);
}
.e__back {
  width: 20.825vmin;
  height: 1.3125vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-1.3125vmin);
}
.e__right {
  width: 1.75vmin;
  height: 1.3125vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-1.75vmin) translateY(-1.3125vmin);
}
.e__left {
  width: 1.75vmin;
  height: 1.3125vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.3125vmin);
}
.e__top {
  width: 20.825vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: translateZ(1.3125vmin);
}
.e__bottom {
  width: 20.825vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-20.825vmin);
}
.e__front {
  background-color: #0e0d0c;
}
.e__back {
  background-color: #473f39;
}
.e__left {
  background-color: #0e0d0c;
}
.e__right {
  background-color: #0e0d0c;
}
.e__top {
  background-color: #554b45;
}
.e__bottom {
  background-color: #0e0d0c;
}
.f {
  width: 20.825vmin;
  height: 1.75vmin;
  position: absolute;
  top: 0;
  left: 38.85vmin;
  transform: translateZ(7.175vmin);
}
.f__front {
  width: 20.825vmin;
  height: 1.3125vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0.4375vmin);
}
.f__back {
  width: 20.825vmin;
  height: 1.3125vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-1.3125vmin);
}
.f__right {
  width: 1.75vmin;
  height: 1.3125vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-1.75vmin) translateY(-1.3125vmin);
}
.f__left {
  width: 1.75vmin;
  height: 1.3125vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.3125vmin);
}
.f__top {
  width: 20.825vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: translateZ(1.3125vmin);
}
.f__bottom {
  width: 20.825vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-20.825vmin);
}
.f__front {
  background-color: #2b2622;
}
.f__back {
  background-image: linear-gradient(to bottom, #635850, #473f39);
  border-top: 0.35vmin solid #89817a;
}
.f__left {
  background-color: #0e0d0c;
}
.f__right {
  background-color: #0e0d0c;
}
.f__top {
  background-color: #66605b;
}
.f__bottom {
  background-color: #0e0d0c;
}
.g {
  width: 19.25vmin;
  height: 29.75vmin;
  position: absolute;
  bottom: 16.625vmin;
  left: 39.55vmin;
  transform: translateZ(7.175vmin);
}
.g__front {
  width: 19.25vmin;
  height: 0.875vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(28.875vmin);
}
.g__back {
  width: 19.25vmin;
  height: 0.875vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-19.25vmin) translateY(-0.875vmin);
}
.g__right {
  width: 29.75vmin;
  height: 0.875vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(19.25vmin) translateX(-29.75vmin) translateY(-0.875vmin);
}
.g__left {
  width: 29.75vmin;
  height: 0.875vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.875vmin);
}
.g__top {
  width: 19.25vmin;
  height: 29.75vmin;
  transform-origin: top left;
  transform: translateZ(0.875vmin);
}
.g__bottom {
  width: 19.25vmin;
  height: 29.75vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-19.25vmin);
}
.g__front {
  background-color: black;
}
.g__back {
  background-color: black;
}
.g__left {
  background-color: black;
}
.g__right {
  background-color: black;
}
.g__top {
  background-color: #4e4945;
  background-image: linear-gradient(to bottom, #252321, #252321);
}
.g__top::before {
  content: "TOTO - 1978";
  position: absolute;
  width: 22.75vmin;
  height: 3.0625vmin;
  transform-origin: top left;
  transform: rotateZ(90deg);
  top: 3.5vmin;
  left: 7vmin;
  font-size: 1.75vmin;
  text-align: center;
  line-height: 2;
  background-color: #e7dbe5;
  color: black;
}
.g__top::after {
  content: "";
  position: absolute;
  top: 5.25vmin;
  right: 3.5vmin;
  width: 4.375vmin;
  height: 4.375vmin;
  border-radius: 50%;
  background-color: #c1b3be;
  box-shadow: 0 14vmin 0 #c1b3be;
}
.g__bottom {
  background-color: black;
}
.h {
  width: 20.825vmin;
  height: 35vmin;
  position: absolute;
  bottom: 14vmin;
  left: 38.85vmin;
  transform-origin: top left;
  transform: translateZ(8.4875vmin) rotateY(-12deg);
  transition: transform 100ms linear;
}
.h__front {
  width: 20.825vmin;
  height: 0.4375vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(34.5625vmin);
}
.h__back {
  width: 20.825vmin;
  height: 0.4375vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-20.825vmin) translateY(-0.4375vmin);
}
.h__right {
  width: 35vmin;
  height: 0.4375vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(20.825vmin) translateX(-35vmin) translateY(-0.4375vmin);
}
.h__left {
  width: 35vmin;
  height: 0.4375vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4375vmin);
}
.h__top {
  width: 20.825vmin;
  height: 35vmin;
  transform-origin: top left;
  transform: translateZ(0.4375vmin);
}
.h__bottom {
  width: 20.825vmin;
  height: 35vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-20.825vmin);
}
.h__front {
  background-image: linear-gradient(to top, rgba(87, 79, 73, 0.85), rgba(115, 104, 96, 0.85));
}
.h__back {
  background-image: linear-gradient(to top, rgba(87, 79, 73, 0.85), rgba(115, 104, 96, 0.85));
}
.h__left {
  background-image: linear-gradient(to top, rgba(87, 79, 73, 0.85), rgba(115, 104, 96, 0.85));
}
.h__right {
  background-color: rgba(57, 50, 46, 0.8);
}
.h__top {
  background-image: linear-gradient(to bottom, rgba(124, 116, 110, 0.85), rgba(110, 103, 98, 0.85));
  border: 0.35vmin solid #817973;
  overflow: hidden;
}
.h__top::after {
  content: "";
  position: absolute;
  top: 20%;
  width: 100%;
  height: 8.75vmin;
  transform-origin: top left;
  transform: skewY(35deg);
  background-color: rgba(231, 219, 229, 0.1);
  filter: blur(1.3125vmin);
}
.h__bottom {
  background-color: #39322e;
}
.is-radio-playing {
  transform: translateZ(8.4875vmin) rotateY(0deg);
  transition: transform 100ms linear;
}
.i {
  width: 9.625vmin;
  height: 13.65vmin;
  position: absolute;
  bottom: 0.35vmin;
  left: 60.025vmin;
  transform: translateZ(7.175vmin);
}
.i__front {
  width: 9.625vmin;
  height: 1.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(11.9vmin);
}
.i__back {
  width: 9.625vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.625vmin) translateY(-1.75vmin);
}
.i__right {
  width: 13.65vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.625vmin) translateX(-13.65vmin) translateY(-1.75vmin);
}
.i__left {
  width: 13.65vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.i__top {
  width: 9.625vmin;
  height: 13.65vmin;
  transform-origin: top left;
  transform: translateZ(1.75vmin);
}
.i__bottom {
  width: 9.625vmin;
  height: 13.65vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-9.625vmin);
}
.i__front {
  background-image: linear-gradient(to top, #705c6c, #d1c7cf);
  border-top: 0.2625vmin solid #f1eaf0;
}
.i__back {
  background-color: #5d4b59;
}
.i__left {
  background-color: #5d4b59;
}
.i__right {
  background-image: linear-gradient(to top, #796274, #c1b3be);
  border-top: 0.2625vmin solid #f1eaf0;
}
.i__top {
  background-color: #ddccda;
}
.i__bottom {
  background-color: #aa97a6;
}
.j {
  width: 4.8125vmin;
  height: 31.5vmin;
  position: absolute;
  bottom: 14vmin;
  left: 60.025vmin;
  transform: translateZ(7.175vmin);
}
.j__front {
  width: 4.8125vmin;
  height: 1.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(29.75vmin);
}
.j__back {
  width: 4.8125vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-4.8125vmin) translateY(-1.75vmin);
}
.j__right {
  width: 31.5vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.8125vmin) translateX(-31.5vmin) translateY(-1.75vmin);
}
.j__left {
  width: 31.5vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.j__top {
  width: 4.8125vmin;
  height: 31.5vmin;
  transform-origin: top left;
  transform: translateZ(1.75vmin);
}
.j__bottom {
  width: 4.8125vmin;
  height: 31.5vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-4.8125vmin);
}
.j__front {
  background-image: #d1c7cf;
}
.j__back {
  background-color: #e7dbe5;
}
.j__left {
  background-color: #5d4b59;
}
.j__right {
  background-color: #796274;
}
.j__top {
  background-image: linear-gradient(to bottom, #e7dbe5, #ddccda);
}
.j__bottom {
  background-color: #796274;
}
.k {
  width: 9.625vmin;
  height: 3.5vmin;
  position: absolute;
  top: 0.35vmin;
  left: 60.025vmin;
  transform: translateZ(7.175vmin);
}
.k__front {
  width: 9.625vmin;
  height: 1.75vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(1.75vmin);
}
.k__back {
  width: 9.625vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-9.625vmin) translateY(-1.75vmin);
}
.k__right {
  width: 3.5vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(9.625vmin) translateX(-3.5vmin) translateY(-1.75vmin);
}
.k__left {
  width: 3.5vmin;
  height: 1.75vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vmin);
}
.k__top {
  width: 9.625vmin;
  height: 3.5vmin;
  transform-origin: top left;
  transform: translateZ(1.75vmin);
}
.k__bottom {
  width: 9.625vmin;
  height: 3.5vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-9.625vmin);
}
.k__front {
  background-color: #5d4b59;
}
.k__back {
  background-image: linear-gradient(to top, #be9eb9, #e7dbe5);
  border-top: 0.35vmin solid #f1eaf0;
}
.k__left {
  background-color: #5d4b59;
}
.k__right {
  background-image: linear-gradient(to top, #796274, #c1b3be);
  border-top: 0.35vmin solid #f1eaf0;
}
.k__top {
  background-color: #e7dbe5;
}
.k__bottom {
  background-color: #aa97a6;
}
.buttons {
  position: absolute;
  top: 4.1125vmin;
  right: 0;
  transform: translateZ(7.175vmin);
  width: 4.9vmin;
  height: 30.8vmin;
  display: grid;
  gap: 0.0875vmin;
}
.button {
  position: relative;
  width: 5.25vmin;
  height: 4.55vmin;
  transform-origin: top left;
  transform: rotateY(-2deg);
}
.button:nth-of-type(1) .button-b .button-b__top {
  background-color: #ffae75;
  border: none;
  cursor: pointer;
  animation: button 750ms linear infinite alternate;
}
@keyframes button {
  to {
    background-color: #ff9042;
  }
}
.button-a {
  width: 3.9375vmin;
  height: 4.725vmin;
  position: absolute;
}
.button-a__front {
  width: 3.9375vmin;
  height: 1.225vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(3.5vmin);
}
.button-a__back {
  width: 3.9375vmin;
  height: 1.225vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-3.9375vmin) translateY(-1.225vmin);
}
.button-a__right {
  width: 4.725vmin;
  height: 1.225vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.9375vmin) translateX(-4.725vmin) translateY(-1.225vmin);
}
.button-a__left {
  width: 4.725vmin;
  height: 1.225vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.225vmin);
}
.button-a__top {
  width: 3.9375vmin;
  height: 4.725vmin;
  transform-origin: top left;
  transform: translateZ(1.225vmin);
}
.button-a__bottom {
  width: 3.9375vmin;
  height: 4.725vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-3.9375vmin);
}
.button-a__front {
  background-color: #5d4b59;
}
.button-a__back {
  background-color: #5d4b59;
}
.button-a__left {
  background-color: #5d4b59;
}
.button-a__right {
  background-image: linear-gradient(to bottom, #796274, #aa97a6);
}
.button-a__top {
  background-color: #5d4b59;
}
.button-a__bottom {
  background-color: #5d4b59;
}
.button-b {
  width: 4.55vmin;
  height: 4.725vmin;
  position: absolute;
  transform: translateZ(1.3125vmin);
}
.button-b__front {
  width: 4.55vmin;
  height: 0.4375vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(4.2875vmin);
}
.button-b__back {
  width: 4.55vmin;
  height: 0.4375vmin;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-4.55vmin) translateY(-0.4375vmin);
}
.button-b__right {
  width: 4.725vmin;
  height: 0.4375vmin;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(4.55vmin) translateX(-4.725vmin) translateY(-0.4375vmin);
}
.button-b__left {
  width: 4.725vmin;
  height: 0.4375vmin;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4375vmin);
}
.button-b__top {
  width: 4.55vmin;
  height: 4.725vmin;
  transform-origin: top left;
  transform: translateZ(0.4375vmin);
}
.button-b__bottom {
  width: 4.55vmin;
  height: 4.725vmin;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-4.55vmin);
}
.button-b__front {
  background-color: #796274;
}
.button-b__back {
  background-color: #796274;
}
.button-b__left {
  background-color: #5d4b59;
}
.button-b__right {
  background-image: linear-gradient(to bottom, #b6a5b2, #c1b3be);
}
.button-b__top {
  background-color: #e7dbe5;
  border: 0.35vmin solid #f5f0f4;
}
.button-b__bottom {
  background-color: #aa97a6;
}
.is-button-pressed {
  transform-origin: top left;
  transform: rotateY(5deg);
}
.circle {
  width: 8.75vmin;
  height: 8.75vmin;
  position: absolute;
  top: 86%;
  transform: translateZ(3.5vmin);
}
.circle-a {
  position: absolute;
  width: 1.225vmin;
  height: 8.75vmin;
  transform: rotateY(90deg) translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.circle-a__side {
  position: absolute;
  height: 0.8506944444vmin;
  width: 1.225vmin;
  background-color: #8f7589;
}
.circle-a__side:nth-of-type(1) {
  transform: rotateX(10deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(2) {
  transform: rotateX(20deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(3) {
  transform: rotateX(30deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(4) {
  transform: rotateX(40deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(5) {
  transform: rotateX(50deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(6) {
  transform: rotateX(60deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(7) {
  transform: rotateX(70deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(8) {
  transform: rotateX(80deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(9) {
  transform: rotateX(90deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(10) {
  transform: rotateX(100deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(11) {
  transform: rotateX(110deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(12) {
  transform: rotateX(120deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(13) {
  transform: rotateX(130deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(14) {
  transform: rotateX(140deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(15) {
  transform: rotateX(150deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(16) {
  transform: rotateX(160deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(17) {
  transform: rotateX(170deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(18) {
  transform: rotateX(180deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(19) {
  transform: rotateX(190deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(20) {
  transform: rotateX(200deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(21) {
  transform: rotateX(210deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(22) {
  transform: rotateX(220deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(23) {
  transform: rotateX(230deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(24) {
  transform: rotateX(240deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(25) {
  transform: rotateX(250deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(26) {
  transform: rotateX(260deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(27) {
  transform: rotateX(270deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(28) {
  transform: rotateX(280deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(29) {
  transform: rotateX(290deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(30) {
  transform: rotateX(300deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(31) {
  transform: rotateX(310deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(32) {
  transform: rotateX(320deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(33) {
  transform: rotateX(330deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(34) {
  transform: rotateX(340deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(35) {
  transform: rotateX(350deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__side:nth-of-type(36) {
  transform: rotateX(360deg) translateZ(4.375vmin);
  background-color: #b19fad;
  border-left: 0.175vmin solid #f1eaf0;
  border-right: 0.175vmin solid #b6a5b2;
}
.circle-a__top, .circle-a__bottom {
  position: absolute;
  width: 8.75vmin;
  height: 8.75vmin;
  border-radius: 50%;
  transform: rotateY(90deg) translateZ(0.6125vmin);
}
.circle-a__bottom {
  transform: rotateY(90deg) translateZ(-0.6125vmin);
}
.circle-a__bottom {
  background-color: #d1c7cf;
  border: 0.175vmin solid #f1eaf0;
}
.circle-a__top {
  background-color: #c1b3be;
}

script.js

// Developer Saro 
const unit = 1.75;
const b = document.body;
const h = document.querySelector("#h");
const a = document.querySelector("#a");
const cas = document.querySelector("#cas");
const btn = document.querySelector(".button:nth-of-type(1)");
const tsh = document.querySelector("#tsh");
const lgh = document.querySelector("#lgh");
/*****************/
const mouseDownFunc = () => b.addEventListener("mousemove", moveFunc);
const mouseUpFunc = () => b.removeEventListener("mousemove", moveFunc);
const moveFunc = (e) => {
  let x = e.pageX / window.innerWidth - 0.5;
  let y = e.pageY / window.innerHeight - 0.5;
  h.style.transform = `
        perspective(${400 * unit}vmin)
        rotateX(${y * 30 + 60}deg)
        rotateZ(${-x * 720 + 40}deg)
        translateZ(${-6 * unit}vmin)
    `;
};
const playFunc = () => {
  cas.classList.toggle("is-radio-playing");
  tsh.classList.toggle("is-tape-close");
  btn.classList.toggle("is-button-pressed");
  setTimeout(() => lgh.classList.toggle("is-wave-playing"), 1000);
  a.loop = true;
  if (a.paused) {
    a.play();
  } else {
    a.pause();
    a.currentTime = 0;
  }
};
/*****************/
h.addEventListener("mousedown", mouseDownFunc);
b.addEventListener("mouseup", mouseUpFunc);
btn.addEventListener("click", playFunc);

Sure, I'd be happy to provide a brief description of the 3D audio music player HTML code you have.
Based on your description, I assume that your HTML code includes the necessary HTML structure, CSS styling, and JavaScript functionality to create a 3D audio music player.
The HTML structure likely includes a container element that holds all the elements of the music player, such as an audio element that loads the audio files and a set of buttons for controlling music playback and adjusting the volume. Additionally, the HTML code may include a div element to hold the 3D visualization created with the Three.js library.
The CSS styling will likely include styles for the container element and its child elements, such as buttons, progress bars, and volume sliders. The CSS styles may also include styles for the 3D effect created with Three.js.
The JavaScript functionality likely includes code to handle button clicks, load audio files, adjust volume, and update the progress bar. Additionally, the JavaScript code will create the 3D effect using Three.js.
Overall, the 3D audio music player HTML code is a combination of HTML, CSS, and JavaScript that work together to create a functional and visually appealing music player that also includes a 3D effect.

When the user clicks on the play button, the JavaScript code will load the audio file and start playing it. The code will also update the progress bar to show the current position of the audio playback.

When the user adjusts the volume slider, the JavaScript code will update the volume of the audio playback accordingly.
Finally, the Three.js library is used to create a 3D effect that is synchronized with the audio playback. This can be done by creating a visual representation of the audio waveform in 3D space, or by creating a 3D animation that is synchronized with the audio playback.

Conclusion
In conclusion, an audio music player in 3D is a great way to provide an immersive and engaging audio experience for users. It can be created using HTML, CSS, and JavaScript, along with the Three.js library for creating the 3D effect.
The HTML structure of the audio music player includes a container element that holds all the elements of the player, an audio element to load the audio files, and a div element to hold the 3D visualization. CSS styling is used to give the player a professional look and feel, and to create a 3D effect using the transform and perspective properties.
JavaScript functionality is used to handle button clicks, load audio files, adjust volume, update the progress bar, and create the 3D effect using the Three.js library. When combined, these technologies provide a seamless and engaging audio experience for users.

Introduction Music is an integral part of our lives, and it has been around for centuries. With the advent of technology, music has become more accessible, and we can now listen to our favorite songs with just a click of a button. Audio music players have played a significant role in making music more accessible to people. In this blog, we will explore how to create an audio music player using HTML coding.

HTML Structure The HTML structure of an audio music player is relatively simple. It consists of a container element that holds all the elements of the player. Inside the container element, there is an audio element that loads the audio files. The audio element provides various functionalities like play, pause, stop, and skip tracks. It also has a volume control slider that allows the user to adjust the volume of the audio.

CSS Styling CSS styling is used to give the audio music player a professional look and feel. The CSS styles are applied to the container element and its child elements like buttons, progress bars, and volume sliders. CSS can be used to add various features to the audio music player like color, font size, font style, etc.

JavaScript Functionality JavaScript functionality is used to handle button clicks, load audio files, adjust volume, and update the progress bar. When the user clicks on the play button, the JavaScript code will load the audio file and start playing it. The code will also update the progress bar to show the current position of the audio playback.

When the user adjusts the volume slider, the JavaScript code will update the volume of the audio playback accordingly.

Creating a Custom Audio Music Player Now that we know the basics of creating an audio music player, let's create a custom audio music player using HTML coding. We will create a simple audio player that has play, pause, and volume control functionalities.

Search This Website

Developer Saro

Music Player - 3D

DEMO LINK 👉👉 https://ub6tk8.csb.app/

Follow for more

index.html

style.css

script.js

Sure, I'd be happy to provide a brief description of the 3D audio music player HTML code you have.
Based on your description, I assume that your HTML code includes the necessary HTML structure, CSS styling, and JavaScript functionality to create a 3D audio music player.

Overall, the 3D audio music player HTML code is a combination of HTML, CSS, and JavaScript that work together to create a functional and visually appealing music player that also includes a 3D effect.

When the user clicks on the play button, the JavaScript code will load the audio file and start playing it. The code will also update the progress bar to show the current position of the audio playback.

Comments

Post a Comment

Popular posts from this blog

Drag Papers Proposal 💕

Galaxy Proposal😻😻

Music Player - 3D

DEMO LINK 👉👉 https://ub6tk8.csb.app/

Follow for more

index.html

style.css

script.js

Sure, I'd be happy to provide a brief description of the 3D audio music player HTML code you have.Based on your description, I assume that your HTML code includes the necessary HTML structure, CSS styling, and JavaScript functionality to create a 3D audio music player.

Overall, the 3D audio music player HTML code is a combination of HTML, CSS, and JavaScript that work together to create a functional and visually appealing music player that also includes a 3D effect.

When the user clicks on the play button, the JavaScript code will load the audio file and start playing it. The code will also update the progress bar to show the current position of the audio playback.

Comments

Post a Comment

Popular posts from this blog

Drag Papers Proposal 💕

Galaxy Proposal😻😻

Sure, I'd be happy to provide a brief description of the 3D audio music player HTML code you have.
Based on your description, I assume that your HTML code includes the necessary HTML structure, CSS styling, and JavaScript functionality to create a 3D audio music player.