来源：听见下雨声

https://juejin.im/post/6879708939190009869

前言

国庆节八天来娱乐一下，教你怎么用代码写出一个钢琴????，并用它弹奏歌曲。学生时代的我们如果有像郎朗一样的琴技，想必追起女生会非常的容易，但在以前，一架钢琴对普通家庭来说，消费还蛮高的，所以我们不如自己写一架属于自己的钢琴，哈哈，虽然音效不如真的钢琴，但是能写出来，还挺有成就感的。

这里不会用到很复杂或者很难的知识，只要按照文章中的步骤一步一步来，最后都可以做出来。心动不如行动，我们赶快开始吧。

该项目的Gitee地址：

https://gitee.com/Dream-Star/piano

绘制出一个钢琴

首先我们要创造出钢琴的琴键，这里用ul+li当钢琴的骨架，其中div代表钢琴白键，p代表钢琴黑键。

<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>

写完了骨架我们还要给它加一点样式，至少让琴键的外表看起来更像真正的钢琴。

/*-------钢琴部分--------*/
ul{width:480px;height:360px;transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;
}
li{float:left;list-style-type: none;position: relative;
}
li>div{height: 360px;width: 60px;background: rgba(255,255,255,.3);border: 1px solid;border-color:rgba(0, 0, 0, .8);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  #00000023;text-align: center;display:table-cell;vertical-align: bottom;
}
li:not(:last-child)>div{border-right: none;
}
li>div:hover{background: rgb(255, 97, 97);
}
/* 当白键按下时的样式 */
.white_active{box-shadow: inset 3px -2px  0  #00000036;background: linear-gradient(45deg, rgba(255,255,255,.7), rgba(255,255,255,.5));
}
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);
}
/* 当黑键按下时的样式 */
.black_active{box-shadow:inset 3px -5px 0 #2c2c2c;
}

现在的钢琴就是下面这个样子，外形已经有了，但只是一个画面，我们点击琴键听不到声音。

给钢琴添加声音

钢琴有了画面，我们就要开始添加声音了，这里要用到js，首先把音源引入。

// 给钢琴添加音频
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);
}

音源现在引入了，我们只需要让钢琴琴键按下时，播放对应的音频就行了。这里我们可以实现两种演奏钢琴的方式，一种是直接点击琴键弹奏，另一种是通过我们的键盘按键来弹奏。

使用键盘上的S~L键操作钢琴白键,E,R,Y,U,I操作钢琴黑键。我们先用js获取到相关的dom。

let audios = document.getElementsByTagName("audio"),
buttons = document.querySelectorAll("ul>li>div"),
blacks = document.querySelectorAll("ul>li>p");

①鼠标点击琴键

前面我们已经获取到琴键的dom了，现在用for循环按顺序给琴键的dom添加对应的鼠标事件就行了。

for (var i = 0; i < 8; i++) {buttons[i].index = i;buttons[i].onmousedown = function () {//alert(this.index);buttons[this.index].classList.add('white_active')audios[this.index].load();audios[this.index].play();};buttons[i].onmouseup = function () {buttons[this.index].classList.remove('white_active')};
}
for (var i = 0; i < 5; i++) {blacks[i].index = i + 8;blacks[i].onmousedown = function () {//alert(this.index);blacks[this.index-8].classList.add('black_active')audios[this.index].load();audios[this.index].play();//alert(audios[this.index].src);};blacks[i].onmouseup = function () {blacks[this.index-8].classList.remove('black_active')};
}

②键盘当做琴键

首先我们要知道按键的keyCode键码值，这样才能给按键添加事件。知道相关按键的键值码后放到一个数组里，然后用 for 循环给每个按键添加对应的事件。

// 操作键盘钢琴白键发出声音
var keyCodes = new Array(83, 68, 70, 71, 72, 74, 75, 76, 69, 82, 89, 85, 73);
document.body.onkeydown = function (e) {for (var i = 0; i < keyCodes.length; i++) {if (e.keyCode == keyCodes[i]) {if (i < 8) {buttons[i].classList.add('white_active');} else {blacks[i-8].classList.add('black_active');}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].classList.remove('white_active');} else {blacks[i-8].classList.remove('black_active');}}}
};

到这里我们的钢琴已经能进行弹奏了。

添加曲库

光有钢琴没有曲子怎么行呢，我们可以自己在网上找个曲谱，然后添加到对应的地方就可以了。

首先把布局写出来，这里就不添加那些花里胡哨的样式了。

<div>请输入简谱：<input type="text" id="song" placeholder="请输入歌曲名"><button id="check">确定</button></div>

然后开始写逻辑部分，scroe对象是用来存放歌曲信息的，不想去网上找歌曲信息的，可以直接复制最后面部分的简谱。格式类似于{‘歌曲名’:‘歌词和简谱’}，这里可以用模板字符串的形式。

var scroe = {};
var numReg = /[1-9]/g;
var wordReg = /[\u4e00-\u9fa5]+/g;
var str;
var shows;
var words;
var wordsIndex;
var wordsCurrent;
var current;
function play(){buttons.forEach((el)=>el.classList.remove('show'))var songName = song.value;if(songName === ''){return alert('请输入歌曲名')}if(scroe.hasOwnProperty(songName)){str = scroe[songName];shows = str.match(numReg);words = str.match(wordReg);wordsIndex = 0;wordsCurrent = 0;current = 0;console.log(songName)buttons[shows[0]/1 - 1].classList.add('show');text.textContent = words[0]}else{return alert('您输入的歌曲名尚未加入曲库')}
}
check.addEventListener('click',play)

现在的效果图就是下面这个样子????。

添加歌词和琴键提示

布局最上面的那部分代码里已经写好了，直接开始写逻辑。

function start(){// 显示歌词的部分if(wordsCurrent>=words[wordsIndex].length-1){wordsCurrent = 0;wordsIndex++;text.textContent = words[wordsIndex]}else{wordsCurrent++}if(current === shows.length-1){buttons[shows[shows.length-1]/1 - 1].classList.remove('show');return console.log('演奏结束',current)}var showButton = shows[current+1]/1 - 1;var hiddenButton = shows[current]/1 - 1;buttons[hiddenButton].classList.remove('show');buttons[showButton].classList.add('show');current++
}

然后再在对应的按键事件和鼠标点击事件加上这段代码。

i == shows[current]-1 ? start() : '';

现在我们想要的效果基本已经实现。

加些小的装饰

我们可以给钢琴按键加上对应的编号，方便我们弹奏。

// 给琴键加上数字
buttons.forEach((el,index)=>el.textContent = index+1)window.addEventListener('keydown',function(e){if(e.keyCode == 86){if(buttons[0].textContent != ''){buttons.forEach((el)=>el.textContent = '')}else{buttons.forEach((el,index)=>el.textContent = index+1)}   }
})

此时琴键上已经有了对应的编号。我们还可以通过快捷键V实现编号显示与隐藏的切换。我们再给钢琴加个使用说明。

let x = document.getElementById("btn-js"),
y = document.getElementById("js"),//介绍的隐藏与显示
function hide() {y.style.display === "block" ? y.style.display = "none" : y.style.display = "block"
}x.addEventListener('click',hide);

可以看到在演奏歌曲的同时也显示歌词了。

现在一个简易版的钢琴已经做出来了，外形是不是和真的钢琴挺像的。赶紧用它来演奏歌曲吧????。

分享一些歌曲的简谱

晴天

3243 157 1751 - 166 655 543 2343

刮风这天我试过握着你手 但偏偏雨渐渐大到我看你不见

3453 457 2711 - 115 5654 2345 61 6 77

还要多久我才能在你身边 等到放晴的那天也许我会比较好一点

3243 157 1751 - 166 655 543 2343

从前从前有个人爱你很久 但偏偏风渐渐把距离吹得好远

3453 457 2711 - 115 5654 6712 32 1 1

好不容易又能再多爱一天 但故事的最后你好像还是说了拜拜

最长的电影

12433 345431 12433 321622

我们的开始 是很长的电影 放映了三年 我票都还留着

12433 345431[45] 431 32211

冰上的芭蕾 脑海中还在旋转 望着你 慢慢忘记你

12433 345431 12433 321622

朦胧的时间 我们溜了多远 冰刀画的圈 圈起了谁改变

1[21]433 34543112 4431 432171

如果再重来 会不会稍显狼狈 爱是不是 不开口才珍贵

321622 32152211 321622 14321 543323

再给我两分钟 让我把回忆结成冰 别融化了眼泪 你妆都花了 要我怎么记得

34363322 23252272 53411 243211

记得你叫我忘了吧 记得你叫我忘了吧 你说你会哭 不是因为在乎

同桌的你

55553457 - 6666465

明天你是否会想起 昨天你写的日记

55557654 - 4444321

明天你是否还惦记 曾经最爱哭的你

55553457 - 6666465

老师们都已想不起 猜不出问题的你

55557654 - 4444321

我也是偶然翻相片 才想起同桌的你

111156113 - 2222176

谁娶了多愁善感的你 谁看了你的日记

77777125 - 7712171

谁把你的长发盘起 谁给你做的嫁衣

最后

欢迎关注「前端瓶子君」，回复「交流」加入前端交流群！

回复「算法」，你可以每天学习一道大厂算法编程题（阿里、腾讯、百度、字节等等）或 leetcode，瓶子君都会在第二天解答哟！

另外，每周还有手写源码题，瓶子君也会解答哟！

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持