Day 1 - Drum Kit (KeyEvent)


Posted by hoyi-23 on 2021-05-10

按下指定按鍵會出現指定聲響,於按下同時產生動畫效果。

What's new?

  1. HTMLTag - kbd 為行內元素,表示狀態 這是kbd
  2. 快速得知e.keycode的網站 --- http://keycode.info/
  3. HTMLTag audio的使用,屬性:
    src //設定檔案URL
    preload //當瀏覽者進入網頁時是否預先下載(default-auto:PC預先下載/行動裝置不會:metedata-只下載meta;none-不預先下載)
    autoplay
    mediagrounp
    loop
    muted
    controls //出現播放控制器
    
  4. 認識ES6 Template String: 輕鬆進行字串相加使用重音符號框起來,不需再特別使用加號/單引號/雙引號,直接用${變數}即可
  5. transitionend 事件
  6. FlexBox 內的 Flex由三個屬性組合而成,依照先後順序分別是「flex-grow」、「flex-shrink」和「flex-basis」
    如果 flex 只填了一個數值 ( 無單位 ),那麼預設就是以 flex-grow 的方式呈現,至於三個屬性的解釋如下:
    flex-grow:數字,無單位,當子元素的 flex-basis 長度「小」於它自己在父元素分配到的長度,按照數字做相對應的「伸展」比例分配,預設值為 0,不會進行彈性變化,不可為負值,設為 1 則會進行彈性變化。
    flex-shrink:數字,無單位,當子元素的 flex-basis 長度「大」於它自己在父元素分配到的長度,按照數字做相對應的「壓縮」比例分配,預設值為 1,設為 0 的話不會進行彈性變化,不可為負值。
    flex-basis:子元素的基本大小,作為父元素的大小比較基準,預設值為 0,也因為預設值為 0,所以沒有設定此屬性的時候,會以直接採用 flex-grow 屬性,flex-basis 也可以設為 auto,如果設為 auto,就表示子元素以自己的基本大小為單位。。
    三個屬性可以分開設定,也可以合在一起用一個 flex 統一設定
  7. vh/vw
  8. JS箭頭函式
  9. forEach

How to do?

quick note

  1. 這次的練習與 Key 有關,監聽元素並且使用keyup與keydown事件。
  2. 加入自訂的屬性(data-key)於指定按鍵和相對應的audio上。
  3. 於css增加class=playing - 點擊時的動畫效果。

事件:

監聽window,Keydown觸發PlaySound函式

window.addEventListener('keydown',PlaySound,false);
function PlaySound(e){
const audio=document.querySelector(`audio[data-key="${e.keycode}"]`);//使用ES6 template string
if(!audio)return; //如果沒有相對應audio,stop the function from running all together
audio.play();//若有相對應之audio,play it.
}

這時候會有一個問題:在一個音檔持續的秒數中,重複按同一按鍵時,聲音不會重複撥放,因此需要加入-點擊按鍵時,從新開始,也就是 currentTime = 0

audio.currentTime = 0 ; //點擊時從0開始撥放

接下來點擊時要將動畫加入

key.classList.add('playing')

PlaySound函式

function PlaySound(e){
const audio=document.querySelector(audio[data-key="${e.keycode}"]);//使用ES6 template string
const key=document.querySelector(.key[data-key="${e.keycode}"]);
if(!audio)return; //如果沒有相對應audio,stop the function from running all together
audio.currentTime = 0 ;//點擊時從0開始撥放
audio.play();//若有相對應之audio,play it.
key.classList.add('playing')
}

TransitionEvent - RemoveTransition

這時候又有個問題了!動畫執行後,沒有消失。因為執行的只有"加上效果"而已,這時候可以監聽transitionEvent - transitionend,類似clickEvent
這裡避免使用setTimeout,在css時已經設定transition秒數了,會重複設定。

const keys=document.querySelectorAll('.key');//選擇所有.key
keys.forEach(key=>key.addEventListener('transitionend';removeTransition));//當transition結束,removeTransition
function removeTransition(e){
if(e.propertyName !== 'transform') return;//如果不是transform就不要管它
this.classList.remove('playing');
}

VVV 我的所有筆記與demo在這裡 VVV
https://github.com/hoyi-23/JavaScript30










Related Posts

Fetch 與 Promise (二):錯誤處理

Fetch 與 Promise (二):錯誤處理

介紹 Git

介紹 Git

淺談 Webpack 與 Gulp

淺談 Webpack 與 Gulp


Comments