目 录CONTENT

文章目录

网页钢琴案例

Administrator
2022-02-23 / 0 评论 / 1 点赞 / 5801 阅读 / 7154 字

网页钢琴案例

  • 案例名称:网页钢琴
  • 案例人员:杨标
  • 案例平台:HTML+CSS+JavaScript
  • 完成时间:2022年2月16日

效果图

image20220216102314908.png

案例说明

本案例旨在对学生的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

image20220216102314908.png

1

评论区