画像がクリックされたときにオーディオファイルを再生し、画像がクリックされていないときに別のオーディオファイルを再生する

私は自分自身で少しのエクササイズをしてHTML-CSS-JSを学んでいます。クリックで画像の外側にあるとき画像がクリックされたときにオーディオファイルを再生し、画像がクリックされていないときに別のオーディオファイルを再生する

<html> 
    <head> 
    <title>Image audio exercise</title> 
    </head> 
    <body> 
    <script> 
     function play(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
     } 
    </script> 
    <img src="img.gif" onclick="play()"> 
    <audio id="audio" src="sound.mp3" ></audio> 
    </body> 
</html>

私は別のオーディオファイルを再生できるようにしたい：私は、私は、画像をクリックするとmp3オーディオを果たしている少しのコードを作成しました。それを行う簡単な方法はありますか？たぶんif-else文ですか？あなたはこのような何かを行うことができ

document.onclick = function(e) { 
if (e.target != document.getElementById('clickMe')) { 
    document.getElementById('audio').play(); 
}else { 
    document.getElementById('audio2').play(); 
}

}

出典

2017-03-17 Gigi

チェックこの問題（http://stackoverflow.com/questions/18893144/javascript-detect-click-event-outside-of-divは）多分あなたを助けることができる:) – ayxos

はこのような何かを行います。画像や文書をクリックしたかどうかを確認するだけの簡単なチェック。

<html> 
    <head> 
    <title>Image audio exercise</title> 
    </head> 
    <body> 

    <img id="theImage" src="img.gif"> 
    <audio id="audio" src="sound.mp3" ></audio> 

    <script> 
     var audio = document.getElementById("audio"); 
     var img = document.getElementById("theImage"); 

     document.addEventListener("click", function(e){ 
     if(e.target === img){ 
      audio.src = "sound.mp3"; 
      audio.play(); 
     } 
     else{ 
      audio.src = "sound2.mp3"; 
      audio.play(); 
     } 
     },false); 
    </script> 

    </body> 
</html>

出典

2017-03-17 12:04:52

：

出典

2017-03-17 12:10:03

ありがとうございました。私がしたいと思うように動作します！ – Gigi

ようこそ@Gigi –

画像がクリックされたときにオーディオファイルを再生し、画像がクリックされていないときに別のオーディオファイルを再生する

答えて

関連する問題