共计 7098 个字符，预计需要花费 18 分钟才能阅读完成。
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 乐器切换组块：
<div id="switch">
<a class="drum chosen" href="#" onclick="addChosenDrum()">Drum Kit</a>
<a class="piano" href="#" onclick="addChosen()">Piano Kit</a>
</div>2 Drum Kit:
<div id="pianoKit">
<div data-key="65" class="key1 key" >
<a href="#" onclick="clickPlaySound(65)">
<p class="key-ABC">A</p>
<p class="key-tune">DO</p>
</a>
</div>
<div data-key="83" class="key2 key">
<a href="#" onclick="clickPlaySound(83)">
<p class="key-ABC">S</p>
<p class="key-tune">RE</p>
</a>
</div>
<div data-key="68" class="key3 key">
<a href="#" onclick="clickPlaySound(68)">
<p class="key-ABC">D</p>
<p class="key-tune">MI</p>
</a>
</div>
<div data-key="70" class="key4 key">
<a href="#" onclick="clickPlaySound(70)">
<p class="key-ABC">F</p>
<p class="key-tune">FA</p>
</a>
</div>
<div data-key="71" class="key5 key">
<a href="#" onclick="clickPlaySound(71)">
<p class="key-ABC">G</p>
<p class="key-tune">SOL</p>
</a>
</div>
<div data-key="72" class="key6 key">
<a href="#" onclick="clickPlaySound(72)">
<p class="key-ABC">H</p>
<p class="key-tune">LA</p>
</a>
</div>
<div data-key="74" class="key7 key">
<a href="#" onclick="clickPlaySound(74)">
<p class="key-ABC">J</p>
<p class="key-tune">SI</p>
</a>
</div>
<audio data-key="65" src="sounds/1.MP3"></audio>
<audio data-key="83" src="sounds/2.MP3"></audio>
<audio data-key="68" src="sounds/3.MP3"></audio>
<audio data-key="70" src="sounds/4.MP3"></audio>
<audio data-key="71" src="sounds/5.MP3"></audio>
<audio data-key="72" src="sounds/6.MP3"></audio>
<audio data-key="74" src="sounds/7.MP3"></audio>
</div>
3 Piano Kit
<div id="drumKit" class="chosen">
<div data-key="65" class="key1 key">
<a href="#1" onclick="clickPlaySound(65)">
<p class="key-ABC">A</p>
<p class="key-tune">CLAP</p>
</a>
</div>
<div data-key="83" class="key2 key">
<a href="#1" onclick="clickPlaySound(83)">
<p class="key-ABC">S</p>
<p class="key-tune">HIHAT</p>
</a>
</div>
<div data-key="68" class="key3 key">
<a href="#1" onclick="clickPlaySound(68)">
<p class="key-ABC">D</p>
<p class="key-tune">KICK</p>
</a>
</div>
<div data-key="70" class="key4 key">
<a href="#1" onclick="clickPlaySound(70)">
<p class="key-ABC">F</p>
<p class="key-tune">OPENHAP</p>
</a>
</div>
<div data-key="71" class="key5 key">
<a href="#1" onclick="clickPlaySound(71)">
<p class="key-ABC">G</p>
<p class="key-tune">BOOM</p>
</a>
</div>
<div data-key="72" class="key6 key">
<a href="#1" onclick="clickPlaySound(72)">
<p class="key-ABC">H</p>
<p class="key-tune">RIDE</p>
</a>
</div>
<div data-key="74" class="key7 key">
<a href="#1" onclick="clickPlaySound(74)">
<p class="key-ABC">J</p>
<p class="key-tune">SNARE</p>
</a>
</div>
<div data-key="75" class="key7 key">
<a href="#1" onclick="clickPlaySound(75)">
<p class="key-ABC">K</p>
<p class="key-tune">TOM</p>
</a>
</div>
<div data-key="76" class="key7 key">
<a href="#1" onclick="clickPlaySound(76)">
<p class="key-ABC">L</p>
<p class="key-tune">TINK</p>
</a>
</div>
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
</div>二、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); };总结
残缺代码放在了 Github 上，如果读者有趣味，无妨试一试。