Hi, I'm hossein and in this article, I will show you how to create a custom audio player (dev.to podcast player). I hope this article useful for you.
Create HTMl and CSS file
Put the codes below in your HTML file:
<!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>dev.to podcast player</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="podcast-player">
<img src="https://pixabay.com/get/g6bb610f7df4003373488a34d2f0fb260ed1c5a03e91d748b4a4867eef316d3ca1d902c3051859b512d9a52661eb2fd32_1280.jpg?attachment=" alt="" id="cover" class="cover">
<p id="play-btn"><i id="play-btn-icon" class="far fa-play-circle"></i></p>
</div>
<script src="main.js"></script>
</body>
</html>
Now we need to add some styles to our project and make a circle for the display podcast cover.Create a style.css file in your project folder and write these codes into that:
body{
background-color: #ccc;
text-align: center;
}
.cover {
background-color: red ;
border-radius: 100%;
object-fit:cover;
width: 250px;
height: 250px;
position: relative;
animation: 10s infinite rotation;
animation-timing-function: linear;
animation-play-state: paused ;
}
#play-btn{
color: #fff;
font-size: 80px;
position: relative;
margin: -170px auto 0;
}
#play-btn-icon{
background-color: rgba(106, 178, 238, 0.575);
border-radius: 100%;
}
.podcast-player{
width: max-content;
height: max-content;
text-align: center;
margin: 50px auto;
}
@keyframes rotation {
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(359deg);
}
}
After creating an interface for our podcast player we must do some javascript code to play, pause, etc.
Create main.js file
The last part of this project has started. create a main.js file and write codes below into it:
let state={
isPlayed:false,
};
let audioLink ="http://chtbl.com/track/B4E5G4/audio.operations.fm/episode-8-working-from-home.mp3";
let audio = new Audio(audioLink);
let playButtonIcon = document.getElementById("play-btn-icon");
let cover = document.getElementById("cover");
playButtonIcon.addEventListener("click",function (){
changePlayState();
});
function changePlayState(){
state.isPlayed = !state.isPlayed;
cover.style.animationPlayState= (state.isPlayed)?"running":"paused";
changePlayIcon();
changeAudioPlayState();
}
function changePlayIcon(){
playButtonIcon.classList.remove("fa-play-circle");
playButtonIcon.classList.remove("fa-pause-circle");
if(!state.isPlayed)
playButtonIcon.classList.add("fa-play-circle");
else
playButtonIcon.classList.add("fa-pause-circle");
}
function changeAudioPlayState(){
if(state.isPlayed)
return audio.play();
audio.pause();
}
If you have question ,You can leave a comment.
Top comments (0)