键盘不够那么多按键，所以也做了鼠标点击事件
CSS
<style type="text/css">
div,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
cursor: pointer;
}
div{
width: 1000px;
overflow: hidden;
margin: auto;
}
div ul{
width: 14.28%;
overflow: hidden;
float: left;
}
div ul li{
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid skyblue;
}
</style>
HTML
<body>
<div>
<ul>
<li>A0</li>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
<li>A5</li>
<li>A6</li>
<li>A7</li>
</ul>
<ul>
<li>B0</li>
<li>B1</li>
<li>B2</li>
<li>B3</li>
<li>B4</li>
<li>B5</li>
<li>B6</li>
<li>B7</li>
</ul>
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
<li>C4</li>
<li>C5</li>
<li>C6</li>
<li>C7</li>
<li>C8</li>
</ul>
<ul>
<li>D1</li>
<li>D2</li>
<li>D3</li>
<li>D4</li>
<li>D5</li>
<li>D6</li>
<li>D7</li>
</ul>
<ul>
<li>E1</li>
<li>E2</li>
<li>E3</li>
<li>E4</li>
<li>E5</li>
<li>E6</li>
<li>E7</li>
</ul>
<ul>
<li>F1</li>
<li>F2</li>
<li>F3</li>
<li>F4</li>
<li>F5</li>
<li>F6</li>
<li>F7</li>
</ul>
<ul>
<li>G1</li>
<li>G2</li>
<li>G3</li>
<li>G4</li>
<li>G5</li>
<li>G6</li>
<li>G7</li>
</ul>
</div>
//只用一个 video 的话 每次按下都会播放新的音频，会切断上一个的尾音，所以每个ui配了一个 video
<video class="vid" src="" autoplay></video>
<video class="vid" src="" autoplay></video>
<video class="vid" src="" autoplay></video>
<video class="vid" src="" autoplay></video>
<video class="vid" src="" autoplay></video>
<video class="vid" src="" autoplay></video>
<video class="vid" src="" autoplay></video>
</body>
js
//用jq比较方便 就用jq写了
$(function(){
//点击的时候拿到li的内容，拼接去min文件找对应名字的音频，赋给video
//每个事件对应一个 video 不然没尾音，感觉怪怪的
$("ul:eq(0) li").click(function(){
$(".vid")[0].src = "min/"+$(this).html()+".mp3";
});
$("ul:eq(1) li").click(function(){
$(".vid")[1].src = "min/"+$(this).html()+".mp3";
});
$("ul:eq(2) li").click(function(){
$(".vid")[2].src = "min/"+$(this).html()+".mp3";
});
$("ul:eq(3) li").click(function(){
$(".vid")[3].src = "min/"+$(this).html()+".mp3";
});
$("ul:eq(4) li").click(function(){
$(".vid")[4].src = "min/"+$(this).html()+".mp3";
});
$("ul:eq(5) li").click(function(){
$(".vid")[5].src = "min/"+$(this).html()+".mp3";
});
$("ul:eq(6) li").click(function(){
$(".vid")[6].src = "min/"+$(this).html()+".mp3";
});
//键盘事件
$(window).keypress(function(e){
//获取当前的按键
var k = e.key.toLowerCase();
console.log(k);
//按键对应的音频
switch(k){
case "q":
$("ul:eq(2) li:eq(0)").click();
break;
case "w":
$("ul:eq(2) li:eq(1)").click();
break;
case "e":
$("ul:eq(2) li:eq(2)").click();
break;
case "r":
$("ul:eq(2) li:eq(3)").click();
break;
case "t":
$("ul:eq(2) li:eq(4)").click();
break;
case "y":
$("ul:eq(2) li:eq(5)").click();
break;
case "u":
$("ul:eq(2) li:eq(6)").click();
break;
case "i":
$("ul:eq(2) li:eq(7)").click();
break;
//分割
case "d":
$("ul:eq(3) li:eq(0)").click();
break;
case "f":
$("ul:eq(3) li:eq(1)").click();
break;
case "g":
$("ul:eq(3) li:eq(2)").click();
break;
case "h":
$("ul:eq(3) li:eq(3)").click();
break;
case "j":
$("ul:eq(3) li:eq(4)").click();
break;
case "k":
$("ul:eq(3) li:eq(5)").click();
break;
case "l":
$("ul:eq(3) li:eq(6)").click();
break;
}
})
})
钢琴键音效：百度云钢琴键音效
