Abspielen verschiedener Songs, wenn auf verschiedene Bilder geklickt wird

Question

Ich versuche, eine andere Audiodatei zu spielen, die dem angeklickten Bild entspricht. Im Moment wird jedoch nur die gesprochene Audiodatei abgespielt.

<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

versuchen, mehrere Funktionen für

verschiedene Audio-Dateien spielen

<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> 

Oder erstellen Sie eine allgemeine Funktion, die mit verschiedenen Audios

<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> 

vorherigen Beispiel spielen kann:

Answer 2

Diese ist aufgrund der ähnlichen Funktionsnamen. Das Programm kann die beiden play() verschiedenen Wiedergabefunktionen nicht unterscheiden, es führt nur die erste aus, die auftritt!

<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 3

ich denke, das

tun dies

<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 4

Versuchen:

<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 5

den folgenden Code Verwenden Sie die verschiedenen Audio-Datei nach dem Bild zu spielen, die geklickt wird erhalten.

 <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> 

Lassen Sie mich wissen, es funktioniert für Sie oder nicht.