オーディオに影響を与えているときにボタンをクリックしたときに複数の画像を変更する

Question

私はStackを検索しましたが、この状況で動作するメソッドを見つけませんでした。

ここは最終目標です。私はページ上に10曲を言うことができます。画像付きのボタンをクリックすると、曲が再生され、次の曲を再生ボタンをクリックすると、最初の曲が停止し、2曲目が再生されます。また、現在の曲の再生ボタンをクリックすると一時停止します。

私が問題になっているのは、一時停止ボタンをクリックするか、別の曲の再生ボタンをクリックすると、再生ボタン画像がクリック時に一時停止画像に変更され、再生画像に戻ることです。以下は

私は今のところそれを持ってどのように私のコードです...この例では、私は2つだけの歌を示すが、実際にサイト上で私はthisimageコメントアウト10の-15曲

からどこにでもあるでしょう。スクリプト内の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（音）{

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>