vue实现一个可以弹奏的钢琴效果代码
代码语言:html
所属分类:多媒体
代码描述:vue实现一个可以弹奏的钢琴效果代码,内置曲谱,可以录制弹奏过程并回放。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @charset "UTF-8"; * { vertical-align: top; font-family: 微軟正黑體; -webkit-backface-visibility: hidden; backface-visibility: hidden; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } h2 { margin-bottom: 30px; color: #585858; } button { background-color: transparent; border: none; border: solid 1px; padding: 4px 12px; border-radius: 4px; transition: 0.5s; cursor: pointer; vertical-align: middle; } button:hover { background-color: #585858; color: white; } .notes_list li { display: inline-block; border-right: solid 1px; padding: 2px 5px; cursor: pointer; transition: 0.3s; } .notes_list li:hover { background-color: #e1e1e1; } .notes_list li.playing { background-color: #d5d5d5; } .notes_list li .time { font-size: 8px; opacity: 0.3; } .notes_list li .num { font-size: 16px; } .center_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; } .keyboard { box-shadow: 0px 0px 40px -5px rgba(0, 0, 0, 0.4); display: inline-block; margin-bottom: 30px; } .pianokey { display: inline-block; position: relative; cursor: pointer; } .white.playing { background-color: #d5d5d5; transform: translate(0px, 0px); } .black.playing { background-color: #727272; transform: translate(0px, 0px); } .white { width: 44px; height: 300px; border: solid 1px #eee; transform: translate(-3px, -3px); transition: 0.1s; } .white:hover { transform: translate(0px, 0px); background-color: #eee; } .black { position: absolute; top: 0px; width: 22px; height: 165px; background-color: #585858; margin-left: -11px; margin-right: -11px; z-index: 20; transform: translate(-3px, -3px); transition: 0.1s; } .black:hover { transform: translate(0px, 0px); background-color: #3f3f3f; } .label { position: absolute; color: rgba(88, 88, 88, 0.5); bottom: -25px; left: 50%; transform: translate(-50%); font-size: 8px; } i { margin-left: 5px; margin-right: 0px; margin-top: 3px; } i.fa-circle { color: #cc0000; } </style> </head> <body> <div id="app"> <div class="audioplayer" v-for="s in sounddata"> <audio v-bind:data-num="s.number" preload="auto"> <source v-bind:src="s.url" type="audio/ogg"/> </audio> </div> <div class="center_box"> <h2>Vue.js Piano Project 7</h2> <div class="keyboard"> <div class="pianokey" v-for="s in display_keys"> <div class="white" v-if="s.type=="white"" v-on:click="addnote(s.num)" v-bind:class="get_current_highlight(s.num,s.key)?"playing":"""> <div class="label">{{String.fromCharCode(s.key)}}</div> </div> <div class="black" v-if="s.type=="black"" v-on:click="addnote(s.num)" v-bind:class="get_current_highlight(s.num,s.key)?"playing":"""> <div class="label">{{String.fromCharCode(s.key)}}</div> </div> </div> </div><br/> <div class="controls"> <ul class="notes_list" v-if="notes.length>0"> <li v-for="(note,id) in notes" v-bind:class="now_note_id-1==id?"playing":"""> <div class="num">{{note.num}}</div> <div class="time">{{note.time}}</div> </li> </ul> <button v-on:click="load_sample">Sample</button> <button v-on:click="playnext(1)">Playnext</button> <button v-if="playing_time<=1" v-on:click="startplay">Startplay<i class="fa fa-play"></i></button> <button v-if="playing_time>1" v-on:click="stopplay">Stopplay<i class="fa fa-pause"></i></button> <button v-if="record_time<=0" v-on:click="start_record">Record<i class="fa fa-circle"></i></button> <button v-if="record_time>=1" v-on:click="stop_record">StopRecord<i class="fa fa-top"></i></button> <button v-on:click="notes=[]">Clear</button> <h4>{{playing_time+record_time}}</h4> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script> var soundpack = []; var soundpack_index = [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 8, 8.5, 9, 9.5, 10, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15]; for (var i = 0; i < soundpack_index.length; i++) { soundpack.push({ number: soundpack_index[i], url: "//repo.bfw.wiki/bfwrepo/sound/piano/" + soundpack_index[i] + ".wav" }); } var vm = new Vue({ el: "#app", data: { sounddata: soundpack, notes: [{ "num": 1, "time": 150 }, { "num": 1, "time": 265 }, { "num": 5, "time": 380 }, { "num": 5, "time": 501 }, { "num": 6, "time": 625 }, { "num": 6, "time": 748 }, { "num": 5, "time": 871 }, { "num": 4, "time": 1126 }, { "num": 4, "time": 1247 }, { "num": 3, "time": 1365 }, { "num": 3, "time": 1477 }, { "num": 2, "time": 1597 }, { "num": 2, "time": 1714 }, { "num": 1, "time": 1837 }], now_note_id: 0, next_note_id: 0, playing_time: 0, record_time: 0, now_press_key: -1, player: null, recorder: null, display_keys: [ { num: 1, key: 90, type: 'white' }, { num: 1.5, key: 83, type: 'black' }, { num: 2, key: 88, type: 'white' }, { num: 2.5, key: 68, type: 'black' }, { num: 3, key: 67, type: 'white' }, { num: 4, key: 86, type: 'white' }, { num: 4.5, key: 71, type: 'black' }, { num: 5, key: 66, type: 'white' }, { num: 5.5, key: 72, type: 'black' }, { num: 6, key: 78, type: 'white' }, { num: 6.5, key: 74, type: 'black' }, { num: 7, key: 77, type: 'white' }, { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0