今天给大家分享一个HTML5的钢琴代码，可以弹奏的哦！（附完整源码）

最新推荐文章于 2022-12-27 14:04:44 发布

weqireirtotor

最新推荐文章于 2022-12-27 14:04:44 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： html5 css html

原文链接：https://www.xiaohongshu.com/discovery/item/62dd08f6000000001c01546e?app_platform=android&app_version=7.50.0&share_from_user_hidden=true&type=video&xhsshare=CopyLink&appuid=623095c200000000210292e0&apptime=1672105060

版权

HTML 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

它是一个可以弹奏的钢琴，所以它需要音频文件，在这里发不了，这里只有代码，音频文件的分享在文章末尾哦。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>HTML5钢琴</title>
  
  <style type="text/css">
	*{
		margin:0px;
		padding:0px;
		
	}
	.zzr{
		width: 180px;
		height: 120px;
		position: absolute;
		top: 400px;
		right: 120px;	
	}
	ul{
		width:480px;
		height:360px;
		margin:50px auto;
	}
	li{
		float:left;
		list-style-type: none;
		position: relative;
	}
	li>div{
		height: 360px;
		width: 60px;
		border: 2px solid;
		border-color:#666;
		border-bottom-left-radius : 8px;
		border-bottom-right-radius: 8px;
		box-sizing: border-box;
		box-shadow: /*inset  3px 0  10px  #c9c6c6,*/
					inset 5px -8px  0  #eeebeb;
	}
	li:not(:last-child)>div{
		border-right: none;
	}
	li>div:hover{
		background: linear-gradient(45deg, #dad9d9, #ffffff);

	}
	li>div:active{
		box-shadow: inset 3px -2px  0  #eeebeb;
	}

	li>p{
		height: 200px;
		width: 40px;
		background-color: #000;
		border-bottom-left-radius : 5.5px;
		border-bottom-right-radius: 5.5px;
		box-shadow: inset 5px -7px 0 #2c2c2c;
		position: absolute;
		top:0;
		left: 40px;
		z-index: 999;
	}
	li>p:hover{
		background: linear-gradient(45deg, #4c4c4c, #444444);

	}
	li>p:active{
		box-shadow:inset 3px -5px 0 #2c2c2c;

	}
 </style>
 </head>
 <body>
	<ul>
		<li><div></div><p></p></li>
		<li><div></div><p></p></li>
		<li><div></div></li>
		<li><div></div><p></p></li>
		<li><div></div><p></p></li>
		<li><div></div><p></p></li>
		<li><div></div></li>
		<li><div></div></li>
	</ul>
    <div class="zzr"></div>
<script>
	for(var i=1; i<=8; i++){
		var addaudio=document.createElement("audio");
		addaudio.setAttribute("src","audios/"+"w"+i+".ogv")
		document.body.appendChild(addaudio);
	}
	for(var i=1; i<=5; i++){
		var addaudio=document.createElement("audio");
		addaudio.setAttribute("src","audios/"+"b"+i+".ogv")
		document.body.appendChild(addaudio);
	}
	var audios=document.getElementsByTagName("audio"),
		buttons=document.querySelectorAll("ul>li>div"),
		blacks=document.querySelectorAll("ul>li>p");
	//alert(blacks.length);
	for (var i=0; i<8; i++){
		buttons[i].index=i;
		buttons[i].onclick=function(){
			//alert(this.index);
			audios[this.index].load();
			audios[this.index].play();
			//alert(audios[this.index].src);
		}
	}
	for (var i=0; i<5; i++){
		blacks[i].index=i+8;
		blacks[i].onclick=function(){
			//alert(this.index);
			audios[this.index].load();
			audios[this.index].play();

			//alert(audios[this.index].src);
		}
	}

	/*document.body.onkeydown=function(e){
		document.title=e.keyCode;
		if(e.keyCode==65){
			audios[0].load();
			audios[0].play();
		}
	}*/
	// 操作键盘钢琴白键发出声音
	var keyCodes = new Array(83,68,70,71,72,74,75,76,69,82,89,85,73);
	document.body.onkeydown=function(e){
	//document.title=e.keyCode;
	for(var i=0; i<keyCodes.length; i++){
		if(e.keyCode==keyCodes[i]){
			if(i<8)
			{
				 buttons[i].style.background= "linear-gradient(45deg, #dad9d9, #ffffff)";
				 buttons[i].style.boxShadow="inset 3px -2px  0  #eeebeb";
			}else{
                blacks[i-8].style.background="linear-gradient(45deg, #4c4c4c, #444444)";
				blacks[i-8].style.boxShadow="inset 3px -5px 0 #2c2c2c";
			}
			audios[i].load();
			audios[i].play();
			
		
		}
	}
}

	document.body.onkeyup=function(e){
	//document.title=e.keyCode;
	for(var i=0; i<keyCodes.length; i++){
		if(e.keyCode==keyCodes[i]){
			if(i<8)
			{
				 buttons[i].style.background= null;
				 buttons[i].style.boxShadow="inset 5px -8px  0  #eeebeb";
			}else{
                blacks[i-8].style.background=null;
				blacks[i-8].style.boxShadow="inset 5px -7px 0 #2c2c2c";
			}
		}
	}
}
    
</script>
 </body>

</html>

好了，这期就分享到这里。网盘链接：https://pan.baidu.com/s/1klfjelOqjogrJXxlQzgNFA?pwd=s41s
提取码：s41s

weqireirtotor

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
今天给大家分享一个HTML5的钢琴代码，可以弹奏的哦！（附完整源码）

好了，这期就分享到这里。网盘链接：https://pan.baidu.com/s/1klfjelOqjogrJXxlQzgNFA?它是一个可以弹奏的钢琴，所以它需要音频文件，在这里发不了，这里只有代码，音频文件的分享在文章末尾哦。
复制链接

扫一扫