Javascript是一個允許我們在網頁中添加互動性和動態效果的腳本語言。隨著它的不斷發展,越來越多的人開始發現它的強大之處,使用它來寫各種各樣的程序,比如寫鋼琴。
在寫鋼琴的過程中,我們需要定義每個鋼琴鍵所對應的頻率和聲音,并且將它們添加到頁面上。我們可以使用HTML和CSS對頁面進行布局和樣式控制,使用Javascript來實現鋼琴鍵的功能。
// 定義鋼琴鍵的頻率和聲音
var notes = {
'C4': 261.6,
'D4': 293.7,
'E4': 329.6,
'F4': 349.2,
'G4': 392.0,
'A4': 440.0,
'B4': 493.9,
'C5': 523.3
};
// 添加鋼琴鍵到頁面上
for (var note in notes) {
var key = document.createElement('div');
key.setAttribute('data-note', note);
key.setAttribute('class', 'key');
document.getElementById('piano').appendChild(key);
}
// 播放音符
function playNote(note) {
var audio = new Audio('notes/' + note + '.mp3');
audio.play();
}
// 監聽鍵盤事件
document.addEventListener('keydown', function(event) {
if (event.keyCode >= 65 && event.keyCode<= 90) {
var note = document.querySelector('[data-note="' + event.key.toUpperCase() + '"]');
if (note) {
note.classList.add('active');
playNote(note.getAttribute('data-note'));
}
}
});
document.addEventListener('keyup', function(event) {
if (event.keyCode >= 65 && event.keyCode<= 90) {
var note = document.querySelector('[data-note="' + event.key.toUpperCase() + '"]');
if (note) {
note.classList.remove('active');
}
}
});
在上面的代碼中,我們首先定義了每個鋼琴鍵所對應的頻率和聲音,然后使用循環將它們添加到頁面上。我們還定義了一個playNote函數用于播放音符,以及監聽鍵盤事件來觸發鋼琴鍵的動作。
當用戶按下一個鍵時,我們使用document.querySelector方法來獲取這個鍵,并根據它的屬性來確定所對應的音符。然后通過playNote函數來播放這個音符,并讓這個鍵變為active狀態。當用戶松開這個鍵時,我們將active狀態取消。
總的來說,Javascript可以被用于寫各種各樣的程序,包括音樂應用程序。在寫鋼琴的過程中,我們使用HTML和CSS來定義頁面布局和樣式,使用Javascript來實現鋼琴鍵的功能。這個程序展示了Javascript的強大和靈活性,它可以被用于創造出各種有趣的應用程序。