異なる画像がクリックされたときに異なる曲を再生する

Question

クリックした画像に応じて異なるオーディオファイルを再生しようとしています。しかし、今は音声ファイルだけが再生されます。

<script> 
     function play(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
     } 
     </script> 
     <li> 
     <img src="images/bark.png" value="PLAY" onclick="play()"> 
     <audio id="audio" src="audio/speak.mp3" ></audio> 
      </li> 
      <script> 
      function play(){ 
      var audio = document.getElementById("sit"); 
      audio.play(); 
      } 
      </script> 
      <li> 
      <img src="images/sit.png" value="PLAY" onclick="play()"> 
      <audio id="sit" src="audio/sit.mp3" ></audio> 
      </li> 
      <li> 

Answer 1

異なるオーディオファイルに

<script> 
    function playSpeak(){ 
     var audio = document.getElementById("audio"); 
     audio.play(); 
    } 

    function playSit(){ 
     var audio = document.getElementById("sit"); 
     audio.play(); 
    } 
</script> 

<li> 
    <img src="images/bark.png" value="PLAY" onclick="playSpeak()"> 
    <audio id="audio" src="audio/speak.mp3" ></audio> 
</li> 
<li> 
    <img src="images/sit.png" value="PLAY" onclick="playSit()"> 
    <audio id="sit" src="audio/sit.mp3" ></audio> 
</li> 
<li> 

または以前の例では異なるオーディオ

<script> 
    function playAudio(audioId){ 
     var audio = document.getElementById(audioId); 
     audio.play(); 
    } 
</script> 

<li> 
    <img src="images/bark.png" value="PLAY" onclick="playAudio('audio')"> 
    <audio id="audio" src="audio/speak.mp3" ></audio> 
</li> 
<li> 
    <img src="images/sit.png" value="PLAY" onclick="playAudio('sit')"> 
    <audio id="sit" src="audio/sit.mp3" ></audio> 
</li> 
<li> 

を再生することができ、一般的な関数を作成し再生するために複数の機能を使用してみてください：

Answer 2

この同様の関数名によるものです。プログラムは、2つを区別することができませんplay()異なる再生機能は、それだけで発生する実行する！私はこれが

<script> 
    function play(audioId){ 
    var audio = document.getElementById(audioId); 
    audio.play(); 
    } 
</script> 
<li> 
    <img src="images/bark.png" value="PLAY" onclick="play('bark')"> 
    <audio id="bark" src="audio/speak.mp3" ></audio> 
</li> 
<li> 
    <img src="images/sit.png" value="PLAY" onclick="play('sit')"> 
    <audio id="sit" src="audio/sit.mp3" ></audio> 
</li> 

Answer 3

はこれを試してみてください：

<script> 
    function play(id){ 
     var audio = document.getElementById(id); 
     audio.play(); 
    } 
</script> 

<li> 
    <img src="images/bark.png" value="PLAY" onclick="play('audio')"> 
    <audio id="audio" src="audio/speak.mp3" ></audio> 
</li> 
<li> 
    <img src="images/sit.png" value="PLAY" onclick="play('sit')"> 
    <audio id="sit" src="audio/sit.mp3" ></audio> 
</li> 

Answer 4

を行うだろうと思い

<script> 
function playSpeakAudio(){ 
    var audio = document.getElementById("audio"); 
    audio.play(); 
} 
</script> 
<script> 
function playSitAudio(){ 
    var audio = document.getElementById("sit"); 
    audio.play(); 
} 
</script> 

     <li> 
     <img src="images/bark.png" value="PLAY" onclick="playSpeakAudio()"> 
     <audio id="audio" src="audio/speak.mp3" ></audio> 
     </li> 

      <li> 
      <img src="images/sit.png" value="PLAY" onclick="playSitAudio()"> 
      <audio id="sit" src="audio/sit.mp3" ></audio> 
      </li> 
      <li> 

Answer 5

をクリック取得された画像に応じて別のオーディオファイルを再生するには、次のコードを使用します。

 <script> 
    function play(audioId){ 

    var sit = document.getElementById('sit'); 
    var bark = document.getElementById('bark'); 
    if (sit.duration > 0 && !sit.paused) { 
     sit.pause(); 
     var audio = document.getElementById(audioId); 
     audio.play(); 

    } else if(bark.duration > 0 && !bark.paused){ 
     bark.pause(); 
     var audio = document.getElementById(audioId); 
     audio.play(); 
    }else{ 
     var audio = document.getElementById(audioId); 
     audio.play(); 
    } 
    } 
</script> 
<li> 
    <img src="images/bark.png" value="PLAY" onclick="play('sit')"> 
    <audio id="sit" src="audio/sit.mp3" ></audio> 
</li> 
<li> 
    <img src="images/sit.png" value="PLAY" onclick="play('bark')"> 
    <audio id="bark" src="audio/bark.mp3" ></audio> 
</li> 

私はそれがあなたのために働いているかどうかを教えてください。