What do I need to do with this CSS if I want the **play button** to change into this **pause button**: `<i class='material-icons'>pause</i>` on click and play a sound. Then if I click on the **pause button**, change it back to a **play button** and **set the specific sound in this box back to 0:00**. If the sound ends, it should automatically switch to a **play button** and **set the sound back to 0:00**.

I want as well if I have for example 2 or more boxes like this every play/stop button will work only for the specific one and not for all of them.

Also can some designer look at that play button and update it to look better, but that isn't the main problem..

```css
.box {
    text-align: center;
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(#ffffff, #f5f5f5);
    padding: 16px;
    margin: 0 0 10px 0;
    position: relative;

}

.box_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom:  1px solid rgb(170, 170, 170);
    cursor: pointer;
}
.box_title i {
    padding-right: 10px;
}

.box_content {
    margin: 0 0 18px 0;
    border-bottom:  1px solid rgb(170, 170, 170);
    text-align: justify;
}

.box_footer {
    position:absolute;               
                bottom:-5px;                         
                left:20px;  
    font-size: 14px;

}

.box_footer_right i {
    font-size: 14px;
    padding: 0 0.3em 0 0.3em;
    cursor: pointer;
}

.box_footer_right {
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;                 
                bottom:-5px;                         
                right:20px;  
}

.playbutton {
    cursor: pointer;
    object-fit: cover;
      border-radius: 50%;
      margin: 1em auto 20px auto;
      display: block;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(#ffffff, #f5f5f5);
    width: 125px;
    -webkit-transition: 0.5s;
    user-select: none;
}

.playbutton:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    -webkit-transition: 0.5s;
}

.playbutton:active {
    background: #f5f5f5;
    box-shadow: 0 5px #f5f5f5;
    -webkit-transition: 0s;
    transform: translateY(4px);
}

.playbutton i {
    font-size: 120px;
}
```

```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<div class="box">
            <div class="box_title"><i class='material-icons'>graphic_eq</i>Test song title</div>
            <div class="playbutton"><i class='material-icons'>play_arrow</i>  <!-- <i class='material-icons'>pause</i> --></div>
            <div class="box_content">

                <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>

                <p class="box_footer"> date | autor </p>
                <p class="box_footer_right"> <i class='material-icons'>delete</i> | <i class='material-icons'>edit</i> | <i class='material-icons'>visibility</i></p>
            </div>
        </div>
```