AudioContext模拟钢琴效果-html代码-BFW代码库

AudioContext模拟钢琴效果

代码语言：html

所属分类：其他

代码描述：AudioContext模拟钢琴效果

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    body
{
  background:#112;
  color:#fff;
  user-select:none;
  text-align:center;
  style=font-size:30px;
  font-family:arial;
}
input
{
  width:40;
}
</style>
<body>

<span id="K"></span>
八度音 <input type=number id=O value=0 min=-3 max=3 onkeydown='return false'>&nbsp;
Key <input type=number id=Y value=0 min=-12 max=12 onkeydown='return false'><br>

<script>
    
    ///////////////////////////////////////////////////////////////////////////////
/* 1Keys - A 1 Kilobyte JavaScript Piano - CodePen Version

By Frank Force 2020
GNU General Public License v3.0
https://github.com/KilledByAPixel/1Keys
Orignally made for JS1024

1k Features...
- Three different instrument sounds
- Keyboard and mouse support
- Multiple notes can be played independently
- Notes can be held for any length of time
- Keys light up red when played
- Sounds stop if focus is lost
- Sounds ramp on and off to eliminate pops
- Pure vanilla JS with no external files

Extra CodePen Features...
- Octave and Key control
- Show keyboard keys on piano
- Sine instrument

*/

C = new AudioContext; // audio context
A = [];               // active sounds
I = 0;                // instrument type

// instrument select
[...`∿🎻🎷🎹`].map((i,j)=>                           // instrument icons
    K.innerHTML += i +                                 // icon
    `<input type=radio name=I checked onmousedown=I=${ // radio input
    3 - j}> &nbsp;`);                                  // instrument select

// piano keys
for(i = 0; i < 36; i++) // 3 x 12 keys
        
    document.body.innerHTML +=
        `${i%12 ? `` : `<br>`                                       // new row
        }<div id=K${                                                // create key
            k = 24 + i%12 - (i/12|0)*12                             // reorder keys
        } style='display:inline-block;outline:3px solid #000;background:${ // style
        (w = `02579`.indexOf(i%12 - 1) < 0) ?                       // b or w?
        `#fff;color:#000;width:60px;height:140px` :                 // white
        `#000;position:absolute;margin-left:-15px;width:29px;height:79px` // black
        }'onmouseover=event.buttons&&P(${ k                         // mouse over
        }) onmousedown=P(${ k                                       // mouse down
        }) onmouseup=X(${ k                                         // mouse up
        }) onmouseout=X(${ k                                        // mouse out
        })>` + (w ? `<br>` : ``) +                                  // lower white keys
        `ZSXDCVGBHNJMQ2W3ER5T6Y7UI9O0P[=]    `[k];                  // show key

//////////////////////////////////.........完整代码请登录后点击上方下载按钮下载查看