CSS Record Player (Play on click/ control the volume of the audio)

---

To learn how to create the Record Player (Play on click/ control the volume of the audio) with CSS and JavaScript follow the steps below and watch the video tutorial.

Demo:

*to see the animation and play the audio on the website click here.

Step1.

Add HTML

Use the <audio> and <source> tags to link the audio/ music.

<div class="record-player">
  <input type="checkbox" id="headshell">
  <label class="headshell" for="headshell"></label>
  <audio id="player">
  <source src="https://lenadesign.org/wp-content/uploads/2022/03/Sunshine-Telecasted.mp3" type="audio/mpeg"/>
</audio>
  <input type="range" max="1" min="0" step="0.1" id="volume-control" onchange="audioVolume(this.value)">
  <div class="plinth"></div>
  <div class="platter"></div>
  <div class="vinyl"></div>
  <div class="top-circle"></div>
</div>

Step2.

Add CSS

Set the position and colour of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #708d81;
  overflow: hidden;
}

.record-player {
  position: relative;
}

Style the record player:

.plinth {
  position: relative;
  background-color: #760d19;
  width:400px;
  height: 300px;
  box-shadow: 3px 3px 5px rgba(0,0,0,.5);
  border-radius: 20px;
}

.plinth:before {
  content:"";
  position: absolute;
  width:395px;
  height: 295px;
  background-color: #c4222f;
  border-radius: 20px;
}

.plinth:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #2c2424;
  width: 30px;
  height: 30px;
  top:20px;
  left:20px;
  box-shadow: 0 230px #2c2424;
}
.platter {
  position: absolute;
  border-radius: 50%;
  width:270px;
  height: 270px;
  background-color: #d6d6d6;
  z-index:2;
  top:15px;
  left:15px;
}

.platter:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #d6d6d6;
  width:40px;
  height:40px;
  border: 10px solid #2c2424;
  left:280px;
  top:30px;
}

.vinyl {
  position: absolute;
  background-image: repeating-radial-gradient(#181312, #181312 10%, #2c2424 15%);
  border-radius:50%;
  width:250px;
  height:250px;
  z-index:5;
  top:25px;
  left:25px;
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.vinyl:before, .vinyl:after {
  content:"";
  position: absolute;
  border-style: solid;
  border-color: rgba(255,255,255,.1) transparent transparent transparent;
  border-width: 130px 50px 0 125px;
}

.vinyl:after {
  top:170px;
  left:60px;
  transform: rotate(-65deg);
}

.top-circle {
  position: absolute;
  z-index:10;
  width:70px;
  height: 70px;
  background-color: #7a101c;
  border-radius:50%;
  top:115px;
  left:115px;
}

.top-circle:before {
  content:"";
  position: absolute;
  border-radius:50%;
  width:15px;
  height:15px;
  background-color: #181312;
  top:28px;
  left:28px;
}

Style the input range slider:

input#volume-control {
  -webkit-appearance: none; 
  width: 100%; 
  background-color: transparent; 
}

input#volume-control:focus {
  outline: none; 
}

input#volume-control::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input#volume-control {
  position: absolute;
  z-index:1;
  transform: rotate(-90deg) scale(.25);
  left:40%;
  top:70%;
}

input#volume-control::-webkit-slider-thumb {
   -webkit-appearance: none;
   cursor: pointer;
   width: 40px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
   margin-top:-4px;
}

input#volume-control::-moz-range-thumb {
   cursor: pointer;
   width: 30px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
}

input#volume-control::-ms-thumb {
  cursor: pointer;
   width: 30px;
   height:70px;
   background-color: #333533;
   border: none;
   border-radius:2px;
}

input#volume-control::-webkit-slider-runnable-track {
  background-color: #d6d6d6;
  border:none;
  margin:-30px; 
}

input#volume-control::-moz-range-track {
  background-color: #333533;
  border:30px solid black;
  outline:2px solid #d6d6d6;
}

Style and animate the headshell:

input#headshell {
  display: none;
}
.headshell {
  width: 30px;
  height: 140px;
  position: absolute;
  border-right: 10px solid #ffffff;
  border-bottom: 10px solid #ffffff;
  border-bottom-right-radius: 50px;
  z-index:15;
  left: 290px;
  top: 80px;
  cursor: pointer;
  transition: .3s;
  transform-origin: top;
}

.headshell:before, .headshell:after {
  content:"";
  position: absolute;
}

.headshell:before {
  background-color: black;
  width:20px;
  height:30px;
  top:-20px;
  left:25px;
}

.headshell:after {
  height:0;
  width:15px;
  border-top: 25px solid #b2aea6;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  top:133px;
  left:-20px;
  transform: rotate(90deg);
}

#headshell:checked + .headshell {
  transform: rotate(35deg);
}

@keyframes play  {
  to {transform: rotate(360deg);}
}

#headshell:checked ~ .vinyl {
  animation: play 2s linear infinite .3s;
}

Step3.

Add JavaScript

To play/ pause the audio on click:

let input = document.getElementById("headshell");
let audio = document.getElementById("player");

input.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    audio.currentTime = 0;
    input.innerHTML = "Pause";
  } else {
    audio.pause();
    input.innerHTML = "Play";
  }
});

To control the volume of the audio:

function audioVolume(amount) {
  let changevolume = document.getElementsByTagName("audio")[0];
  changevolume.volume = amount;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Christmas Animation

CSS Spooky House Animation

CSS Coffee Express Animation