day01

 使用者操作需求：
當按下按鍵 A,S,D,F,G,H,K,L 按鍵時，播放對應的不同音效，頁面上對應的區塊會增添短暫樣式

技術重點：

鍵盤事件 keydown
取得鍵盤資訊 e.keyCode
增添樣式 ClassList.add(”)
取消樣式 使用 addEventListener 監聽每個 .key
流程步驟：

預先定義好屬性 data-key的值
在 window上添加鍵盤 keydown事件，取得按鍵 keyCode
使用 querySelector選取對應的 audio data-key屬性的值並且添加 play()
用同樣的方式 querySelector取得對應的 div data-key 並且添加 .playing樣式
為所有 .key添加監聽 transitionened事件，抓出改變的樣式區塊將其去除該樣式
小技巧紀錄：

播放連續快速的音效：
在添加play()播放音效時，需要等到音效結束，才能播放下一個音效，無法快速連續播放
可以在前面添加currentTime = 0 設置音效當前位置
陣列增加監聽：
如果使用jQuery keys.addEventListener 是無法達成每個key都添加的 需使用
keys.forEach( key => key.addEventListener(‘transitionend’, removeTransition));
取消樣式：
使用 transitionend事件，他在 css transition結束後會被觸發
在這個頁面中發生 transition樣式屬性不只一個(box-shadow, transform, border-color)會出發3次，
所以增加判斷 if(e.propertyName !== ‘transform’) return;使每次按鍵事件觸發後只去除一次樣式
propertyName屬性：返回使用過度效果的css屬性名稱
// HTML部分

<div class=”keys”>
<div data-key=”65″ class=”key”>
<kbd>A<d>
<span class=”sound”>clap</span>
</div>
<div data-key=”83″ class=”key”>
<kbd>S<d>
<span class=”sound”>hihat</span>
</div>
<div data-key=”68″ class=”key”>
<kbd>D<d>
<span class=”sound”>kick</span>
</div>
<div data-key=”70″ class=”key”>
<kbd>F<d>
<span class=”sound”>openhat</span>
</div>
<div data-key=”71″ class=”key”>
<kbd>G<d>
<span class=”sound”>boom</span>
</div>
<div data-key=”72″ class=”key”>
<kbd>H<d>
<span class=”sound”>ride</span>
</div>
<div data-key=”74″ class=”key”>
<kbd>J<d>
<span class=”sound”>snare</span>
</div>
<div data-key=”75″ class=”key”>
<kbd>K<d>
<span class=”sound”>tom</span>
</div>
<div data-key=”76″ class=”key”>
<kbd>L<d>
<span class=”sound”>tink</span>
</div>
</div>

<audio data-key=”65″ src=”sounds/clap.wav”></audio>
<audio data-key=”83″ src=”sounds/hihat.wav”></audio>
<audio data-key=”68″ src=”sounds/kick.wav”></audio>
<audio data-key=”70″ src=”sounds/openhat.wav”></audio>
<audio data-key=”71″ src=”sounds/boom.wav”></audio>
<audio data-key=”72″ src=”sounds/ride.wav”></audio>
<audio data-key=”74″ src=”sounds/snare.wav”></audio>
<audio data-key=”75″ src=”sounds/tom.wav”></audio>
<audio data-key=”76″ src=”sounds/tink.wav”></audio>
// JS部分

<script>
// window上添加鍵盤 keydown事件
window.addEventListener(‘keydown’, function(e){

// 取得e.keyCode 找出相同對應的 audio data-key
const audio = document.querySelector(`audio[data-key=”${e.keyCode}”]`);
if(!audio) return; // 如果沒有的話就取消function

// 播放音效
audio.currentTime = 0;
audio.play();

// 選到 div 物件加上樣式
const key = document.querySelector(`.key[data-key=”${e.keyCode}”]`);
key.classList.add(‘playing’);
// 如果用 key.classList.remove(‘playing’); 會直接remove掉

});

// 監聽所有的key 找出有加上class 的 並執行removeTransition()取消他的class
function removeTransition(e) {
if (e.propertyName !== ‘transform’) return;
e.target.classList.remove(‘playing’);
}

const keys = document.querySelectorAll(‘.key’);
keys.forEach( key => key.addEventListener(‘transitionend’, removeTransition));

</script>