Wes Bos-JavaScript30-01-JavaScript Drum Kit

来自Wes Bos的https://javascript30.com/系列视频教程，通过三十部视频的三十个项目让我们了解javascript。

这是第一天的内容：通过javascript实现爵士鼓功能。

简介：按下键盘上A行到L行的按键，会发出对象的音频，同时按钮会有对应的一个缩放效果。

---

 

Q1:如何对键盘按键进行事件监听？

Q2:按下按键之后如何触发音频？

Q3:如何连续触发音频？

Q4:如何对按下的按键添加缩放效果？

 

---

首先定义的按钮是键盘的A到L的一行，共九个按钮，通过http://keycode.info/或者是http://www.phpweblog.net/kiyone/archive/2007/04/19/1138.html可以查询每个字母和数字键的键码值。

其次通过将所有的九个按键都添加key的class。在每个按键下添加多一行span属性，具体的文本为音频的描述，同时为每个span都添加sound的类。

再为每个按键对应的音频放入audio标签中，添加相同的key类和对应的音频资源链接。 

---

 

新的一段，作者开始在script标签中写代码了。

window.addEventListener('keydown', function(e){

 console.log(e.keyCode)

}); 

向web控制台输出一条消息，信息为你按下的按键的keyCode。

添加一个按键的事件监听，打开F12的控制台，能够看到你按下的键码值。

---

 window.addEventListener('keydown', function(e){

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

//获取文档中 audio[data-key="${e.keyCode}"] 中data-key="${e.keyCode}"属性的元素

//在模板字符串中嵌入变量，需要将变量名写在${}之中。

 console.log(audio)

}); 

拓展：https://wohugb.gitbooks.io/ecmascript-6/content/docs/string.html

通过以上链接查阅es6模板字符串的文档。

---

window.addEventListener('keydown', function(e){

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

if(!audio) return;

audio.currentTime=0;

audio.play();

}); 

拓展：http://www.w3school.com.cn/tiy/t.asp?f=html5_av_met_play_pause

http://www.w3school.com.cn/tags/av_met_play.asp

http://www.w3school.com.cn/tags/av_prop_currenttime.asp

通过以上链接查阅audio的文档。

---

window.addEventListener('keydown', function(e){

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return;
audio.currentTime=0;
audio.play();
key.classList.add('playing')
});

 使用Element.classList获得key的类列表：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

http://www.runoob.com/jsref/prop-element-classlist.html

同时用Element.classList.add("mystyle")为该元素添加css样式。

---

 

setTimeout(function(){
key.classList.remove('playing')
},700)

 

setTimeout:  http://www.w3school.com.cn/jsref/met_win_settimeout.asp

如果选用以上函数，有一个缺点就是，并没有缩放的效果，而是到达最后一帧后，直接跳回首帧，动画效果不好。

---

 作者想要的是监听所有的已经添加了playing样式的元素。

const keys = document.querySelectorAll(`.key`);

---

 

同时，添加为keys添加一个遍历事件和监听 transitionend 事件

transitionend：  http://www.ziqiangxuetang.com/jsref/event-transitionend.html

transitionend demo：http://www.ziqiangxuetang.com/try/tryjsref_transitionend/

Array.prototype.forEach():  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

transitionend 事件在 CSS 完成过渡后触发。

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

前为触发条件，后为执行函数。

执行的函数为：removeTransition

function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}

---

<script>
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}

function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;

key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}

const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
</script>

---

 HTML DOM addEventListener() 方法：http://www.runoob.com/jsref/met-element-addeventlistener.html

 target 事件属性：http://www.w3school.com.cn/jsref/event_target.asp

 HTML DOM classList 属性：http://www.runoob.com/jsref/prop-element-classlist.html

---

获得键码值>添加键盘事件监听>添加函数>定义audio变量，querySelectord的来源是按下的按键>如果存在（A-L行），就赋值给了audio；否则停止函数>播放该按键对应的音频>

>但音频只会在播完一次之后才重播> 设置audio.currentTime = 0; 使得快速多次按下后的音频能重复播放> 播放音频效果达到了>

>在css的playing类中已经添加了放大元素的的效果>针对按钮缩放效果的变量 const key = document.querySelector(`div[data-key="${e.keyCode}"]`);>

>为全部元素添加playing类>同时使用forEach监听每个已经transitionend的元素，添加Element.remove('playing');

 

---

以上。

 

转载于:https://www.cnblogs.com/syuukisei/p/6201218.html