快捷導(dǎo)航

javascript實現(xiàn)簡單小鋼琴有聲彈奏效果

更新時間：2024年02月24日 17:01:13 作者：軟件技術(shù)愛好者

用HTML5+javascript實現(xiàn)的小鋼琴,按下鋼琴鍵上的相應(yīng)字母用或用鼠標點擊鋼琴鍵發(fā)聲,javascript代碼包含了對鼠標按下、移動和松開,以及鍵盤按下的事件監(jiān)聽

小鋼琴代碼原理

代碼中使用了JavaScript中的箭頭函數(shù)（Arrow Function）語法。箭頭函數(shù)是ES6中的一種函數(shù)聲明方式，它的語法比較簡潔。箭頭函數(shù)的基本格式是：(參數(shù)) => {函數(shù)體}。

keys.forEach(key => { })

箭頭函數(shù)的參數(shù)是key，表示forEach遍歷的每個元素。

key.addEventListener('click', () => { })

它是給每個琴鍵添加鼠標點擊事件的代碼。addEventListener 方法用于給元素添加事件監(jiān)聽器。這里添加了一個點擊事件的監(jiān)聽器，當用戶點擊琴鍵時，箭頭函數(shù)會被執(zhí)行。

小鋼琴源碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用HTML5實現(xiàn)的小鋼琴2</title>
  <style>
    .key {
      width: 50px;
      height: 150px;
      border: 1px solid black;
      display: inline-block;
      margin: 5px;
      text-align: center;
      line-height: 150px;
      cursor: pointer;
      position: relative;
      transition: transform 0.1s;
    }
    .key.active {
      transform: translateY(4px);
    }
  </style>
</head>
<body>
  <div id="A" class="key">A</div>
  <div id="S" class="key">S</div>
  <div id="D" class="key">D</div>
  <div id="F" class="key">F</div>
  <div id="G" class="key">G</div>
  <div id="H" class="key">H</div>
  <div id="J" class="key">J</div>
  <div id="K" class="key">K</div>
  <script>
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    let isMouseDown = false; // 記錄鼠標是否被按下
    function playSound(frequency) {
      const oscillator = audioContext.createOscillator();
      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
      oscillator.connect(audioContext.destination);
      oscillator.start();
      oscillator.stop(audioContext.currentTime + 0.3);
    }
    const keys = document.querySelectorAll('.key');
    keys.forEach(key => {
      key.addEventListener('mousedown', (event) => {
        isMouseDown = true; // 設(shè)置鼠標按下狀態(tài)為true
        playNoteFromElement(event.target);
      });
      key.addEventListener('mouseenter', (event) => {
        if (isMouseDown) { // 如果鼠標處于按下狀態(tài)，則播放音符
          playNoteFromElement(event.target);
        }
      });
      // 鼠標按下并移動到其他琴鍵時，無需額外mouseup事件監(jiān)聽
    });
    // 監(jiān)聽文檔的mouseup事件，以處理鼠標在琴鍵外松開的情況
    document.addEventListener('mouseup', () => {
      isMouseDown = false;
    });
    // 監(jiān)聽鍵盤按下事件
    document.addEventListener('keydown', (event) => {
      const keyName = event.key.toUpperCase(); // 獲取按鍵名并轉(zhuǎn)為大寫
      const keyElement = document.getElementById(keyName); // 獲取對應(yīng)的琴鍵元素
      if (keyElement && !keyElement.classList.contains('active')) {
        playNoteFromElement(keyElement);
      }
    });
    function playNoteFromElement(element) {
      const note = element.textContent;
      playNote(note);
      animatePress(element);
    }
    function animatePress(keyElement) {
      keyElement.classList.add('active');
      setTimeout(() => {
        keyElement.classList.remove('active');
      }, 100);
    }
    function playNote(note) {
      let frequency;
      switch (note) {
        case 'A':
          frequency = 261.63;
          break;
        case 'S':
          frequency = 293.66;
          break;
        case 'D':
          frequency = 329.63;
          break;
        case 'F':
          frequency = 349.23;
          break;
        case 'G':
          frequency = 392.00;
          break;
        case 'H':
          frequency = 440.00;
          break;
        case 'J':
          frequency = 493.88;
          break;
        case 'K':
          frequency = 523.25;
          break;
        default:
          return;
      }
      playSound(frequency);
    }
  </script>
</body>
</html>

音高頻率對照表參考

音高（英語：pitch）在音樂領(lǐng)域里指的是人類心理對音符基頻之感受。

聲的本質(zhì)是機械波，所以聲速一定時，音的高低是由機械波的頻率和波長決定的。頻率高、波長短，則音"高"，反之，頻率低、波長長，則音"低"。

音高是聲音的三大特征之一，區(qū)別于音強和音色，音調(diào)高只能表示音的頻率高和波長短，不能表示振幅大和音強強，這一點很多初學(xué)者容易混淆出錯，進入誤區(qū)。我們要把這兩者區(qū)分開來，不能混為一談。而音色則是聲音的其他波段(如泛音)所決定，這些波段不影響音高，所以音高與音色亦無關(guān)系。

音高頻率對照表

頻率，單位為赫茲。括號內(nèi)為距離中央C（261.63赫茲）的半音距離。
八度→ 音名↓	0	1	2	3	4	5	6	7	8	9
C	16.352（−48）	32.703（−36）	65.406（−24）	130.81（−12）	261.63（0）	523.25（+12）	1046.5（+24）	2093.0（+36）	4186.0（+48）	8372.0（+60）
C?/D?	17.324（−47）	34.648（−35）	69.296（−23）	138.59（−11）	277.18（+1）	554.37（+13）	1108.7（+25）	2217.5（+37）	4434.9（+49）	8869.8（+61）
D	18.354（−46）	36.708（−34）	73.416（−22）	146.83（−10）	293.66（+2）	587.33（+14）	1174.7（+26）	2349.3（+38）	4698.6（+50）	9397.3（+62）
D?/E?	19.445（−45）	38.891（−33）	77.782（−21）	155.56（−9）	311.13（+3）	622.25（+15）	1244.5（+27）	2489.0（+39）	4978.0（+51）	9956.1（+63）
E	20.602（−44）	41.203（−32）	82.407（−20）	164.81（−8）	329.63（+4）	659.26（+16）	1318.5（+28）	2637.0（+40）	5274.0（+52）	10548（+64）
F	21.827（−43）	43.654（−31）	87.307（−19）	174.61（−7）	349.23（+5）	698.46（+17）	1396.9（+29）	2793.8（+41）	5587.7（+53）	11175（+65）
F?/G?	23.125（−42）	46.249（−30）	92.499（−18）	185.00（−6）	369.99（+6）	739.99（+18）	1480.0（+30）	2960.0（+42）	5919.9（+54）	11840（+66）
G	24.500（−41）	48.999（−29）	97.999（−17）	196.00（−5）	392.00（+7）	783.99（+19）	1568.0（+31）	3136.0（+43）	6271.9（+55）	12544（+67）
G?/A?	25.957（−40）	51.913（−28）	103.83（−16）	207.65（−4）	415.30（+8）	830.61（+20）	1661.2（+32）	3322.4（+44）	6644.9（+56）	13290（+68）
A	27.500（−39）	55.000（−27）	110.00（−15）	220.00（−3）	440.00（+9）	880.00（+21）	1760.0（+33）	3520.0（+45）	7040.0（+57）	14080（+69）
A?/B?	29.135（−38）	58.270（−26）	116.54（−14）	233.08（−2）	466.16（+10）	932.33（+22）	1864.7（+34）	3729.3（+46）	7458.6（+58）	14917（+70）
B	30.868（−37）	61.735（−25）	123.47（−13）	246.94（−1）	493.88（+11）	987.77（+23）	1975.5（+35）	3951.1（+47）	7902.1（+59）	15804（+71）