HTML5 + Javascript 写出一个钢琴 |
您所在的位置：网站首页 › 在线写钢琴谱 › HTML5 + Javascript 写出一个钢琴 |
HTML5 + Javascript 写出一个钢琴
|
首发：GitHubClub
原文：juejin.im/post/6879708939190009869
学生时代的我们如果有像郎朗一样的琴技，想必追起女生会非常的容易，但在以前，一架钢琴对普通家庭来说，消费还蛮高的，所以我们不如自己写一架属于自己的钢琴，哈哈，虽然音效不如真的钢琴，但是能写出来，还挺有成就感的。 这里不会用到很复杂或者很难的知识，只要按照文章中的步骤一步一步来，最后都可以做出来。心动不如行动，我们赶快开始吧。 该项目的 Gitee 地址：关注微信公众号 逛逛GitHub，回复 钢琴 获取。 绘制出一个钢琴 首先我们要创造出钢琴的琴键，这里用ul+li当钢琴的骨架，其中div代表钢琴白键，p代表钢琴黑键。 写完了骨架我们还要给它加一点样式，至少让琴键的外表看起来更像真正的钢琴。 /*-------钢琴部分--------*/ 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 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);可以看到在演奏歌曲的同时也显示歌词了。 现在一个简易版的钢琴已经做出来了，外形是不是和真的钢琴挺像的。赶紧用它来演奏歌曲吧????。 分享一些歌曲的简谱 |
【本文地址】
今日新闻 |
推荐新闻 |