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:
