javascript - 如何为特定的音频播放器编写JavaScript代码

Question

我在下面以音频播放器的形式编写了此代码，我想通过javascript使它工作，但我不知道从哪里开始？我想有一个播放和暂停选项，仅此而已!由于我是javascript语言的新手，所以我不知道如何使它工作!
如何为该音频播放器编写JavaScript？

#musicplayer {
  position: fixed;
  z-index: 999999;
  bottom: 25px;
  margin-left: 20px;
  display: flex;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

#musicplayer>*,
.play>* {
  align-self: center;
  -webkit-align-self: center
}

.roundthing img {
  margin: 8px;
  width: 15px;
  margin-bottom: 200px;
}

.midline {
  width: 0px;
  height: 3px;
  background: #fff;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
}

#musicplayer:hover .midline {
  width: 20px;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.play {
  display: flex;
  min-width: 124px;
  height: 31px;
  text-align: left;
  padding: 0px 10px;
  background: #fff;
  /* player background */
  border-left: 3px solid #16090F;
  /* player border */
  color: #B5A7BA;
  opacity: 0;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
  margin-top: -200px;
}

.music-controls,
.music-controls>* {
  user-select: none;
  -webkit-user-select: none;
  width: 11px;
  font-size: 11px;
  cursor: pointer;
}

.pausee {
  display: none;
}

.playtext {
  margin-left: 8px;
  font-family: courier new;
  font-size: 9px;
}

#musicplayer:hover .play {
  opacity: 1;
  transition-delay: .0s;
  -webkit-transition-delay: .0s;
}

<div id="musicplayer" class="box fade-in one">
  <div class="roundthing">
    <img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
  <div class="midline"></div>
  <div class="play">
    <div class="music-controls">
      <div class="playy">►</div>
      <div class="pausee">❚❚</div>
    </div>
    <div class="playtext">Fairytail</div>
  </div>
  <!--play-->

  <audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>

Answer 1

你的意思是这样的吗？

window.addEventListener("load",function() {
  document.querySelector(".playy").addEventListener("click",function() {
    document.getElementById("tune").play();
    this.style.display="none";
    document.querySelector(".pausee").style.display="block";  
  })
  document.querySelector(".pausee").addEventListener("click",function() {
    document.getElementById("tune").pause()
    this.style.display="none";
    document.querySelector(".playy").style.display="block";  
  })
})

#musicplayer {
  position: fixed;
  z-index: 999999;
  bottom: 25px;
  margin-left: 20px;
  display: flex;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

#musicplayer>*,
.play>* {
  align-self: center;
  -webkit-align-self: center
}

.roundthing img {
  margin: 8px;
  width: 15px;
  margin-bottom: 200px;
}

.midline {
  width: 0px;
  height: 3px;
  background: #fff;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
}

#musicplayer:hover .midline {
  width: 20px;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}

.play {
  display: flex;
  min-width: 124px;
  height: 31px;
  text-align: left;
  padding: 0px 10px;
  background: #fff;
  /* player background */
  border-left: 3px solid #16090F;
  /* player border */
  color: #B5A7BA;
  opacity: 0;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition-delay: .4s;
  -webkit-transition-delay: .4s;
  margin-top: -200px;
}

.music-controls,
.music-controls>* {
  user-select: none;
  -webkit-user-select: none;
  width: 11px;
  font-size: 11px;
  cursor: pointer;
}

.pausee {
  display: none;
}

.playtext {
  margin-left: 8px;
  font-family: courier new;
  font-size: 9px;
}

#musicplayer:hover .play {
  opacity: 1;
  transition-delay: .0s;
  -webkit-transition-delay: .0s;
}

<div id="musicplayer" class="box fade-in one">
  <div class="roundthing">
    <img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
  <div class="midline"></div>
  <div class="play">
    <div class="music-controls">
      <div class="playy">►</div>
      <div class="pausee">❚❚</div>
    </div>
    <div class="playtext">Fairytail</div>
  </div>
  <!--play-->

  <audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>