javascript - jquery对应键盘按下播放音乐？按别的键会报错？
本文介绍了javascript - jquery对应键盘按下播放音乐？按别的键会报错？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
想实现键盘按下播放不用音乐功能？字母全部大写
按下ASD....这些都有反应，但是当我按下别的字母时就会报错index.html:90 Uncaught TypeError: Cannot read property 'play' of undefined如何解决？
if(audio)那里应该已经判断了，没有的话就会直接return；为什么还会执行下面的play?
另外一点为什么会打印5次动画结束？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding:0;
margin:0;
}
.key{
display: inline-block;
text-align: center;
border:2px solid black;
margin:0 5px;
transition: all 1s ease;
}
.border{
border:2px solid red;
transform: scale(1.2);
}
</style>
<body>
<div class="keys">
<div class="key" data-key="65">
<p class="word">A</p>
<p>clap0</p>
</div>
<div class="key" data-key="83">
<p class="word">S</p>
<p>clap1</p>
</div>
<div class="key" data-key="68">
<p class="word">D</p>
<p>clap2</p>
</div>
<div class="key" data-key="70">
<p class="word">F</p>
<p>clap3</p>
</div>
<div class="key" data-key="71">
<p class="word">G</p>
<p>clap4</p>
</div>
<div class="key" data-key="72">
<p class="word">H</p>
<p>clap5</p>
</div>
<div class="key" data-key="74">
<p class="word">J</p>
<p>clap6</p>
</div>
<div class="key" data-key="75">
<p class="word">K</p>
<p>clap7</p>
</div>
<div class="key" data-key="76">
<p class="word">L</p>
<p>clap8</p>
</div>
</div>
<audio data-key="65" src="sounds/clap.wav" id='test1'></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>
</body>
<script src='../common/jquery.js'></script>
<script>
// jquery为什么需要一个0呢？js操作获得的是audio对象，jquery选择器获得的是jquery对象，0对象的才是对应的节点对象
$(function(){
// $(".key[data-key]")
$(window).on("keypress",function(e){
// console.log(e.keyCode);
// !KEY 和！audio 的区别
var key=$(".key[data-key="+e.keyCode+"]");
var audio=$("audio[data-key="+e.keyCode+"]");
if(audio){
key.addClass("border")
audio.currentTime=0;
audio[0].play(); //为什么按别的键会报错？
}
})
$(".key").each(function(index,e){
$(e).on("transitionend",function(e){
//console.log("动画结束"); 这里为何会打印5次动画结束
$(this).removeClass("border")
})
})
})
</script>
</html>解决方案
报错是因为 audio 没取到对应按键的 audio。audio[0].play()即为undefined.play()。应该是报的这个错误吧。
然后我试了一下jQuery没获取到的话，jQuery对象也不是空。转化为布尔值是true。
测试了一下 border会触发4次transitionend;
scale会触发1次transitionend;
然后边框出现和放大时的过渡会触发transitionend;
$(this).removeClass("border")时也会触发transitionend;
所以一共是10次;
期待有人能解释下为什么border会触发4次transitionend(☆▽☆)
这篇关于javascript - jquery对应键盘按下播放音乐？按别的键会报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
