JS创建Piano

最新推荐文章于 2021-08-06 15:56:35 发布

春雨惊春.

最新推荐文章于 2021-08-06 15:56:35 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/qq_53979554/article/details/118632676

版权

文章目录

前言

前言

利用音视频标签创建钢琴。
步骤很简单没什么好说的，写这篇文章的原因主要是觉得这个很好玩，分享一下，直接上代码吧：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>piano</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #piano{
            display: flex;
            flex-shrink: inherit;
            width: 1300px;
            height: 400px;
            border: solid 1px #000;
            margin: 100px auto;
        }
        #piano li{
            flex: 1;
            /*width: 35px;*/
            height: 100%;
            border-right: solid 1px #000;
            line-height: 400px;
            text-align: center;
            cursor: pointer;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<ul id="piano"></ul>
<audio src=""></audio>

<script>

    //获取 piano 元素
    var piano = document.getElementById("piano");
    //获取 audio 标签
    var audio = document.querySelector("audio");
    /*
    * 创建 li 元素
    *   a1~a7
    *   b1~b7
    *   c1~c7
    *   d1~d7
    *   e1~e7
    *   f1~f7
    *   g1~g7
    * */
    //创建数组表示音调
    var arr = ['c','d','e','f','g','a','b'];
    //嵌套 for 循环创建 li
    for(var i=1;i<=7;i++){
        for(var j=0; j<arr.length;j++){
            //创建 li
            var li = document.createElement("li");
            li.innerHTML = arr[j]+i;
            if(j % 2 == 0){
                li.style.backgroundColor = '#e5cfdb';
            }
            if(i == 4){
                li.style.backgroundColor = "skyblue";
                li.style.width = 30 +"px";
                li.style.flex = "none";
            }
            if(i == 7 && j == arr.length-1){
                li.style.border = "none";
            }
            //将 li 添加到 piano 中
            piano.appendChild(li);
            //为每个 li 绑定单击事件
            li.onclick = function(){
                //获取所有 li
                var lis = document.querySelectorAll("#piano li");
                lis.forEach(function(li){
                    li.style.opacity = 1;
                })
                //改变当前 li 的背景颜色
                this.style.opacity = 0.5;
                //设置 audio 的 src 属性
                audio.src = 'http://s8.qhimg.com/share/audio/piano1/'+this.innerHTML+'.mp3';
                //播放
                audio.play();
            }
        }
    }
    /*
    * 绑定键盘事件
    * */
    //获取所有 li
    var lis = document.querySelectorAll("#piano li");
    //创建数组保存 按键代码
    var keyCodesArr = [81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 219, 221, 65, 83, //q w e r t y u i o p [ ] a s
                        90, 88, 67, 86, 66, 78, 77, //降调 z x c v b n m
                        49, 50, 51, 52, 53, 54, 55, //键盘上的 1 2 3 4 5 6 7 do re mi fa so la xi
                        56, 57, 48, 189, 187, 8, 220, //升调 8 9 0 - = Backspace \
                        68, 70, 71, 72, 74, 75, 76, 186, 222, 13, 188, 190, 191, 16]; //d f g h j k l ; ' Enter , . / Shift
    //为 li 绑定键盘事件
    window.onkeydown = function(e){
        //获取当前按键代码
        var key = e.keyCode;
        //通过按键码判断 li 的索引
        var index = getIndex(key);
        //触发 index 对应的 li 的 单击事件
        lis[index].click();
    }
    //创建函数根据按键码获取 li 的索引
    function getIndex(v){
        //遍历按键码数组
        for(i=0;i<keyCodesArr.length;i++){
            if(v == keyCodesArr[i]){
                var index = i;
            }
        }
        return index;
    }

</script>
</body>
</html>

（完）

春雨惊春.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS创建Piano

文章目录前言前言利用音视频标签创建钢琴。步骤很简单没什么好说的，写这篇文章的原因主要是觉得这个很好玩，分享一下，直接上代码吧：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sca
复制链接

扫一扫