我正在创建一个具有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>
答案 0 :(得分: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>