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