DEV Community

Cover image for Create dev.to podcast player
Hossein Mobarakian
Hossein Mobarakian

Posted on

Create dev.to podcast player

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>

Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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();
}
Enter fullscreen mode Exit fullscreen mode

If you have question ,You can leave a comment.

Top comments (0)