音楽プレーヤーが同じIDですべてを再生する

Question

音楽プレーヤーを作成しようとすると、ユーザーがボタンをクリックしたときにオーバーレイされた画像が画像をstop.pngに変更して再生します。ユーザーがもう一度クリックすると、イメージがplay.pngに変わり、曲の再生が停止します。

<audio id="myAudio"> 
    <source src="http://www.w3schools.com/jsref/horse.ogg" type="audio/ogg"> 
    <source src="http://www.w3schools.com/jsref/hors.mp3" type="audio/mpeg"> 
    Your browser does not support the audio element. 
</audio> 
<script> 
function plaYer() { 
    var image = document.getElementById('myImage'); 
    var x = document.getElementById("myAudio"); 

    if (image.src.match("play")) { 
     image.src = "stop.png"; 
     x.play(); 
    } else { 
     image.src = "play.png"; 
     x.pause(); 
    } 
} 
</script> 
<button id="song" 
style="color: white; background-image: url('cover100.jpg'); border: none; outline: none; display:block; 
width:100px; 
height:100px;"> 
<img id="myImage" onclick="plaYer()" src="play.png" width="100" height="100"> 
</button> 

私の問題は、2つの音楽プレーヤーを作成しようとすると、もう一方の音楽プレーヤーdoesntの作品です。誰か助けてくれますか？

Answer 1

IDは一意である必要があります。関数を再利用する場合は、そのIDをハードコードすることはできません。インラインイベントハンドラを使用するため、すでにimage要素にアクセスできます。その情報を渡し、プラスあなたの関数に対応する<audio>要素のID：

function plaYer(image, audioID) { 
    var x = document.getElementById(audioID); 
    // rest of your code ... 
} 

// HTML 

<img id="myImage" onclick="plaYer(this, 'myAudio')" ... /> 

私はイベント処理の詳細を学ぶためにexcellent articles on quirksmode.orgを読むことをお勧めします。