Create dev.to podcast player
Tags: html, css, javascript
Published: 2021-06-15 07:43:06

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:
```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>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:

```css
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:
```javascript
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();
}
```

{% codepen https://codepen.io/hosseinmobarakian/pen/ZEeVLrd %}

If you have question ,You can leave a comment.