HTML5模擬鋼琴是一種基于web技術的音樂應用，它可以在瀏覽器中使用JavaScript代碼模擬各種鋼琴鍵的聲音與操作。
下面是一個簡單的HTML5模擬鋼琴的代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML5模擬鋼琴</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.piano-key {
width: 35px;
height: 150px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border-radius: 3px;
display: inline-block;
margin-right: 1px;
background-color: white;
}
</style>
</head>
<body>
<div id="piano">
<div class="piano-key" data-note="c" onclick="playNote(this)"></div>
<div class="piano-key" data-note="d" onclick="playNote(this)"></div>
<div class="piano-key" data-note="e" onclick="playNote(this)"></div>
<div class="piano-key" data-note="f" onclick="playNote(this)"></div>
<div class="piano-key" data-note="g" onclick="playNote(this)"></div>
<div class="piano-key" data-note="a" onclick="playNote(this)"></div>
<div class="piano-key" data-note="b" onclick="playNote(this)"></div>
</div>
<audio id="c-note"><source src="c.mp3" type="audio/mp3"></audio>
<audio id="d-note"><source src="d.mp3" type="audio/mp3"></audio>
<audio id="e-note"><source src="e.mp3" type="audio/mp3"></audio>
<audio id="f-note"><source src="f.mp3" type="audio/mp3"></audio>
<audio id="g-note"><source src="g.mp3" type="audio/mp3"></audio>
<audio id="a-note"><source src="a.mp3" type="audio/mp3"></audio>
<audio id="b-note"><source src="b.mp3" type="audio/mp3"></audio>
<script>
function playNote (key) {
var note = key.getAttribute("data-note");
var audio = document.getElementById(note + "-note");
audio.currentTime = 0;
audio.play();
}
</script>
</body>
</html>在這個代碼中，我們首先定義了幾個div元素，每個元素都表示一個鋼琴鍵，使用onclick事件觸發playNote()函數，playNote()函數中使用HTML5音頻API播放音符。
實際上，我們還需要提供mp3音頻文件來引導音頻播放，例如上面的代碼中我們為c、d、e、f、g、a、b七個音符分別提供了對應的mp3文件。
因為這個鋼琴是基于web技術的，它可以隨時在互聯網上運行，也可以嵌入任何網站或應用程序中使用。
上一篇react內聯css
下一篇html5橫幅轉動源代碼