好的，以下是一个简单的网页钢琴代码，包括8个
白键和5个
黑键，鼠标点击键有声音，具有录制模式和回放功能，回放功能下可播放录制模式录下来的声音：
HTML代码：
```
<!DOCTYPE html>
<html>
<head>
<title>网页钢琴</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="
piano">
<div class="white-key" id="C"></div>
<div class="black-key" id="C-sharp"></div>
<div class="white-key" id="D"></div>
<div class="black-key" id="D-sharp"></div>
<div class="white-key" id="E"></div>
<div class="white-key" id="F"></div>
<div class="black-key" id="F-sharp"></div>
<div class="white-key" id="G"></div>
<div class="black-key" id="G-sharp"></div>
<div class="white-key" id="A"></div>
<div class="black-key" id="A-sharp"></div>
<div class="white-key" id="B"></div>
</div>
<div class="controls">
<button id="record">录制</button>
<button id="play">播放</button>
</div>
<audio id="C-note" src="C.mp3"></audio>
<audio id="C-sharp-note" src="C-sharp.mp3"></audio>
<audio id="D-note" src="D.mp3"></audio>
<audio id="D-sharp-note" src="D-sharp.mp3"></audio>
<audio id="E-note" src="E.mp3"></audio>
<audio id="F-note" src="F.mp3"></audio>
<audio id="F-sharp-note" src="F-sharp.mp3"></audio>
<audio id="G-note" src="G.mp3"></audio>
<audio id="G-sharp-note" src="G-sharp.mp3"></audio>
<audio id="A-note" src="A.mp3"></audio>
<audio id="A-sharp-note" src="A-sharp.mp3"></audio>
<audio id="B-note" src="B.mp3"></audio>
<script src="script.js"></script>
</body>
</html>
```
CSS代码：
```
body {
background-color: #f2f2f2;
}
.
piano {
display: flex;
justify-cont
ent: c
enter;
align-items: flex-
end;
height: 400px;
}
.white-key {
width: 50px;
height: 200px;
background-color: white;
border: 1px solid black;
border-radius: 5px 5px 0 0;
margin-right: -1px;
position: relative;
}
.black-key {
width: 30px;
height: 120px;
background-color: black;
border: 1px solid black;
border-radius: 5px 5px 0 0;
margin-right: -15px;
position: relative;
z-index: 1;
}
#C-sharp, #D-sharp, #F-sharp, #G-sharp, #A-sharp {
margin-left: -15px;
}
.controls {
display: flex;
justify-cont
ent: c
enter;
margin-top: 20px;
}
button {
margin: 0 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
button:focus {
outline: none;
}
button:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed;
}
button:disabled:hover {
background-color: #cccccc;
}
audio {
display: none;
}
```
JS代码：
```
var keys = docum
ent.querySelectorAll('.white-key, .black-key');
var recordButton = docum
ent.getElem
entById('record');
var playButton = docum
ent.getElem
entById('play');
var recordedNotes = [];
var playbackIndex = 0;
var isRecording = false;
var isPlayingBack = false;
keys.forEach(function(key) {
key.addEv
entList
ener('mousedown', function() {
playSound(key.id);
if (isRecording) {
recordedNotes.push(key.id);
}
});
});
recordButton.addEv
entList
ener('click', function() {
if (!isRecording) {
recordedNotes = [];
isRecording = true;
recordButton.innerHTML = '停止录制';
playButton.disabled = true;
} else {
isRecording = false;
recordButton.innerHTML = '录制';
playButton.disabled = false;
}
});
playButton.addEv
entList
ener('click', function() {
if (!isPlayingBack) {
isPlayingBack = true;
playButton.innerHTML = '停止播放';
recordButton.disabled = true;
playbackIndex = 0;
playbackInterval = setInterval(function() {
if (playbackIndex < recordedNotes.l
ength) {
playSound(recordedNotes[playbackIndex]);
playbackIndex++;
} else {
isPlayingBack = false;
playButton.innerHTML = '播放';
recordButton.disabled = false;
clearInterval(playbackInterval);
}
}, 500);
} else {
isPlayingBack = false;
playButton.innerHTML = '播放';
recordButton.disabled = false;
clearInterval(playbackInterval);
}
});
function playSound(id) {
var note = docum
ent.getElem
entById(id + '-note');
note.curr
entTime = 0;
note.play();
}
```
注意：以上代码只是一个简单的示例，实际应用中可能需要更多的功能和优化。
扫一扫
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
