JS30-D01 JavaScript Drum Kit

Posted on | In | |

01 - JavaScript Drum Kit

本文的代碼是看了Alex大大的JS30系列並搭配一些自身想法完成有興趣可以去yt搜尋Alex宅幹嘛

最終程式碼

附註: 因為codepen沒有放入聲音資源所以點擊會沒有聲音

思考流程

核心目標:

點擊會有鼓聲，放開即停

解決: 

1
2
從滑鼠事件，配合DOM元素上設置的data-key獲取點擊的DOM以及audioDOM
並利用audioDOM撥放聲音

其餘考量的因素:

  1. 點了之後按鈕會亮，放開會按掉

    解決: 

    1
    利用點擊獲得的DOM操作classList添加class並透過mouseup事件調用的function移除class

  2. 按住會一直響

    1
    在撥聲音前先將要撥的audio.currentTime 設成 0

  3. 按其他按鍵不會報錯

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    在使用DOM方法時先確定該DOM是否存在: 
    function playHandler(e) {
    	... 
        if (clickedDOM) {
            clickedDOM.classList.add('playing')
        }
    	...
        if ( audioClicked ) {
            audioClicked.currentTime = 0
            audioClicked.play()
        }
    }
    function finishHandler(e) {
        ... 
        if( finishedDOM ) {
            finishedDOM.classList.remove('playing')
        }
    }

我複習了甚麼

1. 立即執行函數

用途: 避免寫的代碼汙染全部

1
2
3
4
5
(function () {
    // document.addEventListener('keyup', keyup)
    document.addEventListener('keydown', playHandler)
	...
  })()

2. addEventListener

1
2
3
4
5
6
7
8
9
// addEventListener(事件， 發生時執行的函數)
document.addEventListener('keydown', playHandler)
document.addEventListener('keyup', finishHandler)

// 題外話
// 因為playHandler沒有傳入東西，所以傳入的會是事件
function finishHandler(e) {
   // e 打印是事件
}

3. 屬性選擇器

一個小坑: 非==是= 

1
let clickedDOM = document.querySelector(`div[data-key = "${e.keyCode}"]`)

4. classList

用法 

1
em.classList

他的一些實用API

  1. 移除 class

    1
    div.classList.remove("foo");

  2. 增加class 

    1
    2
    3
    div.classList.add("anotherclass");
    // 也可以一群
    div.classList.add("foo","bar");

  3. 沒有就添加有就移除

    1
    2
    3
    4
    div.classList.toggle("visible");

    i要小於10才生效
    div.classList.toggle("visible", i < 10 );

  4. 元素是否有該class

    1
    div.classList.contains("foo") // true or false

5. audio play( )以及currentTime

撥放聲音，設定撥放時間