Vue.js键盘事件不起作用

时间:2018-06-02 15:13:46

标签: javascript html vue.js keyboard-events

我要制作一个钢琴,根据按键盘上的按键弹奏音符。用户将点击输入并在点击后例如' a'它会播放C2。我当前的代码不起作用,也没有显示控制台中的任何错误,所以我想知道我做错了什么。我对Vue.js有点新鲜

这是HTML:

<input type="text" v-on:keyup = "keyMonitor"/>

这是JS文件:

var wrapper = new Vue({
el: '#wrapper',
data: {
notes: [
{key: 65, name: "C2.mp3"},
{key: 83, name: "D2.mp3"},
{key: 68, name: "E2.mp3"},
{key: 70, name: "F2.mp3"},
{key: 71, name: "G2.mp3"},
{key: 72, name: "A2.mp3"},
{key: 74, name: "B2.mp3"},
{key: 75, name: "C3.mp3"},
{key: 76, name: "D3.mp3"},
{key: 90, name: "E3.mp3"},
{key: 88, name: "F3.mp3"},
{key: 67, name: "G3.mp3"},
{key: 86, name: "A3.mp3"},
{key: 66, name: "B3.mp3"},
{key: 78, name: "C4.mp3"},
{key: 77, name: "D4.mp3"},
{key: 188, name: "E4.mp3"}
]
},
methods: {
playNote: function(note){
    if(note){
        var audio = new Audio(note);
        audio.play();

    }
},
keyMonitor: function(evt){
for(var key in wrapper.notes)
    if(evt.key == wrapper.notes.key){
        playNote(wrapper.notes.name);

    }
}

}

})

0 个答案:

没有答案