Question

我搜索过Stack并且没有遇到过适用于这种情况的方法。

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

我遇到的麻烦是让点击播放按钮imagal在点击时更改为暂停图像，当我点击暂停按钮或点击另一首歌曲的播放按钮时让它返回播放图像。

下面是我的代码到目前为止我的代码...在这个例子中我只显示两首歌曲，但在实际网站上会有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;

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

}

Answer 2

我能够根据Joey Etamity的回应让这个工作：

<script type="text/javascript">
  var currentPlayer;
  var currentImage;

  function EvalSound(sound) {

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


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

    if(currentImage  && currentImage != thisimage) {
      currentImage.src = '/playicon.png';      
    }

    if(thissound.play){
      thisimage.src = '/Pause.png';
    }

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

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

2 个答案: