vue.js学习笔记：audio标签实现钢琴弹奏

1、钢琴键盘布置

1、html代码，在键盘内绑定CSS类white、black，用于切换当该键按下松开时的样式，使用v-on监听鼠标事件；

<div id="app"><!-- 钢琴键盘布局 --><ul :style="{color:fontcolor}" @mouseup="presskey('up')"><li><div :class="{white:index==1}"@mousedown="presskey(1)">1</div><p :class="{black:index==11}"@mousedown="presskey(11)"></p></li><li><div :class="{white:index==2}"@mousedown="presskey(2)">2</div><p :class="{black:index==12}"@mousedown="presskey(12)"></p></li><li><div :class="{white:index==3}"@mousedown="presskey(3)">3</div></li><li><div :class="{white:index==4}"@mousedown="presskey(4)">4</div><p :class="{black:index==13}"@mousedown="presskey(13)"></p></li><li><div :class="{white:index==5}"@mousedown="presskey(5)">5</div><p :class="{black:index==14}"@mousedown="presskey(14)"></p></li><li><div :class="{white:index==6}"@mousedown="presskey(6)">6</div><p :class="{black:index==15}"@mousedown="presskey(15)"></p></li><li><div :class="{white:index==7}"@mousedown="presskey(7)">7</div></li><li><div :class="{white:index==8}"@mousedown="presskey(8)">8</div></li></ul>
</div>

2、css代码

ul{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;width:480px;font-size: 30px;height:360px;transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;
}
li{float:left;list-style-type: none;position: relative;
}
li>div{height: 360px;width: 60px;background: rgba(255,255,255,.3);border: 1px solid;border-color:rgba(252, 251, 251, 0);border-bottom-left-radius : 8px;border-bottom-right-radius: 8px;box-sizing: border-box;box-shadow:inset 5px -10px  0  #00000050;text-align: center;display:table-cell;vertical-align: bottom;
}
li:not(:last-child)>div{border-right: none;
}
/* 当白键按下时的样式 */
.white{box-shadow: inset 2px -4px  0  #00000036;background: linear-gradient(45deg, rgba(255,255,255,.7), rgba(255,255,255,.5));
}li>p{height: 200px;width: 40px;background-color: #000;border-bottom-left-radius : 5.5px;border-bottom-right-radius: 5.5px;box-shadow:  3px -5px 0 #00000074;position: absolute;top:0;left: 40px;z-index: 999;
}
/* 当黑键按下时的样式 */
.black{box-shadow: 1px -2px 0 #00000074;
}

2、鼠标、键盘演奏实现

1、当鼠标点击钢琴键盘，创建一个audio元素，并为该元素绑定音乐文件，播放。为什么要每弹一个键创建一个要素呢？因为会冲突，如果你在上一个音频还没结束的时候就按下另一个键，那么上一个音频会终止，演奏效果极差，所以为每个操作配置一个新的频道，互不干扰，多个声音混响，效果极好；

2、键盘监听事件要放在mounted函数中调用；

new Vue({el: '#app',data: {index:0,isActive:-1,},methods:{//键盘鼠标按下操作，即音乐播放presskey:function(i){if(i=='up'){this.index=0;}else{this.index=i;var audio = document.createElement('audio'); //每按下一个键创建一个audio元素audio.ref="audio";audio.src="audios/"+i+".ogv";//音乐文件地址audio.play();}},//键盘弹奏keyDown() {document.onkeydown =  (e) => {if(e.key>=1&&e.key<=8){this.presskey(e.key)}if(e.key=='ArrowLeft'){this.presskey(11)}if(e.key=='ArrowDown'){this.presskey(12)}if(e.key=='ArrowRight'){this.presskey(13)}if(e.key=='Insert'){this.presskey(14)}if(e.key=='Delete'){this.presskey(15)}}document.onkeyup =  (e) => {this.presskey('up')}}},//监听键盘事件mounted () {this.keyDown();}})

3、资源下载链接

https://download.csdn.net/download/qq_50662136/85086617https://download.csdn.net/download/qq_50662136/85086617

vue.js学习笔记：audio标签实现钢琴弹奏相关推荐

Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...

vue.js学习笔记：audio标签实现钢琴弹奏

1、钢琴键盘布置

2、鼠标、键盘演奏实现

3、资源下载链接

vue.js学习笔记：audio标签实现钢琴弹奏相关推荐

最新文章

热门文章