JavaScript通过键盘按键实现系统声音——keycode【网页】

1、 网页显示部分

1.1 关于html

1.1.1 设置背景图片以及ASDFGHJKL的按键框

1. 背景用css的url实现即可
2. 由于要做的是按键框，为了JavaScript好写，所以我们给每个属性值做一个keycode的属性，一个按键对应一个keycode

下面代码略写

<div class="keys">
	<div data-key="65" class="key">
		<kbd>A</kbd>
		<span class="sound">clap</span>
	</div>
	<div data-key="83" class="key">
		<kbd>S</kbd>
		<span class="sound">hihat</span>
	</div>
</div>

这里HTML的kdb标签定义键盘文本。它表示文本是从键盘上键入的。

1.1.2 要插入声音，所以需要audio属性

1.2 关于css

1.2.1 首先实现背景

html{
	background:url('bg.jpg') bottom center;
	background-size:cover;	
}
html,body{
	margin:0;
	padding:0;
	font-size:12px;
	font-family: sans-serif;
}

1.2.2 实现9个按键的总体布局

这里我们用class="keys"把9个按键全部封装住，方便布局

1. 使用flex进行布局

.keys{
	display:flex;
	flex:1;
	justify-content:center;
	align-items:center;
	min-height:100vh;
}

知识点

关于flex布局，常常会跟着使用justify-content和align-items（通俗理解为左右对齐方式，和上下对齐方式）

1. justify-content属性有flex-start、flex-end、center、space-between、space-around。

2. align-items属性有flex-start、flex-end、center、baseline(以文本对齐)、stretch(默认值，占满整个页面高度)

3. min-height:无论浏览器大小怎么变，它都是固定值

4. vh表示当前屏幕可见高度的1%，也就是说

  height:100vh == height:100%;

  但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，

  但是设置height:100vh，该元素会被撑开屏幕高度一致。(就是图片大小会随着网页大小而自动调整大小)

1.2.3 实现每个按键的css样式

1. 设置样式一般都有宽（一般不设置高，都设置min-height）、布局位置、边框颜色背景、字体大小样式位置、阴影

.key{
	width:10rem;
	margin:1rem;
	padding:1rem .5rem;
	border:.4rem solid black;
	border-radius:.5rem;
	
	font-size:1.5rem;
	text-align:center;
	color:white;
	background:rgba(0,0,0,0.4);
	text-shadow:0 0 .5rem black;
	
	//这里设置一个动画样式，链接js之后更加美观
	transition:all .07s ease;
}

1.2.4 按键之后需要一个特效，所以先提前写了.playing的css

.playing {
/* 等同于变换: scaleX(1.1) scaleY(1.1);*/
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #ffc600;
}

知识点
CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

对9个按键的文本进行设置

kbd {
    display: block;
    font-size: 4rem;
}

.sound {
    font-size: 1.2rem;
    color: #ffc600;
    /*转换大小写，uppercase转为大写 lowercase转换为小写*/
    text-transform: uppercase;
    /*letter-spacing 属性用于设置文本字符的间距表现。*/
    letter-spacing: .1rem;

}

2、JavaScript功能部分

由于要通过键盘的按键来触发事件，所以我们需要做键盘的监听事件

2.1 键盘监听事件

window.addEventListener('keydown',playsound);

2.2 键盘监听的函数功能

2.2.1 首先首先兼容问题

function playSound(e){
//处理一下兼容问题
var e = e || window.event;
console.log(e);
}

![image.png](https://boostnote.io/api/teams/7wfjpla1r/files/0445761805c504d17750b06a239f348103b0a26fe74e9c257c11c7d64b3e4853-image.png)

2.2.2 实现音乐播放和样式修改的功能

1. 首先我们要先获取到对象,且获取的是按下键盘的keycode然后赋值给它

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const div = document.querySelector(`div[data-key="${e.keyCode}"`);

console.log(audio,div);

2. 其次我们要通过对象实现声音的播放，样式的更改

audio.play();
div.classList.add('playing');

classList 是一种方便的访问元素的类列表的方法。
他有几种方法：toggle（如果 visible 类值已存在，则移除它，否则添加它，这里不用toggle否则会造成死循环）、add、remove、replace

2.2.3 问题

（1）按键外的按钮报错

1. 使用判断语句

if(audio) audio.play();
if(div) div.classList.add('playing');

（2）声音不能连续播放

if(audio) {
	//这个设置让他连续点击时会发出声音，而不用等到结束
	audio.currentTime = 0;//currentTime 属性设置或返回视频播放的当前位置（以秒计）。
	audio.play();

}

（3）样式不能消失

document.querySelectorAll('.key').forEach((key)=>{
	//做个动画结束的事件监听，然后执行函数
	key.addEventListener('transitionend', removeTransition);
})

function removeTransition(e) {
	//console.log(e);
	//使用propertyName是因为，在css中使用了transform的动画效果，当触发的时候会有多个值改变（比如颜色，背景，阴影这些），然后他们的属性都有一个共同名称为propertyName
	if (e.propertyName === 'transform') {
		e.target.classList.remove('playing');
	}
}