【JS30-Wes Bos】钢琴琴键 01 javascript前端

title: 【原生javascript项目】Piano-Kit-01
date: 2021-11-07 19:44:12
tags: 原生javascript项目
categories: 30个原生javascript项目

作者：?iaineisalsoyan
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。
本项目为第1天的“钢琴琴键”项目。Have fun with the website! ?(^?^*)

引言
本文介绍如何用javascripty语法写一个简单的琴键(drum ang piano)网页，通过敲击特定键盘（音键），可以发出不同音调。
网址为(https://janice143.github.io/m...)
正文
1网页布局与功能

文章图片

网页整体分为3个部分：
1是最顶上居中排布的乐器切换(Drum Kit, Piano Kit)组块，选中响应的kit，背景图和琴键切换为响应的内容，同时kit字体变为白色；
2是页面居中排布的琴键；
3是背景图。
琴键可以通过鼠标点击或者按下响应的键盘来操作，可以发出对应的音效（黄色字体表示音效的名称）。琴键被点击按下后，加以一定的css动画（黄色高亮边框）来区分。
2实现原理一、 html代码
1 乐器切换组块：

Drum Kit Piano Kit

2 Drum Kit:

A DO S RE D MI F FA G SOL H LA J SI

3 Piano Kit

A CLAP S HIHAT D KICK F OPENHAP G BOOM H RIDE J SNARE K TOM L TINK

二、css代码
1 实现顶部的切换组块（Drum Kit, Piano Kit)固定在窗口的某个位置，不占位置，脱离标准文档流；居中排布

position: fixed; left:0; right:0; margin:0 auto;

2 实现琴键居中排布：用Flex 布局实现垂直、水平居中。
任何一个容器都可以指定为 Flex 布局（flex容器），display: flex即可实现。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"Item"。
容器具有6个属性：
· flex-direction:水平主轴的方向
· flex-wrap:如果主轴拍不下，可以用这个属性来设置换行的形式
· flex-flow:合并了flex-direction 和flex-wrap的功能，用这个属性可以同时设置这两个属性。
· justify-content:定义了item在主轴（水平方向上）的对齐方式
·align-items：定义了item在垂直方向上的对齐方式
· align-content：定义了多跟轴线的对齐方式

#drumKit,#pianoKit{ /* background-color: red; */ /* 在需要垂直居中的父元素上，设置display:flex和align-items：center。要求：父元素必须显示设置height值 */ display: flex; flex:1; min-height: 90vh; /*vh 就是当前屏幕可见高度的100% align-items: center; /*子元素水平居中*/ justify-content: center; /*子元素垂直居中*/ }

90vh表示占窗口（当前页面窗口）大小的90%。
3 键盘被点击时，js会添加playing类，其css布局为

.playing{ transform: scale(1.1); border-color: #ffc600; box-shadow: 0 0 1rem #ffc600; }

4 drum kit 和piano kit被选中时，js会添加chosen类名。设置css代码让选中字体变为白色以区分

#switch .chosen{ color:white; }

三、 javascript代码
1 切换键盘(drum kit, piano kit)
对于drum kit：点击drum，添加.chosen，同时去掉piano kit 的.chosen类名；显示drum琴键，隐藏piano琴键；显示响应背景background-image。

// 点击a标签，切换键盘:点击piano键盘，添加chosen class，去掉drum的class; 显示对应的piano键盘; 在对应的键盘中添加chosen，这样audio也可以对应 function addChosen(){ const chosen =document.getElementsByClassName("piano"); const notChosen = document.getElementsByClassName("drum"); chosen[0].classList.add('chosen'); notChosen[0].classList.remove('chosen'); const notChosenKit = document.getElementById("drumKit"); notChosenKit.classList.remove('chosen'); notChosenKit.style.display = "none"; const chosenKit = document.getElementById("pianoKit"); chosenKit.style.display = "flex"; chosenKit.classList.add('chosen'); // 换钢琴壁纸 const wallpaper = document.getElementsByTagName("html"); wallpaper[0].style.backgroundImage="url(./pianoback.jpg)"; } function addChosenDrum(){ const chosen =document.getElementsByClassName("drum"); const notChosen = document.getElementsByClassName("piano"); chosen[0].classList.add('chosen'); notChosen[0].classList.remove('chosen'); const notChosenKit = document.getElementById("pianoKit"); notChosenKit.classList.remove('chosen'); notChosenKit.style.display = "none"; const chosenKit = document.getElementById("drumKit"); chosenKit.style.display = "flex"; chosenKit.classList.add('chosen'); // 换鼓壁纸 const wallpaper = document.getElementsByTagName("html"); wallpaper[0].style.backgroundImage="url(./drumback.jpg)"; }

2 键盘敲击琴键，用keycode标注，给对应琴键添加.playing类名。设置audio.play发出音效。

// 点击键盘字母时，对应的键添加class属性function playSound(e){const audio = document.querySelector(`.chosen audio[data-key="${e.keyCode}"]`); // console.log(audio); if (!audio) return; const key = document.querySelector(`.chosen div[data-key="${e.keyCode}"]`); key.classList.add('playing'); //添加playing类属性audio.currentTime = 0; //音频重头播放audio.play(); }

3 如果连续敲击多个琴键，多个琴键都会显示过渡特效（黄色Border,放大1.2倍），为了让最后一个琴键之前的琴键过滤样式去掉，可以利用transitionend事件，让已经过渡的琴键去掉.playing类名。

// 去掉playing 类属性function removeTransition(e){if (e.propertyName !='transform') return; this.classList.remove('playing'); }const keys = document.querySelectorAll('.key'); keys.forEach(key=>key.addEventListener('transitionend',removeTransition)); window.addEventListener('keydown',playSound);

4 鼠标点击也可以实现琴键发出音效。设置onclick事件，传入keycode参数。

function clickPlaySound(keycode){// data-key=keycode; const audio = document.querySelector(`.chosen audio[data-key="${keycode}"]`); if (!audio) return; const key = document.querySelector(`.chosen div[data-key="${keycode}"]`); key.classList.add('playing'); //添加playing类属性audio.currentTime = 0; //音频重头播放audio.play(); // console.log(audio); };

总结
【【JS30-Wes Bos】钢琴琴键 01】完整代码放在了Github上，如果读者有兴趣，不妨试一试。