tone.js+keyboard.js实现一个虚拟midi钢琴演奏合成器效果代码
代码语言:html
所属分类:多媒体
代码描述:tone.js+keyboard.js实现一个虚拟midi钢琴演奏合成器效果代码
代码标签: tone keyboard midi 合成器 钢琴
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/material-design-iconic-font.css"> <style> body { background: #F752B0; font-family: "Roboto", arial; } h1 { color: #FFFFFF; font-size: 36px; font-weight: 400; text-align: center; margin-top: 4em; } @media screen and (min-width: 568px) { h1 { display: none; margin-top: 0; } } .icon { margin: 2em auto; width: 50px; height: 50px; } @media screen and (min-width: 375px) { .icon { left: 10.5em; } } @media screen and (min-width: 412px) { .icon { left: 12em; } } @media screen and (min-width: 568px) { .icon { display: none; } } .material-icons.white { color: #FFFFFF; font-size: 48px; text-align: middle; -webkit-animation: rotate 1.5s infinite linear; animation: rotate 1.5s infinite linear; } @-webkit-keyframes rotate { from { transform: rotate(-180deg); } to { transform: rotate(-360deg); } } @keyframes rotate { from { transform: rotate(-180deg); } to { transform: rotate(-360deg); } } #wave { transform: rotate(180deg); position: absolute; bottom: 0; z-index: -1; } #test { margin: auto; max-width: 1800; } .outer-container { display: none; } @media screen and (min-width: 568px) { .outer-container { display: block; margin: 0.5em auto; height: 19.75em; width: 31.875em; background-color: #FF006E; border-radius: 5px 5px 20px 20px; } } @media screen and (min-width: 768px) { .outer-container { margin-top: 10em; height: 22em; width: 33.5em; } } .inner-container { margin: auto; height: 315px; width: 495px; background-color: #1D201F; border-radius: 5px 5px 20px 20px; } @media screen and (min-width: 768px) { .inner-container { margin-top: 10em; height: 22em; width: 32.5em; } } .buttons-container { height: 5.5em; width: 30em; margin: 0 auto; padding-top: 0.5em; } .flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .flex-column { flex-direction: column; flex-wrap: wrap; width: 8em; } .button-container { max-width: 10em; } .key-container { list-style: none; display: flex; flex-direction: horizontal; position: relative; } @media screen and (min-width: 768px) { .key-container { padding-top: 1em; } } .key li { display: block; height: 12.5em; width: 3.125em; background-color: #FFFFFF; border-radius: 0 0 10px 10px; text-align: center; border-right: 4px solid #1D201F; vertical-align: bottom; z-index: 1; } .black li { height: 7em; width: 2.5em; z-index: 1; position: absolute; background-color: #353b39; border-right: none; } .black li:nth-child(1) { top: 0; left: -24em; } .black li:nth-child(2) { top: 0; left: -20.75em; } .black li:nth-child(3) { top: 0; left: -14.5em; } .black li:nth-child(4) { top: 0; left: -11em; } .black li:nth-child(5) { top: 0; left: -7.75em; } li, button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } button.note { border: none; outline: none; background-color: transparent; width: 100%; height: 100%; font-weight: 700; color: #FF006E; padding-top: 9em; position: relative; overflow: hidden; } button.note:after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; background-color: #ff338b; opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .note-sharp { font-weight: 500; color: #FFFFFF; } button.note-sharp { border-radius: 0 0 10px 10px; height: 100%; weight: 100%; background-color: transparent; outline: none; border: none; overflow: hidden; position: relative; } button.note-sharp:after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; background-color: #a067f0; opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .button { font-size: 14px; border-style: none; outline: none; background: none; border: 0.25em solid #FF006E; color: #EBEBEB; border-radius: 3px; padding: 5px; width: 5.5em; height: 2.5em; margin-bottom: 0.5em; } .button:active { border-color: #8338EC; } .button.dial { border-radius: 50%; width: 2.5em; background-color: #D1DEDE; border-color: #FFFFFF; } .yellow { border-color: #F0F66E; } @-webkit-keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 20% { transform: scale(25, 25); opacity: 1; } 100% { transform: scale(40, 40); opacity: 0; } } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 1; } 20% { transform: scale(25, 25); opacity: 1; } 100% { transform: scale(40, 40); opacity: 0; } } button.note:focus:not(:active)::after { -webkit-animation: ripple 0.5s ease-out; animation: ripple 0.5s ease-out; } button.note-sharp:focus:not(:active)::after { -webkit-animation: ripple 1.2s ease-out; animation: ripple 1.2s ease-out; } </style> </head> <body> <div class="container"> <h1>Rotate phone to landscape mode</h1> <div class="icon"><i class="material-icons white">screen_rotation</i></div> <div class="outer-container"> <div class="inner-container"> <div class="buttons-container flex"> <div class="button-container flex"> <button class="button" id="synth">Synth</button> <button class="button" id="amSynth">AmSynth</button> <button class="button">DuoSynth</button> <button class="button">FMSynth</button> </div> <div class="button-container flex flex-column"> <button class="button yellow">AutoWah</button> <button class="button y.........完整代码请登录后点击上方下载按钮下载查看
网友评论0