music player key이벤트 추가

참고 링크
https://velog.io/@dldlswognqh/music-player-구현

버튼이나 몇초씩 왔다갔다 하는 것을 항상 눌러주기는 너무 귀찮아서 key이벤트가 있으면 좋다고 생각했다.

그래서 구현을 해보았다.

function useKey(e) {
    if (music) {
        const key = e.key;
        // 실행 정지 스페이스바로
        if (key === " " && isPlaying === true) {
            e.preventDefault();
            pauseSong()
        } else if (key === " " && isPlaying === false) {
            e.preventDefault();
            playSong()
        }

        // 다음, 이전 ..
        if (key === "ArrowLeft") {
            e.preventDefault();
            music.currentTime = music.currentTime - 10;
        } else if (key === "ArrowRight") {
            e.preventDefault();
            music.currentTime = music.currentTime + 10;
        }
    }
}

window.addEventListener('keydown', useKey);

keydown 이벤트를 사용하였고

스페이스바를 누르면 정지 혹은 재생이 되도록.

좌우 방향키를 누르면 10초씩 이동할 수 있도록 설정하였다.

처음에 e.key가 아니라 e.keycode, e.which를 사용하려고 하는데 mozilla를 보니 더 이상 권장하지 않는다고해서 어떤 걸 사용해야하나 싶어서 찾아보니 e.key로 더 간단하게 사용할 수 있는 것을 알았다.