jquery与audio实现钢琴
时间: 2023-12-17 18:05:48 浏览: 23
好的,以下是使用jQuery和HTML5的audio元素来实现钢琴的基本示例。
HTML结构:
```html
<div class="piano">
<div class="white-key" data-note="C"></div>
<div class="black-key" data-note="C#"></div>
<div class="white-key" data-note="D"></div>
<div class="black-key" data-note="D#"></div>
<!-- 其他键... -->
</div>
<audio id="piano-audio"></audio>
```
CSS样式:
```css
.piano {
display: flex;
justify-content: center;
}
.white-key {
width: 50px;
height: 150px;
background-color: white;
border: 1px solid black;
position: relative;
}
.black-key {
width: 30px;
height: 90px;
background-color: black;
position: absolute;
top: 0;
left: 25px;
z-index: 1;
}
.black-key:before {
content: "";
width: 100%;
height: 100%;
background-color: black;
position: absolute;
top: -10px;
left: 0;
z-index: -1;
}
.white-key:hover,
.black-key:hover {
cursor: pointer;
background-color: #f5f5f5;
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
$('.piano .white-key, .piano .black-key').mousedown(function() {
var note = $(this).data('note');
$('#piano-audio').attr('src', 'audio/' + note + '.mp3')[0].play();
});
});
```
在这个示例中,我们使用jQuery的mousedown()方法来为每个键添加鼠标按下事件处理函数。当用户按下钢琴键时,我们将获取该键的音符,并将其与一个audio元素相关联,然后播放音频。
请注意,audio元素的src属性是在用户按下钢琴键时动态更新的,以便与相应的音频文件进行关联。此外,我们还使用了[0]来获取audio元素的DOM对象,因为jQuery的attr()方法不能直接设置HTML5元素的属性。
这只是一个简单的示例,您可以根据自己的需要进行更详细的实现。