网页钢琴案例
- 案例名称：网页钢琴
- 案例人员：杨标
- 案例平台：HTML+CSS+JavaScript
- 完成时间：2022年2月16日
效果图
案例说明
本案例旨在对学生的HTML+CSS+JS的学习做一个综合 ，同时重点放在了DOM操作及DOM的事件上面，也对音频标签做了一个相应的回顾
案例代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页钢琴</title>
<style>
.piano-box {
display: flex;
width: fit-content;
margin: auto;
}
.piano-item-white {
height: 400px;
width: 70px;
border: 2px solid black;
border-right: none;
border-radius: 0px 0px 10px 5px;
box-shadow: 10px -10px 5px lightgray inset;
position: relative;
}
.piano-item-white-last {
border-right: 2px solid black;
}
.piano-item-black {
width: 50px;
height: 230px;
background-color: #222222;
box-shadow: 10px -10px 5px #333333 inset;
border-radius: 0px 0px 5px 5px;
position: absolute;
right: 0px;
top: 0px;
transform: translateX(50%);
z-index: 2;
}
.piano-item-white[data-status="1"] {
background-color: #ececec;
}
.piano-item-black[data-status="1"] {
background-color: gray;
}
</style>
</head>
<body>
<h2>
白键： S， D， F， G ，H，J，K，L
黑键：E，R，Y，U，I
</h2>
<div class="piano-box">
<div class="piano-item-white" data-status="0" data-key="s" data-src="./assets/w1.ogv">
<div class="piano-item-black" data-status="0" data-key="e" data-src="./assets/b1.ogv"></div>
</div>
<div class="piano-item-white" data-status="0" data-key="d" data-src="./assets/w2.ogv">
<div class="piano-item-black" data-status="0" data-key="r" data-src="./assets/b2.ogv"></div>
</div>
<div class="piano-item-white" data-status="0" data-key="f" data-src="./assets/w3.ogv"></div>
<div class="piano-item-white" data-status="0" data-key="g" data-src="./assets/w4.ogv">
<div class="piano-item-black" data-status="0" data-key="y" data-src="./assets/b3.ogv"></div>
</div>
<div class="piano-item-white" data-status="0" data-key="h" data-src="./assets/w5.ogv">
<div class="piano-item-black" data-status="0" data-key="u" data-src="./assets/b4.ogv"></div>
</div>
<div class="piano-item-white" data-status="0" data-key="j" data-src="./assets/w6.ogv">
<div class="piano-item-black" data-status="0" data-key="i" data-src="./assets/b5.ogv"></div>
</div>
<div class="piano-item-white" data-status="0" data-key="k" data-src="./assets/w7.ogv"></div>
<div class="piano-item-white piano-item-white-last" data-status="0" data-key="l" data-src="./assets/w8.ogv">
</div>
</div>
</body>
<script>
var pianoControl = {
dom: {
piano: {}
},
data: {},
bindEvent: function () {
Object.keys(this.dom.piano).forEach(function (item) {
pianoControl.dom.piano[item].addEventListener("mousedown", function (event) {
// 注意，这里通过事件绑定者，拿到自定义属性data-key
var key = event.currentTarget.dataset.key;
pianoControl.playMusicByKey(key);
event.stopPropagation();
event.cancelBubble = true;
});
pianoControl.dom.piano[item].addEventListener("mouseup", function (event) {
var key = event.currentTarget.dataset.key;
pianoControl.stopMusicByKey(key);
event.stopPropagation();
event.cancelBubble = true;
});
});
document.addEventListener("keydown", function (event) {
// 这里的event.key代表按键的字母，为了防止在小写区分，我们统一转成了小写
var key = event.key.toLowerCase();
pianoControl.playMusicByKey(key);
});
document.addEventListener("keyup", function (event) {
var key = event.key.toLowerCase();
pianoControl.stopMusicByKey(key);
});
},
init: function () {
this.dom.piano = this.getAllPianoElement();
this.bindEvent();
},
/**
* @description 获取所有的按钮dom
*/
getAllPianoElement: function () {
var eles = document.querySelectorAll("[class^='piano-item']");
var obj = {};
eles.forEach(function ( /** @type {HTMLElement}*/ item) {
obj[item.dataset.key] = item;
});
return obj;
},
/**
* @description 根据一个键来播放音乐
*/
playMusicByKey: function (key) {
if (this.dom.piano[key]) {
var audio = new Audio();
audio.src = this.dom.piano[key].dataset.src;
audio.play();
this.dom.piano[key].dataset.status = 1;
}
},
/**
* @description 根据一个键停止音乐
*/
stopMusicByKey: function (key) {
if (this.dom.piano[key]) {
this.dom.piano[key].dataset.status = 0;
}
}
}
pianoControl.init();
</script>
</html>
素材准备
本次素材可以直接通过以下地址下载
http://www.softeem.xin:8090/upload/2022/02/wangyegangqin-8c35d037be0f4bdfaa4f811238ab4fec.zip
评论区