文章目录
前言
利用音视频标签创建钢琴。
步骤很简单没什么好说的,写这篇文章的原因主要是觉得这个很好玩,分享一下,直接上代码吧:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>piano</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#piano{
display: flex;
flex-shrink: inherit;
width: 1300px;
height: 400px;
border: solid 1px #000;
margin: 100px auto;
}
#piano li{
flex: 1;
/*width: 35px;*/
height: 100%;
border-right: solid 1px #000;
line-height: 400px;
text-align: center;
cursor: pointer;
background-color: skyblue;
}
</style>
</head>
<body>
<ul id="piano"></ul>
<audio src=""></audio>
<script>
//获取 piano 元素
var piano = document.getElementById("piano");
//获取 audio 标签
var audio = document.querySelector("audio");
/*
* 创建 li 元素
* a1~a7
* b1~b7
* c1~c7
* d1~d7
* e1~e7
* f1~f7
* g1~g7
* */
//创建数组表示音调
var arr = ['c','d','e','f','g','a','b'];
//嵌套 for 循环创建 li
for(var i=1;i<=7;i++){
for(var j=0; j<arr.length;j++){
//创建 li
var li = document.createElement("li");
li.innerHTML = arr[j]+i;
if(j % 2 == 0){
li.style.backgroundColor = '#e5cfdb';
}
if(i == 4){
li.style.backgroundColor = "skyblue";
li.style.width = 30 +"px";
li.style.flex = "none";
}
if(i == 7 && j == arr.length-1){
li.style.border = "none";
}
//将 li 添加到 piano 中
piano.appendChild(li);
//为每个 li 绑定单击事件
li.onclick = function(){
//获取所有 li
var lis = document.querySelectorAll("#piano li");
lis.forEach(function(li){
li.style.opacity = 1;
})
//改变当前 li 的背景颜色
this.style.opacity = 0.5;
//设置 audio 的 src 属性
audio.src = 'http://s8.qhimg.com/share/audio/piano1/'+this.innerHTML+'.mp3';
//播放
audio.play();
}
}
}
/*
* 绑定键盘事件
* */
//获取所有 li
var lis = document.querySelectorAll("#piano li");
//创建数组保存 按键代码
var keyCodesArr = [81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 219, 221, 65, 83, //q w e r t y u i o p [ ] a s
90, 88, 67, 86, 66, 78, 77, //降调 z x c v b n m
49, 50, 51, 52, 53, 54, 55, //键盘上的 1 2 3 4 5 6 7 do re mi fa so la xi
56, 57, 48, 189, 187, 8, 220, //升调 8 9 0 - = Backspace \
68, 70, 71, 72, 74, 75, 76, 186, 222, 13, 188, 190, 191, 16]; //d f g h j k l ; ' Enter , . / Shift
//为 li 绑定键盘事件
window.onkeydown = function(e){
//获取当前按键代码
var key = e.keyCode;
//通过按键码判断 li 的索引
var index = getIndex(key);
//触发 index 对应的 li 的 单击事件
lis[index].click();
}
//创建函数根据按键码获取 li 的索引
function getIndex(v){
//遍历按键码数组
for(i=0;i<keyCodesArr.length;i++){
if(v == keyCodesArr[i]){
var index = i;
}
}
return index;
}
</script>
</body>
</html>
(完)