【JS30-1】JavaScript Drum Kit

閱讀時間約 2 分鐘
raw-image


想要找個地方記錄自己寫 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 前、開始、結束後執行。



    1會員
    3內容數
    肚子餓了
    留言0
    查看全部
    發表第一個留言支持創作者!
    從 Google News 追蹤更多 vocus 的最新精選內容