JS30-Day1-JavaScript Drum Kit

此小作品是当使用者按下键盘按钮后，就会发出一个声音，同时按钮也会有简单的特效。
Demo

以下内容是实作中的重点整理:

1. 为了让整个网页监听键盘按下的事件，使用了 window 绑定 keydown 事件

window.addEventListener('keydown', function(){});

补充: keydown vs. keypress 的差异

keydown: 按任何按键都能触发keypress: 只有按下能输出值的按键才触发，若是按下无法输出任何字元的按键例如方向键，就无法出发事件两者共同点是一直按着按键(keypress 按着能输出值的按键)就会不断触发该事件

2. audio 标籤的属性和方法

此小作品使用的是:

currentTime: 设定音讯档的目前拨放到哪个时间play(): 拨放音讯档

补充: 其他常用的属性及方法

属性:

autoplay: 音讯档加载完后自动拨放controls: 显示控制键(拨放，暂停钮)loop: 是否循环拨放volume: 控制音量

方法:

load(): 重新加载音讯档，用于更改 src 之后使用pause(): 暂停音讯档

3. 取得所有的按键并绑定 transitionend 事件

transitionend 事件会在 CSS 的 transition 结束后触发

const keys = document.querySelectorAll('.key');keys.forEach(key => key.addEventListener('transitionend', function(){}));

补充: transition 可拆解为好几个子属性

transition-property: 指定会被过渡的 CSS 属性，常见如width，height，opacity，background-position，word-spacing，vertical-align，z-indextransition-duration: 设定过渡的时间transition-timing-function: 设定过渡期间 CSS 属性变化的快慢，常见如linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)transition-delay: 设定延迟过渡的时间

透过 propertyName 属性，可以取得 transition-property

4. Array.from

虽然 forEach 在现代的浏览器可以搭配 NodeList 使用，但在旧的浏览器可能失效，详见以下连结:
https://developer.mozilla.org/zh-TW/docs/Web/API/NodeList

然后此作品中的 document.querySelectorAll() 取得的是一个 nodeList，所以作者透过 ES6 的语法 Array.from 产生一个新的阵列，并用此阵列做 forEach。

---

全部练习的程式码都在此连结:
https://github.com/a90100/JavaScript30