function removeTransition(e) {

// 动画结束会重绘一下,这个是找到执行了transform的元素.

if (e.propertyName !== 'transform') return;

e.target.classList.remove('playing');

}

function playSound(e) {

// element = baseElement.querySelector(selectors),selectors 是一个CSS选择器字符串,我原来只使用id和class选择器，此处使用了css属性选择器,省事

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

//这里应该是等待音频文件加载

if (!audio) return;

// 原生用得少,给css加class我以前只知道直接key.className = XXX这种方式

// Element.classList 是一个只读属性，可以使用add()和remove()方法修改它

// 其还有item, toggle, contains, replace这几个方法.具体可以到https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList上面查看

key.classList.add('playing');

// currentTime,设置audio的初始时间为0秒

audio.currentTime = 0;

audio.play();

}

//获取所有代表着键位的dom

// Array.from(arrayLike, mapFn, thisArg) es6新方法,从一个类似数组或可迭代对象中创建一个新的数组实例

// arrayLike: 想要转换成数组的伪数组对象或可迭代对象

// mapFn(可选): 如果指定了该参数，新数组中的每个元素会执行该回调函数

// thisArg (可选): 可选参数，执行回调函数 mapFn 时 this 对象

const keys = Array.from(document.querySelectorAll('.key'));

// transitionend,在CSS完成过渡后触发,这里大概相当于keyup的作用,很巧妙

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

window.addEventListener('keydown', playSound);