原生js写的可调音节网页电子琴特效

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script>

	// 先做调音调那块
		var aBtn = document.querySelectorAll("button");
		var oIpt = document.querySelector("input");
		aBtn[0].onclick=function() {
			oIpt.value=(oIpt.value++)>6?1:oIpt.value;
		}
		aBtn[1].onclick=function() {
			oIpt.value=(oIpt.value--)<2?7:oIpt.value;
		}

	// 获取按键
	var oUl = document.querySelector("ul");
	var aBtns = oUl.querySelectorAll("button");

	// 当键盘点击时，调用音乐响应函数
	window.onkeydown=function(e) {
		call(e)
	}

	// 当鼠标点击时，调用音乐响应函数
	var nums=[65,83,68,70,71,72,74];
	for (var i = 0; i<aBtns.length; i++) {
		aBtns[i].index=nums[i];
		aBtns[i].onclick=function() {
			call(this.index);
		}
	}


	// 制作音乐响应函数
	function call(e) {
	// e有两种可能  事件对象,或者是一个 数字
		// console.log(e.keyCode);
		// 键值	
		// a  s  d  f  g  h  j
		// 65 83 68 70 71 72 74
		 // 音律
		 // 1c 2d 3e 4f 5g 6a 7b
		 // 音乐文件名 a1 a2 a3 a4…………b1 b2 b3…………
 	// 判断
 	switch(e.keyCode || e){
 		case 65:
 		// 实例化一audio对象
 		var audio = new Audio();
 		// 设置好音频路径
 		audio.src="test/c"+oIpt.value+".mp3";
 		// 播放音频
 		audio.play();
 		break;
 		case 83:
		var audio=new Audio();
		audio.src="test/d"+oIpt.value+".mp3";
		audio.play();
		break;
		case 68:
		var audio=new Audio();
		audio.src="test/e"+oIpt.value+".mp3";
		audio.play();
		break;
		case 70:
		var audio=new Audio();
		audio.src="test/f"+oIpt.value+".mp3";
		audio.play();
		break;
		case 71:
		var audio=new Audio();
		audio.src="test/g"+oIpt.value+".mp3";
		audio.play();
		break;
		case 72:
		var audio=new Audio();
		audio.src="test/a"+oIpt.value+".mp3";
		audio.play();
		break;
		case 74:
		var audio=new Audio();
		audio.src="test/b"+oIpt.value+".mp3";
		audio.play();
		break;
 	}
	}
</script>