javascript - 在影响音频的同时单击按钮时更改多张图像

Question

我已经搜索了Stack，但没有遇到一种在这种情况下有效的方法。

这是最终目标。我可以说一页上有10首歌曲，当我单击带有图像的按钮时，它会播放这首歌，而当我单击下一首歌曲的播放按钮时，第一首歌会停止播放，第二首歌会播放。如果我单击当前的歌曲播放按钮，它也会暂停。

我遇到的麻烦是，当我单击“暂停”按钮或单击另一首歌曲的“播放”按钮时，使“播放”按钮的图像变为单击时变为暂停图像，并使其返回播放图像。

下面是我到目前为止的代码...在此示例中，我仅显示两首歌曲，但实际站点上会出现10 -15首歌曲

我在脚本中注释了thisimage.attr，因为它已损坏。
我也尝试了thisimage.src，但是它也不起作用。
使用此脚本，音频可以完全按照我需要的方式运行。

HTML-

<!-- Music Button 1 -->
<div class="col-sm-1 col-xs-2">        
   <button onclick="EvalSound('song1')">
       <img id="song1a" src="/play.png" class="img-responsive" />
   </button>
</div>        

<audio id="song1">
   <source src="/song1.mp3" type="audio/mpeg">      
</audio>
<!----/MUSIC BUTTON 1---->

<!-- Music Button 2-->
<div class="col-sm-1 col-xs-2">        
   <button onclick="EvalSound('song2')">
       <img id="song2a" src="/play.png" class="img-responsive" />
   </button>
</div>       

<audio id="song2">
   <source src="/song2.mp3" type="audio/mpeg">      
</audio>
<!----/MUSIC BUTTON 2---->

JavaScript-

<script type="text/javascript">

  var currentPlayer;

  function EvalSound(sound) {

    var thissound = document.getElementById(sound); 
    var animage = sound +'a';
    var thisimage = document.getElementById(animage);     


    if(currentPlayer  && currentPlayer != thissound) {
      currentPlayer.pause();      
    }`enter code here`

    if (thissound.paused) {
      thissound.play();         
      thisimage.attr("src", "/Pause.png");     
      currentPlayer = thissound;
    }
    else{
      thissound.pause();
      thisimage.attr("src", "/play.png");
      thissound.currentTime = 0;
      currentPlayer = thissound;
    }
    currentPlayer = thissound;
  }
</script>

Answer 1

这不是最佳做法，对于全局播放器，您应该只使用一个audio标记。但是对于您的解决方案，我认为此更改可能对您有用:

var currentPlayer;

var currentImage;

函数EvalSound(sound){

var thissound = document.getElementById(sound); 
var animage = sound +'a';
var thisimage = document.getElementById(animage);     


if(currentPlayer && currentImage && 
currentImage != thisimage 
&& currentPlayer != thissound) {
  currentPlayer.pause();  

  currentPlayer.currentTime = 0;  
  currentImage.attr("src", "/play.png");

}

if (thissound.paused) {
  thissound.play();         
  thisimage.attr("src", "/Pause.png");     
  currentPlayer = thissound;
}
else{
  thissound.pause();
  thisimage.attr("src", "/play.png");
  thissound.currentTime = 0;
  currentPlayer = thissound;
}
currentPlayer = thissound;

currentImage = thisimage;

}