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

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>