【JS30-1】JavaScript Drum Kit

想要找個地方記錄自己寫 JavaScript 30 挑戰時額外的小筆記
寫得很隨興，如果路過不小心看到請當作什麼都沒看到🙈
JavaScript30 傳送門：https://javascript30.com/
第一個挑戰是寫一個 keydown 事件並讓頁面隨著不同的按鍵發出不同的聲音。

Play()

在挑戰中寫到了以下這段程式碼：

​<script>
	window.addEventListener('keydown', (e)=>{
		const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
		audio.play()
	})
</script>

突然很好奇，play() 是誰提供的 API？為什麼寫了 play()，就能播放音擋了？

查了 MDN，在 Web APIs > HTMLMediaElement 找到了：

The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.
（HTMLMediaElement 介面為 HTMLElement 新增了支援音訊和視訊常見的基本媒體相關功能所需的屬性和方法。）

transitionend 事件

在挑戰中，需要在為 div 加上 className 後再移除，因此寫到了：

addEventListener("transitionend", removeTransition);

才知道原來有 CSS 過渡相關的 event，包含但不限：

1. transitionrun
2. transitionstart
3. transitionend

這三個 event，分別會在 CSS transition 前、開始、結束後執行。