首發：GitHubClub 原文：juejin.im/post/6879708939190009869

學生時代的我們如果有像郎朗一樣的琴技，想必追起女生會非常的容易，但在以前，一架鋼琴對普通家庭來說，消費還蠻高的，所以我們不如自己寫一架屬于自己的鋼琴，哈哈，雖然音效不如真的鋼琴，但是能寫出來，還挺有成就感的。

這里不會用到很復雜或者很難的知識，只要按照文章中的步驟一步一步來，最后都可以做出來。心動不如行動，我們趕快開始吧。

該項目的 Gitee 地址：關注微信公眾號?逛逛GitHub，回復 鋼琴 獲取。

繪制出一個鋼琴

首先我們要創造出鋼琴的琴鍵，這里用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);

可以看到在演奏歌曲的同時也顯示歌詞了。

現在一個簡易版的鋼琴已經做出來了，外形是不是和真的鋼琴挺像的。趕緊用它來演奏歌曲吧????。

分享一些歌曲的簡譜

該項目的 Gitee 地址：關注微信公眾號?逛逛GitHub，回復 鋼琴 獲取。 推薦閱讀 1.?給新手的 11 個 Docker 免費上手項目 2.?我在 GitHub 上找到開源的《植物大戰僵尸》 3.?推薦 22 款好用的命令行工具 4.?百度網盤突然大調整喜歡文章，點個在看

總結

以上是生活随笔為你收集整理的HTML5 + Javascript 写出一个钢琴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。