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

Question

I have searched Stack and have not come across a method that works in this situation.

Here is the final goal. I have lets say 10 songs on a page and when I click a button with image it plays the song, and when i click the next songs play button the first song stops and the second one plays. And if I click the current songs play button it pauses as well.

What I am having trouble with is getting the play button imagae to change to a pause image on click and have it go back to play image when i either click the pause button or click the play button of another song.

Below is my code how I have it so far... In this example I show only two songs, but on the actually site there will be anywhere from 10 -15 songs

I commented out the thisimage.attr in the script as it is breaking. I also tried thisimage.src but it didnt work either. With this script the audio functions exactly the way I need it to.

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

This is not the best practice approach, you should use only one audio tag for global player. But for your solution , i think this changes might work for you:

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

I was able to get this to work based off of Joey Etamity's response:

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