Html5有着许多强大的功能实现，这里我们实现一个Drumpkit (电子鼓乐器)的音频弹奏器
当我们按下相对应的键时便会发出对应的音频，从而实现电子乐的弹奏，特此我特意加上了一点小样式作为装饰。
样式我们就不过多赘述，将在文章最后奉上。我们主要聊一聊怎么通过JS的方法实现这个功能，主要实现与用户的交互效果。
首先
我们将需要的音频和背景图片准备好打包放置好位置。
这里我多点了一个sound文件夹，大家可以少弄一个，后续文件查找就少一次打开，节约运行时间。
接下来进行HTML的创建
一般对于较少的数据导入，我们可以直接使用多个div标签直接进行渲染。这里我使用的vue中的v-for进行页面的渲染，div的个数取决于数据数组中的个数。
<div class="keys" >
<div class="key" v-for="(item,index) in list">
<div class="title">{{item.title}}</div>
<span class="sound">{{item.sound}}</span>
</div>
//在JS中创建一个vue实例对象，并将数据写入
//id是用来后续查找用户按下的键值
const app=new Vue({
el:'.keys',
data:{
list:[{title:'A',sound:'clap',id:'a'},{title:'S',sound:'hihat',id:'s'},{title:'D',sound:'kick',id:'d'},{title:'F',sound:'openhat',id:'f'},
{title:'G',sound:'boom',id:'g'},{title:'H',sound:'ride',id:'h'},{title:'J',sound:'snare',id:'j'},{title:'K',sound:'tom',id:'k'},{title:'L',sound:'tink',id:'l'}]
},
methods:{
},
})
对页面的div添加上对应的id
id是不同key标签的唯一标识，这里用按键小写字母作为id的键值。
const keys =document.querySelectorAll('.key')
for(let i=0;i<keys.length;i++){
keys[i].id=`${app.list[i].id}`
}
最后开始监听整个页面
对键盘事件进行监听
window.addEventListener('keydown',e=>{
//获取id与e.key相等的div标签
let key=document.querySelector(`.key[id='${e.key}']`)
//如果不存在e.key相等的id，则key值将为空。
//判断key是否为空
if(key){
//增加被按按键的样式
key.classList.add('palyMusic')
//##############################################################
//###在forEach外部创建变量带出循环体，目的是借用list中的sound数据###
//### 不用对每一个key标签内加入radio地址 ###
//###########################################################
let index
app.list.forEach(element => {
//获取与key对应的list内的sound数据
if(element.id===key.id){
index=element
}
});
// 直接创建一个音频对象,使用相对定位，使用list.sound节约代码量，不用每一个再添加音频地址
let audio = new Audio(`./sounds/sounds/${index.sound}.wav`)
//播放
audio.play()
setTimeout(()=>{
key.classList.remove('palyMusic')
},450)
}
}
)
这就是html5 Drumpkit鼓类乐器音频弹奏器大致的内容实现
这里给大家在附上CSS代码
html{
font-size: 10px; /* css inhert */
background: url(./background.jpg) bottom center no-repeat;
background-size: cover;
}
html,body{
height: 100vh;
}
.keys{
display: flex;
min-height: 100%;
align-items: center;
justify-content:center;
}
.key{
border: 4px solid black;
border-radius: 5px;
margin: 10px;
font-size: 15px;
padding: 10px 5px;
/* 过度动画 */
transform:all 0.4s ease;
width: 100px;
text-align: center;
color: white;
background: rgb(0,0,0,0.4);
/* text-shadow带来文字立体感 */
text-shadow: 0 0 0.5rem black;
}
.key .title{
font-size: 40px;
}
.sound{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffc600;
}
.palyMusic{
transform: scale(1.1);
border: 4px solid rgb(227, 200, 21);
background-color: blueviolet;
}
从项目中也可以看出，一个项目中没有说纯使用vue的，一般将vue与is进行结合使用更多事半功倍的效果。
视频上传太麻烦了，给大家弹奏一首 shape of you 。
