大神60行JS代碼實(shí)現(xiàn)的網(wǎng)頁鋼琴按鍵特效，代碼&gt;點(diǎn)開文章拷貝拿走

覺這個特效對大神們來說簡直so so so so so easy！但我就是要要要要要要要要要發(fā)出來，分享給正在學(xué)習(xí)前端開發(fā)的朋友們，代碼在下文直接復(fù)制走，而且不用說謝謝~嘿嘿。時不時發(fā)一點(diǎn)好玩的特效，喜歡的朋友點(diǎn)一下上面的關(guān)注哦。我只是小小的前端開發(fā)工程師而已，各位大佬別噴我，謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝啦。（你還別說，這支付寶體真挺好玩。）
別噴我，比起讓你加群拿代碼的那些教育機(jī)構(gòu)的推廣者，我連個廣告都沒打！

先上一個效果圖（鍵盤控制的，效果有點(diǎn)鬼畜?。?br>

按下鍵盤上的A 網(wǎng)頁上的A就會動哦~

代碼如下（）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)頁鍵盤鋼琴按鍵特效</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#box{
width:400px;
margin:300px auto 0;
}
ul{
margin-right:-20px;
}
li{
width:48px;
height:48px;
border:1px solid #666;
float:left;
margin-right:20px;
text-align:center;
line-height:48px;
background:#000;
color:#fff;
font-weight:bold;
position:relative;
}
li span{
display:block;
opacity:0.5;
filter:alpha(opacity:50);
}
li p{
width:100%;
height:0;
background:#03F;
position:absolute;
bottom:49px;
left:0;
}
.keyA{
background:#e51c55;
}
.keyS{
background:#c926a5;
}
.keyD{
background:#9c4bd5;
}
.keyJ{
background:#4f65c3;
}
.keyK{
background:#6ccab7;
}
.keyL{
background:#92d55d;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<span class="keyA">A</span>
<p class="keyA"></p>
</li>
<li>
<span class="keyS">S</span>
<p class="keyS"></p>
</li>
<li>
<span class="keyD">D</span>
<p class="keyD"></p>
</li>
<li>
<span class="keyJ">J</span>
<p class="keyJ"></p>
</li>
<li>
<span class="keyK">K</span>
<p class="keyK"></p>
</li>
<li>
<span class="keyL">L</span>
<p class="keyL"></p>
</li>
</ul>
</div>
<script>
window.onload = function(){
var aP = document.getElementsByTagName("p");
var aSpan = document.getElementsByTagName("span");
var aKeyCode = [65,83,68,74,75,76]; //定義鍵盤按鍵的鍵值 65表示大寫A 具體鍵值請參照文章里的ascii表里的值
document.onkeydown = function(event){
var event = event || window.event;
for(var i=0; i<aKeyCode.length; i++){
if(event.keyCode == aKeyCode[i]){
startMove(aP[i],{height:240});
startMove(aSpan[i],{opacity:100})
}
}
}
document.onkeyup = function(event){
var event = event || window.event;
for(var i=0; i<aKeyCode.length; i++){
if(event.keyCode == aKeyCode[i]){
startMove(aP[i],{height:0});
startMove(aSpan[i],{opacity:50})
}
}
}
}
function startMove(obj, json, fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bSwitch=true;
for(var sAttribute in json){
var iTarget=json[sAttribute];
if(sAttribute=='opacity'){
var cur=Math.round(parseFloat(getStyle(obj, sAttribute))*100);
}else{
var cur=parseInt(getStyle(obj, sAttribute));
}
var speed=(iTarget-cur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(sAttribute=='opacity'){
obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
obj.style.opacity=(cur+speed)/100; //ff chrome
}else{
obj.style[sAttribute]=cur+speed+'px';
}
if(cur!=iTarget){
bSwitch=false;
}
}
if(bSwitch){
clearInterval(obj.timer);
if(fnEnd){
fnEnd();
}
}
}, 30);
}
//獲取飛行間樣式
function getStyle(obj,sAuttribute){
var result = ""
if(window.getComputedStyle){
result = window.getComputedStyle(obj,false)[sAuttribute];
}else{
resule = obj.currentStyle[sAuttribute];
}
return result;
}
</script>
</body>
</html>

ASCII碼表

如果哪句代碼不理解，可以直接在下面留言，我看到了會一一解釋哦。當(dāng)然啦，你噴我我也會回你。
喜歡JS特效的朋友，記得關(guān)注我哦，不定期分享好玩好看的JS特效，前端路上，一起成長~

TML標(biāo)題通過<h1>-<h6>等標(biāo)簽定義。從1-6依次字號變小。

<h1>這是標(biāo)題</h1>

HTML段落通過<p> </p>標(biāo)簽進(jìn)行定義

HTML鏈接通過<a>標(biāo)簽進(jìn)行定義，在 href 屬性中指定鏈接的地址。

<h1>這是標(biāo)題</h1>

點(diǎn)擊文字就會跳轉(zhuǎn)到鏈接頁面

HTML圖像通過<img>標(biāo)簽定義

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640251661&t=bbcdcc55bdac4a792d3f758462f9fd68" width="104" height="142" />

何用五千塊的電腦彈奏出價值十萬鋼琴的效果

免責(zé)聲明：本文所涉及資源包括采樣器，音源等僅供個人學(xué)習(xí)交流，商業(yè)用途請自行購買正式版本，否則后果自負(fù)，本文概不承擔(dān)一切責(zé)任

五千塊的電腦？不用糾結(jié)，這里是一個泛指，泛指一臺辦公級別的或者叫入門級別的Windows操作系統(tǒng)的臺式或者筆記本電腦。

價值十萬的鋼琴？不用糾結(jié)，這個不是泛指，這里是針對YAMAHA C7 GRAND PIANO（雅馬哈C7三角鋼琴），這貨大概長下面這樣

這款鋼琴黑色的價格大約是4.2W美元，約合人民幣27W；白色的價格是5W美元，約合人民幣32W，參考地址：http://www.piano-play-it.com/yamaha-grand-piano.html，參考內(nèi)容如下

Yamaha C7 in Black Polyester costs about $ 42,000 while the same piano in White Polyester costs around $ 50,000.
YAMAHA C7 Grand Piano - Length: 7' 6" (227 cm). Price: ,000-55,000.

上面是全新的價格，在ebay上也有二手在賣，價格在3.2W美元，燒錢傳送門：https://www.ebay.com/itm/203074406408?hash=item2f482d8808:g:QskAAOSwl~hfMyBc

那么五千塊的電腦怎么彈奏這個鋼琴？這個問題得分兩部分來回答

電腦上可以彈鋼琴嗎？怎么彈奏？
電腦可以彈鋼琴了，怎么彈奏雅馬哈C7三角鋼琴？

電腦上可以彈鋼琴嗎？

答案是當(dāng)然可以的，不然就沒有這篇文章了，原理也很簡單，將電腦鍵盤映射成鋼琴上的按鍵，按不同的按鍵發(fā)出不同的音調(diào)的聲音，所以涌現(xiàn)出了一大堆鋼琴模擬器，有在線網(wǎng)頁的，有軟件的，下面隨便瞄幾個

在線鋼琴模擬器

地址：https://www.xiwnn.com/piano/

長下面這樣

一看就知道怎么玩吧，可以編輯鍵盤映射，中央C調(diào)的位置也給標(biāo)出來了，如果是平板電腦或手機(jī)，還可以直接觸摸鋼琴按鍵發(fā)聲，手機(jī)屏幕太小體驗(yàn)不好，有平板的可以試試

吐槽專區(qū)有牛人留下了不少曲譜，照著曲譜按就行了，然后多按幾遍找感覺找節(jié)奏，剛開始發(fā)現(xiàn)這個玩意的時候我玩了一下午:)，如果你只是隨便玩玩，本文看到這里也就夠了，如果你有更多高階的需求，比如彈奏雅馬哈C7三角鋼琴，請繼續(xù)往下:)

比較高級的功能是MIDI播放，將mid的曲子拖進(jìn)來播放會顯示對應(yīng)的按鍵，像下面這樣，下面播放的是一首HITA的《赤伶》，（PS：很多年前就有這首歌了，最近抖音上面很火，只是很多人不知道曲名），鍵盤會自動動起來，可以參考練習(xí)，不過最開始建議練習(xí)一些簡單單手彈奏的沒有和弦的曲子，因?yàn)樽铋_始兩只手彈奏會很不協(xié)調(diào)，需要慢慢練習(xí)磨合

還有一個高級功能是可以對接MIDI鍵盤作為輸入，MIDI鍵盤類似于下面這樣，大的小的都有，全尺寸的88鍵類似于鋼琴鍵盤，某寶上便宜的幾百米貴的上千米的都有，當(dāng)然，如果你需要這，說明已經(jīng)是高級玩家了，也不需要我過多介紹

參考：https://zhuanlan.zhihu.com/p/27037951?refer=netcmcc?refer=netcmcc

一個全尺寸的88鍵的電子鍵盤長度約為1.4米，大概是一般小轎車后排車座的寬度。

當(dāng)然，除了這個鋼琴模擬器，還有各式各樣的模擬器，比如自由鋼琴：https://www.autopiano.cn/post/3579，長下面這樣，也有一些練習(xí)曲譜

這個網(wǎng)站還是一個開源項目，地址：https://github.com/AutoPiano/AutoPiano，感興趣的可以復(fù)刻或參與開發(fā)，下面是引用的項目介紹

Hate 996? Come Here & Relax~
最近用Vue + Tone.js做了一款鋼琴類web應(yīng)用，名字定為自由鋼琴（AutoPiano），人生如音樂，歡快且自由。
此文權(quán)當(dāng)作該項目的總結(jié)和分享~
項目簡介
自由鋼琴（AutoPiano）是利用HTML5技術(shù)開發(fā)的在線鋼琴應(yīng)用，致力于為鋼琴愛好者、音樂愛好者以及其他所有的創(chuàng)造者提供一個優(yōu)雅、簡潔的平臺，在學(xué)習(xí)工作之余可以享受鋼琴、音樂的美好。就類似于多年前Flash開發(fā)的鋼琴游戲，自由鋼琴只是換了H5的技術(shù)，同時支持了鋼琴曲的自動播放功能。
AutoPiano支持鍵盤按鍵和鼠標(biāo)點(diǎn)擊播放，同時琴鍵上會有按鍵和音名提示。另外，AutoPiano還有教學(xué)的功能，一種方式是快速入門，通過簡易的譜子按鍵進(jìn)行演奏，另一種是演奏示例，通過鋼琴曲的自動播放來達(dá)到演示的目的。目前這兩個功能都在持續(xù)完善中

第一句話 Hate 996? Come Here & Relax~，講出了眾多碼農(nóng)的心聲...

軟件版鋼琴模擬器FreePiano

軟件版就太多了，各種奇奇怪怪的安卓APK，IOS端自帶的《庫樂隊》，Windows上也有許多，Microsoft store里面一搜索就有許多

這里只介紹一款：FreePiano，中文譯名免費(fèi)鋼琴，是個人開發(fā)軟件，官網(wǎng)（自備梯子）：https://freepiano.tiwb.com/cn/

那為啥介紹這款？因?yàn)楹唵吻蚁鄬I(yè)，雖然樣子丑了一點(diǎn)（N年前的軟件了，最后一次更新是在2015年），并且很重要的是有團(tuán)隊基于它做了一些商業(yè)行為：https://www.baozoupiano.cn/，并且還說過要美化界面（經(jīng)過原作者同意），有人付費(fèi)了說明FreePiano滿足了一類人的需求還是值得被肯定。

第一次知道這個軟件是在youtube看到一個臺灣人用它彈奏《Flower dance》：https://www.youtube.com/watch?v=VJa-z67HQLg&t=100s&ab_channel=%E8%B6%99%E5%BB%A3%E7%90%B3

在官網(wǎng)有下載地址。下載安裝的過程就不說了，下載后打開鋼琴圖標(biāo)就可以，長下面這樣

基本功能就不過了，下面介紹一下高級功能

可以錄音和回放
可以加載自定義VSTi音源（這是彈奏十萬級效果的關(guān)鍵）
自帶節(jié)拍器
可接入MIDI鍵盤輸入，可自定義音頻輸出（比如輸出到揚(yáng)聲器或者耳機(jī)）
可以調(diào)整鋼琴按鍵的隨機(jī)力度與力度范圍（說白了就是讓演奏顯得更加真實(shí)）

彈奏十萬級效果下個目錄講，這里講一下怎么彈奏一首曲譜

找簡譜

比如《天空之城》，上網(wǎng)隨便百度一下，找到簡譜，如下

有兩排，上面一排是右手彈奏（主旋律），下面一排是左手彈奏（和弦），最開始彈上面一排就可以

看簡譜

簡譜太復(fù)雜的這里不講，只講最基本的，簡譜一共七個數(shù)字，相信以前讀書的時候音樂課都學(xué)過

音符：１２３４５６７

唱名：do re mi fa sol la si

漢字：多來米發(fā)梭拉西

0 是休止符，不發(fā)音

對應(yīng)鋼琴鍵盤上的 CDEFGAB

數(shù)字上面有點(diǎn)的叫高音，有兩個點(diǎn)叫倍高音，數(shù)字下面有點(diǎn)的叫低音，有兩個點(diǎn)的叫倍低音，如下

如果想了解更多簡譜的知識，可以參考

https://bbs.huaweicloud.com/blogs/241123
如何看懂音樂簡譜

彈奏

看到這里其實(shí)彈奏就很簡單了，比如天空之城第一段是

     .   . .
6 7  1 7 1 3 7

找到鍵盤上對應(yīng)的位置按照順序彈奏就可以了，試一下，找到感覺沒

電腦上怎么彈奏十萬級鋼琴效果？

有了上面的基礎(chǔ)操作后，下面來講講怎么演奏十萬級鋼琴效果

其核心就一句話：用FreePiano通過VSTi的方式加載雅馬哈C7三角鋼琴音源

首先了解一下VSTi技術(shù)

VSTi
VSTi（VST instrument），即VST樂器，是VST家族中用于生成音頻的一類VST插件。它們作為音源來使用，一般都是虛擬的合成器或采樣器。其中合成器通過軟件算法和DSP，模擬真實(shí)樂器、硬件合成器或獨(dú)創(chuàng)性地生成樂音；而采樣器則是采樣真實(shí)樂器的聲音，并通過VST插件播放出來。值得一提的是，一些VSTi插件能夠通過軟件合成媲美真實(shí)樂器的聲音，效果堪比真實(shí)樂器，卻擁有比采樣音源小的多的體積[注 1]。

大概原理是這樣的：

我們的雙手彈奏 >> 鍵盤或者M(jìn)IDI鍵盤 >> 音樂軟件(Cubase或者FreePiano等等) >> VSTi接口 >> 合成器或者采樣器 >> 發(fā)出聲音

FreePiano是處于音樂軟件的一環(huán)，這一環(huán)其實(shí)還有很多音樂軟件（也叫宿主），比如Cubase，IOS上的Logic等等等，這里不再展開，具體到我們要演奏的雅馬哈C7三角鋼琴，其流程是這樣的

我們的雙手彈奏 >> 鍵盤 >> FreePiano >> VSTi接口 >> 采樣器(Kontakt)加載雅馬哈C7三角鋼琴音源 >> 發(fā)出聲音

所以現(xiàn)在我們只需要采樣器Kontakt和雅馬哈C7三角鋼琴音源

采樣器Kontakt

采樣器

采樣器是一種錄制、修改和回放數(shù)字音頻的電子設(shè)備。它使用的是真實(shí)樂器的數(shù)字音頻樣本、歌曲片段或音效來創(chuàng)作音樂，并因此得名。
采樣器的聲音是被存儲在數(shù)字存儲器中的，因此可以直接調(diào)用，可以實(shí)現(xiàn)實(shí)時表演。您可以把聲音分配在鍵盤上，然后以不同的音調(diào)回放，以此來模仿原聲和電子鋼琴、風(fēng)琴和合成器等一系列鍵盤類樂器

Kontakt：https://www.native-instruments.com/zh/products/komplete/samplers/kontakt-6/

下面是一些官網(wǎng)的介紹

權(quán)威可靠的采樣平臺業(yè)界標(biāo)準(zhǔn)：KONTAKT 為許多最大型的采樣樂器音源提供了引擎動力其內(nèi)置的原廠庫就包含了 55+ GB 充滿細(xì)節(jié)、創(chuàng)意與表現(xiàn)力的樂器音源只需將采樣拖放入樂器音源界面之中，即可隨意玩轉(zhuǎn)屬于你的聲音以及使用強(qiáng)大的采樣編輯與樂器制作選項來制作屬于自己的樂器音源不僅僅是采樣器
使用內(nèi)含大量采樣樂器音源的 KONTAKT 6 ，您可以創(chuàng)作出聽起來像軍鼓、交響樂，或者介于兩者之間的任何音色。當(dāng)您需要一個簡單的采樣器，它如您所愿，當(dāng)您有更多聲音需求時，它是一個深度聲音腳本實(shí)驗(yàn)室。世界上最受歡迎的新一代采樣平臺，為您提供了新的樂器音源和新功能——您可以按照您需要的方式對聲音進(jìn)行分層、連接、拉伸和塑形。

說白了Kontakt不僅能采樣樂器制作成音源，還能加載采樣過后音源，這貨是付費(fèi)軟件：￥?3199，當(dāng)然個人使用和諧版即可，商業(yè)行為須購買正式版

和諧版：http://www.opdown.com/soft/244096.html

親測可用，按照教程來，注意替換里面的Kontakt.exe和Kontakt.dll，32bit還是64bit根據(jù)自己的實(shí)際情況選擇

如果一路默認(rèn)安裝的話，VSTi插件的路徑應(yīng)該是，記住這個FreePiano正是通過這個來調(diào)用它

C:\Program Files\Native Instruments\VSTPlugins 64 bit\Kontakt.dll

雅馬哈C7三角鋼琴音源

這款音源全稱：Production Voices - Production Grand 2 Platinum，中文得搜索關(guān)鍵詞制作人鋼琴白金版或者白金制作人鋼琴

購買地址：https://www.productionvoices.com/product/production-grand-2-2/，介紹如下

Production Grand 2
9.00
Production Grand 2 is an exceptionally high-quality piano sample library for NI Kontakt 5.7 and above, consisting of eight microphone perspectives and over 120,000 samples of a Yamaha C7 grand piano recorded in a world-class recording studio. The library is 437.5 GB in size*!

大意是說這款鋼琴音源是錄制的雅馬哈C7三角鋼琴，適用于采樣器Kontakt 5.7版本以上（我們下載的是6），包括在世界級錄音室錄制的超過120,000多個聲音樣本，總大小437.5GB，當(dāng)然這一切不是免費(fèi)的，需要329美元即可擁有

還是那句話，非商用找和諧版，商用自行購買之，和諧版這里提供一套110G多的（開個百度夜間會員8塊錢一晚上就可以下載好）

鏈接：https://pan.baidu.com/s/13hvj1hRUWO0SmX9cgLrrHA 提取碼：e0e8

下載好后是100多個壓縮包，全選解壓后Samples文件夾里面是音源樣本，這就是那100多G的大家伙，PG Platinum Singles文件夾里面是樂器文件，Kontakt通過加載這些樂器文件從而加載音源樣本

加載音源

打開宿主軟件FreePiano，點(diǎn)擊音源選擇瀏覽，選擇Kontakt的VSTi插件并且打開，即上文提到的C:\Program Files\Native Instruments\VSTPlugins 64 bit\Kontakt.dll

然后會默認(rèn)打開Kontakt的界面，選擇剛才的PG Platinum Singles目錄，然后隨便選一個樂器文件，我選的是PG Platinum Modern Inside v1_1_16.nki，然后慢慢等加載，加載完成后在FreePiano上試一下如果有聲音說明加載成功！

上面有很多參數(shù)可以調(diào)整的，這個自行研究，為啥每次都加載這么慢？因?yàn)闃颖颈容^大，每個樂器文件包含的樣本15G左右，所以瘋狂讀硬盤，有沒有快一點(diǎn)的方法？有的，如下圖另存為，選擇Patch Only和Absolute Path，然后在Quick-Load面板打開就很快

效果

雖然現(xiàn)在我們發(fā)出的聲音是雅馬哈C7三角鋼琴的了，實(shí)際上最大的感覺是可以調(diào)整的參數(shù)變多了，因?yàn)镕reePiano有豐富的參數(shù)可以調(diào)整，特效啊、音調(diào)啊啥的；但是聲音的效果好像感覺并不大，或者是因?yàn)槟阈枰粋€好一點(diǎn)的音響或耳機(jī):)，所以你五千的電腦里面得拿出一部分預(yù)算整個雅馬哈音響（笑）

當(dāng)然Kontakt不止是可以加載鋼琴音源，還有很多音源，比如古風(fēng)類的、打擊樂的、吉他的，就像把一個樂隊搬回了家，更多玩法等待高端玩家自行發(fā)揮...

參考

http://www.piano-play-it.com/yamaha-grand-piano.html
https://www.ebay.com/itm/203074406408?hash=item2f482d8808:g:QskAAOSwl~hfMyBc
https://bbs.huaweicloud.com/blogs/241123
https://www.jianshu.com/p/11c988a75af7

在線咨詢

上一篇：html實(shí)體編碼遇上js代碼
下一篇：HTML5基礎(chǔ)入門

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

大神60行JS代碼實(shí)現(xiàn)的網(wǎng)頁鋼琴按鍵特效，代碼&amp;gt;點(diǎn)開文章拷貝拿走

先上一個效果圖（鍵盤控制的，效果有點(diǎn)鬼畜?。?br>