Изменение нескольких изображений при нажатии кнопки при воздействии звука

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 тег для глобального игрока. Но для решения, я думаю, что это изменение может работать для вас:

вар currentPlayer;

var currentImage;

функция EvalSound (звук) {

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

я смог получить эту работу на основе от ответа Джои 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>