我要制作一个钢琴,根据按键盘上的按键弹奏音符。用户将点击输入并在点击后例如' 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);
}
}
}
})