javascript - jquery对应键盘按下播放音乐？按别的键会报错？-PHP中文网问答

想实现键盘按下播放不用音乐功能？字母全部大写
按下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>
    <p class="keys">
        <p class="key" data-key="65">
            <p class="word">A</p>
            <p>clap0</p>
        </p>
        <p class="key" data-key="83">
            <p class="word">S</p>
            <p>clap1</p>
        </p>
        <p class="key" data-key="68">
            <p class="word">D</p>
            <p>clap2</p>
        </p>
        <p class="key" data-key="70">
            <p class="word">F</p>
            <p>clap3</p>
        </p>
        <p class="key" data-key="71">
            <p class="word">G</p>
            <p>clap4</p>
        </p>
        <p class="key" data-key="72">
            <p class="word">H</p>
            <p>clap5</p>
        </p>
        <p class="key" data-key="74">
            <p class="word">J</p>
            <p>clap6</p>
        </p>
        <p class="key" data-key="75">
            <p class="word">K</p>
            <p>clap7</p>
        </p>
        <p class="key" data-key="76">
            <p class="word">L</p>
            <p>clap8</p>
        </p>                
    </p>

    <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>

var list = Array.from(document.getElementsByClassName("key")); list.forEach(function(ele){ //通过jquery绑定事件不知道获取不到propertyName属性、不知道为什么。。。 ele.addEventListener("transitionend",function(e){ console.log("动画结束",e.propertyName); }); });

全部回复(2)

迷茫2017-04-11 10:30:47 2楼

报错是因为 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(☆▽☆)

赞 +0

添加回复