简单的播放/暂停按钮动画

Question

如果我想要播放按钮我需要如何处理这个CSS更改为暂停按钮:点击<i class='material-icons'>pause</i>，播放声音。然后如果我点击暂停按钮，将其更改回播放按钮和将此框中的特定声音设置回0:00。如果声音结束，它应该自动切换到播放按钮和将声音设置回0:00.

我也想，如果我有2个或更多这样的盒子，每个播放/停止按钮将只适用于特定的一个，而不是所有的

.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;
}

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

Answer 1

这是一个简单的js脚本，你可以使用一个事件处理程序来改变图标从播放到暂停。您可以对声音做类似的操作。

let playButton = true;  //if true show pause button else show play on click
function changeButton() {
if(playButton) {
var x = document.getElementsByClassName("playbutton")[0];
x.innerHTML = "<i class='material-icons'>pause</i>";
playButton = !playButton;
} else {
var x = document.getElementsByClassName("playbutton")[0];
x.innerHTML = "";
x.innerHTML = "<i class='material-icons'>play_arrow</i>";
playButton = !playButton;
}
}

.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;
}

<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" onclick="changeButton()"><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>