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上，如果读者有趣味，无妨试一试。