记录--不做码农而做 DJ 😎

这篇具有很好参考价值的文章主要介绍了记录--不做码农而做 DJ 😎。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--不做码农而做 DJ 😎

😎Coding 一定很累吧,快来跟我一起 Djing !!!😎

 

我的思路是通过监听键盘按下事件,在用户按下对应键时,找到相应的按键元素音频元素,通过添加和移除 CSS 类实现按键效果,并播放关联的音频文件。同时,通过事件监听器确保在按键元素的过渡动画结束时,移除添加的类,实现按键效果的平滑消失

记录--不做码农而做 DJ 😎

 

话不多说,上代码!😘


HTML 框架 ❤

我们在页面上添加一行按键(A-L),每个按键对应不同的乐器,再用audio元素存放音频存放地址,和对应按键的键盘码,以便于后续 JS 实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>做个快乐的DJ</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="keys">
        <div class="key" data-key="65">
            <div>A</div>
            <span class="sound">clap</span>
        </div>
        <div class="key" data-key="83">
            <div>S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key"  data-key="68">
            <div>D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key"  data-key="70">
            <div>F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key"  data-key="71">
            <div>G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key"  data-key="72">
            <div>H</div>
            <span class="sound">ride</span>
        </div>
        <div class="key"  data-key="74">
            <div>J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key"  data-key="75">
            <div>K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key" data-key="76">
            <div>L</div>
            <span class="sound">tink</span>
        </div>
    </div>
    <audio src="./sounds/clap.wav" data-key="65"></audio>
    <audio src="./sounds/hihat.wav" data-key="83"></audio>
    <audio src="./sounds/kick.wav" data-key="68"></audio>
    <audio src="./sounds/openhat.wav" data-key="70"></audio>
    <audio src="./sounds/boom.wav" data-key="71"></audio>
    <audio src="./sounds/ride.wav" data-key="72"></audio>
    <audio src="./sounds/snare.wav" data-key="74"></audio>
    <audio src="./sounds/tom.wav" data-key="75"></audio>
    <audio src="./sounds/tink.wav" data-key="76"></audio>
<script src="./index.js"></script>
</body>
</html>

简单介绍一下:

  • <div class="keys"> : 包含所有敲击乐按键的容器。
  • <div class="key" data-key="xx"> : 单个按键元素,包括按键显示的字母和音频描述,data-key属性存放按键的键盘码。
  • <audio> : 包含音频文件路径和与之关联的按键。

CSS 样式 🧡

CSS 样式包含两个部分,重置样式业务样式

/* CSS Reset 重置样式*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*业务样式*/
html{
    height: 100vh;
    font-size: 10px;
    background: url('./background.png') bottom center;/*载入图片*/
    background-size: cover; /*让图片覆盖窗口*/
}
body, html{
    font-family: sans-serif;
}
.keys{
    display: flex; 
    align-items: center;
    justify-content: center;/*元素居中*/
    min-height: 100vh;
}
.key{
    border: 0.4rem solid rgb(1, 60, 106);
    border-radius: 0.5rem;
    margin: 1rem;
    font-size: 1.5rem;
    padding: 1rem 0.5rem;
    transition:all 0.7s ease;
    width:10rem;
    text-align: center;
    color: rgb(6, 55, 94);
    box-shadow: 0 0 2rem rgb(0, 75, 121)

}
.playing{ /*触发按键效果*/
    transform: scale(1.1);
    border-color: rgb(248, 117, 117);
    box-shadow: 0 0 2rem rgb(255, 84, 84)
}
.key div{
    font-size: 4rem;
}
.sound{
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: normal;
    color: rgb(0, 145, 143);
}

简单介绍一下:

  1. 重置样式:

    • 设置了各种 HTML 元素的默认样式,例如清除列表项、删除引用等,以确保在不同浏览器中获得一致的基本外观。就不过多赘述了。
  2. 业务样式:

    • rem 是相对于根元素(html 元素)字体大小的单位。这里我们设置默认的根元素字体大小为 10 px,那么.key类的字体大小 1.5 rem 即为15 px。
    • .key 类定义了按键的基本样式,包括边框、圆角、阴影、字体大小等。其中transition:all 0.7s ease;这行代码表示所有样式属性在变化时都会以持续 0.7 秒的时间,并采用渐变的速度曲线,从而产生平滑的过渡效果。
    • .playing 类定义了按键在播放音频时的样式,增加了缩放和边框颜色的变化,以及阴影效果。其中transform: scale(1.1);表示将元素沿着 X 和 Y 方向同时放大到原始大小的 1.1 倍,使交互更加生动有趣。通过 JS 对这个类的添加和移除,实现按键打击效果,直接化身 DJ 。

JS 实现 💛

// 播放音频和添加按键效果的函数
function playSound(e) {
    const keyCode = e.keyCode;
    const key = document.querySelector(`.key[data-key="${keyCode}"]`);//匹配按键
    
    // 如果按键存在,添加 playing 类
    key && key.classList.add('playing');
    const audio = document.querySelector(`audio[data-key="${keyCode}"]`);//匹配音频
    
    // 如果音频存在,重置播放时间并播放音频
    audio && (audio.currentTime = 0, audio.play());
}
// 获取所有带有 .key 类的元素
const keys = Array.from(document.querySelectorAll('.key'))
// 对每个按键添加 transitionend 事件监听器
keys.forEach(key => {
    key.addEventListener('transitionend', function(e) {
        // 如果触发的事件不是 transform,则返回
        if (e.propertyName !== 'transform') return;
        // 移除 playing 类
        this.classList.remove('playing');
    })
})
// 添加全局键盘按下事件监听器,触发 playSound 函数
window.addEventListener('keydown', playSound)

我们挑出几个重点讲讲:

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

  1. 反引号(` `) 是 ES6 引入的模板字面量。它允许你在字符串中嵌入变量。${keyCode} 就是其中的变量插值,这里用来替换为实际的按键码值。
  2. .key[data-key="${keyCode}"] 表示一个 CSS 选择器字符串。它表示选择具有 key 类且具有 data-key 属性值等于 keyCode 的元素。
  3. document.querySelector() 是一个 DOM 操作方法,用于在文档中选择第一个匹配指定选择器的元素。在这里,它选择了具有指定 data-key 属性值的按键元素。

keys.forEach(key => {...}):

  1. key.addEventListener('transitionend', function(e) {...}) :对每个按键元素添加一个事件监听器,监听过渡动画结束事件
  2. if (e.propertyName !== 'transform') return; : 判断事件的 propertyName 属性是否为 'transform',如果是,执行后续的操作,如果不是,则直接返回。
  3. this.classList.remove('playing'); : 如果过渡动画是针对 transform 属性的,那么用 classList.remove 方法从当前元素的类列表中移除名为 'playing' 的类,以使按键效果消失。

综合起来,这段代码确保在每个按键元素上的过渡动画结束时,只处理与 transform 属性相关的事件,以移除添加的 'playing' 类,从而产生按键效果的消失过渡。

最后 🦄

Coding 很有趣,闲暇之余,试试 DJing 吧!

已将代码、图片及乐器 wav 文件放到 Gitee,感兴趣的同学可以自取,Coding不易,切勿白嫖!记得点亮 star !!!

本文转载于:

https://juejin.cn/post/7304615395741466676

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--不做码农而做 DJ 😎文章来源地址https://www.toymoban.com/news/detail-784073.html

到了这里,关于记录--不做码农而做 DJ 😎的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • DJ4-1 网络层概述

    目录 一、网络层提供的功能 二、路由和转发 三、数据平面和控制平面 四、网络层的服务模型 网络层实现主机与主机之间的通信 从发送方主机传输报文段到接收方主机: 发送方主机封装报文段 (segments) 为数据报 (datagrams) 接收方主机递交报文段给传输层 在每个主机和路由器

    2024年02月16日
    浏览(41)
  • DJ4-7 SDN、OpenFlow

    目录 一、SDN 1、SDN 的引入 2、SDN 体系结构的特征 3、SDN 控制器 4、SDN 通用转发 二、OpenFlow 1、SDN 的引入 软件定义网络 (Software Defined Network) SDN 源自美国斯坦福大学 Clean Slate 研究组提出的一种新型网络创新架构,可通过软件编程的形式定义和控制网络,具有控制平面和转发平

    2024年02月10日
    浏览(35)
  • DJ3-7 TCP:拥塞控制

    目录 一、拥塞控制概述 二、TCP 拥塞控制算法 1. 慢启动 2. 拥塞避免 3. 快速恢复 4. 状态转换图 5. 拥塞窗口的变化举例 1. 如何限制发送方发送速率 TCP 拥塞控制设置 拥塞窗口 变量,表示为 cwnd: 它对发送方向网络中发送流量的速率进行了限制 发送方中未被确认的数据量不会

    2024年02月10日
    浏览(34)
  • DJ5-2 差错检测和纠错

    目录 一、差错检测和纠错技术 1、发送节点 2、接收节点 3、说明 二、差错检测技术 1、一比特奇偶校验 2、二维奇偶校验 3、Internet 校验和方法(复习) 4、循环冗余检测 CRC 5、差错检测方法比较 链路层提供比特级差错检测和纠正这两种服务。EDC 是差错检测和纠正比特。 ①

    2024年02月04日
    浏览(30)
  • DJ4-5 基本分段存储管理方式

    目录 4.5.1  分段式存储管理方式的引入 4.5.2  分段式存储管理的基本原理 一、分段 二、段表 三、地址变换机构 4.5.3  段的共享和保护 一、分页共享 二、分段共享 4.5.4  段页式存储管理 一、段页式存储管理的引入 二、段页式存储管理 三、地址变换机构 四、评价 在程序员眼

    2024年02月07日
    浏览(37)
  • DJ8-2 主存储器的组织

    目录 一、主存容量的扩展 1. 位扩展 2. 字扩展(编址空间扩展) 3. 字和位同时扩展 - 第一题 - 第二题 - 第三题 - 第四题 二、数据校验 —— 奇偶校验 1. 奇校验 2. 偶校验 如何使用存储芯片组成一个存储器? 确定设计容量:多大设计容量 芯片的选用:多大容量,位数,多少片

    2024年02月12日
    浏览(46)
  • DJ2-5 内容分发网络 CDN

    目录 单一的大规模数据中心 内容分发网络 CDN 单一的大规模数据中心 存在三个问题: ① 如果客户远离数据中心,服务器到客户的分组将跨越许多通信链路并很可能通过许多 ISP,给用户带来恼人的时延。 ② 流行的视频很可能经过相同的通信链路发送许多次。这不仅浪费了网

    2024年02月09日
    浏览(50)
  • DJ4-3 路由器的工作原理

    目录 一、路由器的整体结构 二、输入端口的功能 1. 三大模块 2. 查找与转发模块 三、交换结构 1. 经内存的交换结构 2. 经总线的交换结构 3. 经交换矩阵交换结构 四、输出端口的功能 五、排队 1. 输入端口排队 2. 输出端口排队 路由器的两个核心功能: 运行路由协议或称路由

    2023年04月23日
    浏览(39)
  • DJ4-7 请求分页存储管理方式

    目录 4.7.1  请求分页中的硬件支持 1、页表机制 2、缺页中断机构 4.7.2  内存分配策略和分配算法 1、最小物理块数的确定 2、物理块的分配策略 3、物理块的分配算法 4.7.3  调页策略 1、系统应当在何时把一个页面装入内存? 2、从何处调入页面? 3、页面调入过程? 4.7.4  页面

    2024年02月07日
    浏览(39)
  • DJ4-5 路由算法:LS 和 DV

    目录 一、迪杰斯特拉算法 1. 术语定义 2. 算法描述 3. 举例说明 4. 构建从源节点到目的节点的路径 5. 构建最低费用路径树 6. 构建转发表 二、距离向量路由算法 1. 术语定义 2. 举例说明 3. 距离向量表 4. 更新距离向量表 5. 举例说明 三、距离向量路由算法 PLUS 1. 链路费用改变与

    2024年02月01日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包