点击图片小猫播放不同的声音_c# 桌宠声音 javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/gougouxianka/article/details/139150538

当点击图片时候播放音效1，再点击播放音效2，再点击播放音效3，如此循环。

效果如下

JavaScript代码实现点击图片播放不同的声音

<script>
			var i = 0;    //先定义一个变量作为计时器使用
			function autoPlay() {
				if (i < 1) {
					miya1.play()
					i++;
				} else if (i < 2) {
					miya2.play()
					i++;
				} else if (i < 3) {
					miya3.play()
					i++;
                    i=0；
				}
			};
</script>

然后是html的部分

<body>
		<audio src="../audio/miya (1).mp3" id="miya1" controls="controls" hidden="true"></audio>
		<audio src="../audio/miya (2).mp3" id="miya2" controls="controls" hidden="true"></audio>
		<audio src="../audio/miya (3).mp3" id="miya3" controls="controls" hidden="true"></audio>
		<audio src="../audio/miya (4).mp3" id="miya4" controls="controls" hidden="true"></audio>
		<audio src="../audio/miya (5).mp3" id="miya5" controls="controls" hidden="true"></audio>
		

		<div id="bei">

			<img src="../img/xmnkyc.png" alt="" onclick="autoPlay()" />
		</div>
</body>

具体效果如下

5月31日

祝你身体健康，再见。