Question

我正在创建一个具有10个按键的在线乐器，每个按键都有录制的声音，可在单击时播放。目前，它只是播放第一个声音，我无法弄清我需要在代码中执行的操作才能播放其他音频文件。我查看了多个链接来尝试解决此问题，但没有任何效果！

<h1> Click to Play

<script>  function play(){
   var audio = document.getElementById("audio");
   audio.play();
             }
 </script> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473 /Low_2.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%202.mp3" ></audio>

 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_3.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%203.mp3" ></audio>


 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_5.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%205.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_6.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%206.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_1.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%201.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_2.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/high%202.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_3.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High%203.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_5.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High%205.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_6.jpeg' value="PLAY"  onclick="play()"><audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/high%206.mp3" ></audio>

<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/High_1.jpeg' alt=''>



</body>
<html>

Answer 1

您应该将ID发送给javascript函数或使用其他ID

第一个解决方案：

<h1> Click to Play </h1>

<script>  function play(id){
   var audio = document.getElementById('audio'+id);
   audio.play();
             }
 </script> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473 /Low_2.jpeg' value="PLAY"  onclick="play('1')"><audio id="audio1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%202.mp3" ></audio>

 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_3.jpeg' value="PLAY"  onclick="play('2')"><audio id="audio2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%203.mp3" ></audio>    

</body>
<html>

第二个解决方案：

您可以像这样使用jquery：

<h1> Click to Play </h1>

<script>
$(document).ready(function(){
    $('img').click(function() {
        $(this).first('audio').play();
    });

});

</script>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473 /Low_2.jpeg' value="PLAY" ><audio id="audio1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%202.mp3" ></audio>

     <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/Low_3.jpeg' value="PLAY" ><audio id="audio2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2124473/low%203.mp3" ></audio>    

    </body>
    <html>

HTML onclick中的多个音频文件存在问题

1 个答案: