前言

如何通过audio,key标签和flex,play,sound等类和transitionend事件监听器来实现通过敲击键盘发出对应音符的效果？今天我们将花五分钟实操实现如下demo。

屏幕截图 2024-06-17 132802.png

正文

一，HTML

首先，我们需要规划这个页面的布局。为了构建这个页面，我们需要考虑两个主要元素：音乐和键盘布局。

我们将开始创建键盘布局，页面的音符被分为三行，与实际的键盘相对应。我们可以使用key1、key2、key3这三个类名来标识这三行。在每一行中，我们将放置相应的字母和打击乐名称。

//示例
  <div class="keys">

        <div class="keys1">
            <div class="key" data-key="81">
                <div>Q</div>
                <span class="sound">clap</span>
            </div>

        </div>

接下来，我们需要将每个字母对应的音频文件准备好，并将它们与相应的键进行关联。我们将使用<audio>标签来引用这些音频文件，并通过data-key属性将它们与特定的键进行关联。data-key的·其他用法我们后面会不断进行学习

//示例
<audio src="./sounds/clap.wav" data-key="81"></audio>

我们总共有26个这样的字符和对应的音频文件。每个字符都代表一个键，当按下该键时，将播放相应的音频。这样，我们就能够清晰地描述页面的布局和音频的关联方式

二，CSS

接下来我们需要美化加工我们的页面

使用通配符选择器消除不同浏览器之间的默认样式差异，使得开发者可以更容易地控制页面元素的布局和样式。
我们为页面设置背景图片，确保图片覆盖住整个屏幕
我们可以设置页面中的字体大小，页面容器中的字体可以以此为基准
设置了HTML文档中的body元素和html元素的字体族（font family）为无衬线字体（sans-serif）

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background: url("./background.jpg") bottom center no-repeat;
  background-size: cover;
}
body,
html {
  font-family: sans-serif;
}

设置整个盒子的大小为视口宽度的百分之百
将盒子设置为浮动，并设置在页面正中间
将keys设置为浮动，进行居中和你想要的美化效果

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.keys {
  /* 水平垂直居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 100vh;
}

给.key1、.key2和key3类选择器也设置为Flex 布局，使按键元素保持水平方向排列
为每一个key设置你想要的美化效果，根据em设置相对字体大小
利用key:hover实现：当鼠标悬空在字符上时边框泛白光
使用.playing活化为我们的按键,为他设置动画形式

transform: scale(1.1);：这将元素的大小放大到原始大小的1.1倍，使得它看起来比周围的按键更大或更突出。
border-color: #9fd2ff;：这改变了边框的颜色，通常是为了使其与默认的边框颜色区分开来，以表示它当前是活动的。
box-shadow: 0 0 1rem #2670f8;：这添加了一个盒阴影，使元素在视觉上更加突出，并增加了一种三维效果。

设置.sound类

.keys1,
.keys2,
.keys3 {
  display: flex;
}

.key {
  border: .4rem solid pink;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 8rem;
  text-align: center;
  color: white;
  text-shadow: 0 0 .5rem rgb(242, 30, 62);
}

.key:hover {
  border-color: white;
}

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

.key div {
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: normal;
  color: #ffffff;
}

三，JS

接下来我们需要利用js让我们页面上的按键连接键盘，当我们点击时发出声响。

还记得html部分的data-key的值吗？他对应的其实是ASCII码什么是ASCII码？

是计算机中最常用的字符编码方式之一。它用7位（或一个字节，但最高位为0）来表示一个字符，提供了128个不同的字符标准。这些字符包括大小写字母、数字、标点符号、控制字符等。我们可以利用键盘字母ASCII码的唯一性来将键盘与页面对应的字母连接起来

当我们敲击键盘时，键盘会发送字母对应的ASCII码给计算器

我们需要做以下几步

1.定义 playSound 函数

这个函数在键盘按键被按下时触发（通过 keydown 事件）
它接受一个事件对象 e 作为参数

获取按键的 keyCode
- 从事件对象 e 中获取 keyCode。这代表了被按下的键的编码
查询对应的按键元素
- 使用 document.querySelector 和模板字符串来查询具有 data-key 属性值与 keyCode 相匹配的 .key 元素。
- 如果找到这样的元素，则给它添加 playing 类。
为所有按键元素添加 transitionend 事件监听器
- 使用 document.querySelectorAll 选择所有 .key 元素。
- 对每个 .key 元素，添加一个 transitionend 事件监听器。当 CSS 过渡结束时，这个事件会被触发。
- 在事件处理函数中，检查触发过渡的属性是否是 transform。如果不是，则直接返回并不做任何操作。
- 如果是 transform，则从该元素上移除 playing 类。这通常用于在按键的动画或过渡结束后恢复其原始样式。
查询对应的音频元素：
- 使用 document.querySelector 和模板字符串来查询具有 data-key 属性值与 keyCode 相匹配的 audio 元素。
重置并播放音频：
- 将音频的 currentTime 设置为 0，以确保从音频的开头开始播放。
- 调用 play() 方法来播放音频。
添加事件监听器：
- 在 window 对象上添加 keydown 事件监听器，并将 playSound 函数作为处理函数。这样，每当用户按下键盘上的键时，都会触发 playSound 函数。

function playSound(e) {
  const keyCode = e.keyCode;
  const key = document.querySelector(`
    .key[data-key="${keyCode}"]
  `)
  key && key.classList.add('playing');

  const keys = document.querySelectorAll('.key');
  
  keys.forEach((key) => {
    key.addEventListener('transitionend', function (e) {
      if (e.propertyName != 'transform') return;
      this.classList.remove('playing');
    })
  })

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

  audio.currentTime = 0;
  audio.play();

}
window.addEventListener('keydown', playSound)

若楠，我谱了一曲交响乐送给你

前言

正文

一，HTML

二，CSS

三，JS