在线吉他调音
先看效果（图片没有声，可以下载源码看看，比这更好~）：
再看代码（查看更多）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>在线吉他调音</title><style>:root {--dark: #282828;--black: #0a180b;--c-mouth: #7c1d1c;--track: #2220;--thumb: #4caf50;--c-classic: #ff9800;--c-electric: #00aaff;}html {width: 100vw;height: 100vh;overflow: hidden;}body {margin: 0;padding: 0;overflow: hidden;display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;perspective: 100vmin;font-family: Arial, Helvetica, serif;--vol: 0.05;}body * {box-sizing: border-box;}/*** HEADER ***/header {padding: 10px;background: var(--dark);height: 60px;position: fixed;width: 100%;z-index: 1;top: 0;box-shadow: #00000030 0px 2px 6px, #00000040 0px 2px 6px;}/*** Title ***/h1 {display: inline-block;font-weight: normal;color: #ffffff;font-size: 30px;margin: 0px 0px 0 60px;padding: 0px 20px 0 0;border-right: 1px solid #000;float: left;position: relative;background: linear-gradient(90deg, #fff0 calc(100% - 1px), #fff2 100%);height: 40px;}h1:before {content: "";float: left;width: 45px;height: 45px;background: linear-gradient(-42deg, #686868 , #e6e6e6, #686868);margin-right: 10px;position: absolute;z-index: -1;left: -60px;transform: rotate(-45deg) scale(0.85);border-radius: 35% 66% 40% 15% / 40% 66% 35% 15%;margin-top: -11px;padding: 2px;background-color: #151515;box-shadow: #00000026 0 0 5px 3px, 0 0 2px 0px #000, 0 0 15px 5px #1118 inset, 0 0 4px 3px #fff inset;cursor: pointer;border: 2px solid #111111;border-color: #222 #222121 #222222 #1e1e1e;box-sizing: initial;}h1:after {content: "";width: 40px;height: 30px;border-radius: 100%;background: repeating-linear-gradient(60deg, #fff0 0 1px , #6668 0 2px, #fff0 0 3px), repeating-linear-gradient(-60deg, #fff0 0 1px , #6668 0 2px, #fff0 0 3px);position: absolute;left: -53px;top: 0px;cursor: pointer;}h1 a {color: #fff;}h1:hover a, h1:hover a span, h1 a.imgTitle {color: #00b8ff;text-shadow: 0 0 3px #00b8ff, 0 0 4px #00b8ff, 0 0 5px #00b8ff;}h1 a.imgTitle span:nth-child(even) {color: #83dcff;text-shadow: 0 0 2px #00b8ff, 0 0 3px #00b8ff, 0 0 4px #00b8ff}h1 span {float: left;text-transform: uppercase;position: relative;}h1 span:nth-child(1) {font-size: 1.5em;line-height: 0.725em;transform: scaleY(1.2);top: 5px;}h1 span:nth-child(2) {font-size: 15px;position: absolute;left: 50px;margin-top: -3px;color: #ccc;transform: scaleX(1.75);}h1 span:nth-child(3) {margin-left: -1px;margin-top: -2px;font-size: 1.05em;top: 11px;transform: scaleY(1.2);}h1 span:nth-child(4) {font-size: 12px;margin-left: 8px;top: 12px;color: #999;transform: scaleX(1.5);}h1 span:nth-child(5) {font-size: 19px;font-weight: bold;top: 23px;left: -42px;}h1 span:nth-child(6) {margin-left: -37px;font-size: 11px;margin-top: 24px;color: #ccc;transform: scaleX(1.2);}/*** Link ***/a.josetxu-btn {background: url(https://josetxu.com/wp-content/themes/josetxu-code/images/profile.jpg) no-repeat center center #ffffff;background-size: calc(36px);float: left;width: 40px;height: 40px;border-radius: 2px;margin-left: 20px;text-align: left;filter: grayscale(1);position: relative;}a.josetxu-btn:before, a.josetxu-btn:after {content: "CREATED BY";font-size: 8px;color: #b9b9b9;background: linear-gradient(90deg, #fff0 calc(100% - 1px), #fff2 100%);min-width: 68px;border-radius: 0;margin-left: 40px;float: left;padding: 7px 0 3px 6px;border-right: 1px solid #000;}a.josetxu-btn:after {content: "JOSETXU";color: #fff;font-size: 11px;padding: 2px 0 7px 5px;min-width: 69px;}a.josetxu-btn:hover {background-image: url(https://assets.codepen.io/256997/internal/avatars/users/default.png?width=40);filter: none;}a.josetxu-btn:hover:before {color: #ff6600;}a.josetxu-btn:hover:after {color: #ff6600;}/*** Buttons ***/header button {float: right;height: 40px;cursor: pointer;width: 45px;margin: 0 10px;border: 0;background: #fff0;position: relative;border-radius: 1px;transition: all 0.25s ease 0s;}header button:disabled {cursor: default;box-shadow: 0 0 0 4px var(--dark), 0 0 0 7px var(--c-classic);}header button:disabled:before {cursor: default;opacity: 1;}header button:disabled:hover:before {opacity: 1;}header button + button:disabled {box-shadow: 0 0 0 4px var(--dark), 0 0 0 7px var(--c-electric);}header button:before {opacity: 0.5;}header button:hover:before {opacity: 0.9;}header button:after {content: "ELECTRIC";position: absolute;color: #0008;font-size: 10px;top: 53px;left: -8px;padding: 0 5px;border-radius: 2px;max-height: 0;height: 100%;font-weight: bold;transition: all 0.25s ease 0s;z-index: -1;overflow: hidden;transform-origin: center top;width: 50px;text-shadow: 0px 1px 2px #fffc, 0px 0px 1px #000;background: var(--c-electric);display: flex;align-items: center;justify-content: center;}header button#e-classic:after {content: "CLASSIC";background: var(--c-classic);}header button:hover:after {max-height: 21px;}button#e-classic:before {content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background:radial-gradient(circle at 50% 5px, var(--dark) 6px, var(--c-classic) 7px 9px, var(--dark) 10px, #fff0 11px ),radial-gradient(ellipse at 50% -25px, var(--c-classic) 19px, #fff0 20px ),radial-gradient(ellipse at 50% 55px, var(--c-classic) 23px, #fff0 24px ),radial-gradient(circle at 50% 31px, var(--c-classic) 22px, #fff0 23px ),var(--dark);border-radius: 7px 7px 12px 12px;}button#e-electric:before {content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background:conic-gradient(from 0deg at 0 100%, var(--dark) 0 25%, #fff0 0 100%),conic-gradient(from 0deg at 0 100%, var(--dark) 0 25%, #fff0 0 100%),conic-gradient(from 0deg at 0 100%, var(--c-electric) 0 25%, #fff0 0 100%),radial-gradient(circle at 50% -4px, var(--dark) 9px, #fff0 10px ),radial-gradient(ellipse at 32px 0px, var(--dark) 6px, #fff0 7px ),radial-gradient(ellipse at 13px 0px, var(--dark) 6px, #fff0 7px ),radial-gradient(ellipse at 50% -6px, var(--c-electric) 19px, #fff0 20px ),radial-gradient(ellipse at 50% 55px, var(--c-electric) 23px, #fff0 24px ),radial-gradient(circle at 50% 31px, var(--c-electric) 22px, #fff0 23px ),var(--dark);border-radius: 7px 7px 15px 15px;background-repeat: no-repeat;background-size: 11px 4px, 11px 4px, 7px 15px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;background-position: 17px 22px, 17px 16px, 19px -2px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;}/******* GUITAR *******/.tuner-body {width: 100vw;height: 360px;text-align: center;}.tuner-body button.string {background-color: #fff0;position: relative;border: none;float: left;width: 100%;margin: 7px 0;height: 40px;outline: none;cursor: pointer;padding: 0;z-index: 1;}.tuner-body button.string:before {content: "";position: absolute;top: 0;left: -10px;height: 100%;width: calc(100% + 20px);background: repeating-linear-gradient(90deg, #ddc190 1px 2px, #ababab 0px 3px, #000c 4px);border-top: 1px solid #000;border-bottom: 1px solid #000;box-sizing: border-box;z-index: 0;box-shadow: 0px 10px 5px -1px #0004, 0 0 2px 0 #0008;}.tuner-body button#s6.string:before,.tuner-body button#s6.string:after {height: 9px;top: calc(50% - 4.5px);}.tuner-body button#s5.string:before,.tuner-body button#s5.string:after {height: 8px;top: calc(50% - 4px);}.tuner-body button#s4.string:before,.tuner-body button#s4.string:after {height: 7px;top: calc(50% - 3.5px);}.tuner-body button#s3.string:before,.tuner-body button#s3.string:after {height: 6px;top: calc(50% - 3px);}.tuner-body button#s2.string:before,.tuner-body button#s2.string:after {height: 5px;top: calc(50% - 2.5px);}.tuner-body button#s1.string:before,.tuner-body button#s1.string:after {height: 4px;top: calc(50% - 2px);}.tuner-body button.string:first-child {margin-top: 26px;}/*** Shine Effect ***/.tuner-body button.string:hover:after,.tuner-body button.string.playing-sound:after {content: "";position: absolute;height: 9px;top: calc(50% - 4.5px);left: 0;width: 100%;background: #00c9ff80;box-shadow: 0 0 1.5vmin 0vmin #ffffff80;z-index: 0;}.tuner-body button.string.playing-sound:after {z-index: -1;}@keyframes vibrate {0%, 100% { margin-top: 0; }25% { margin-top: -1px; }75% { margin-top: 1px; }}.tuner-body button.string.playing-sound:before {animation: vibrate 0.1s ease-in-out 0s infinite}.tuner-body button.string.playing-sound:active:before {animation: none;}/***** GUITARS ****/.tuner-body:before, .tuner-body:after, .notes:after {content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;}.notes + .notes:after {display: none;}/*** Classic ***/.tuner-body.e-classic:after {--dot: radial-gradient(circle, var(--c-mouth) calc(68% - 1px), #fff0 68% 100%);background:var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot);background-position:calc(50% - 216px) 50%, calc(50% - 204px) calc(50% + 70px), calc(50% - 175px) calc(50% + 125px), calc(50% - 125px) calc(50% + 175px), calc(50% - 70px) calc(50% + 204px), 50% calc(50% + 215px), calc(50% + 70px) calc(50% + 204px), calc(50% + 125px) calc(50% + 175px), calc(50% + 175px) calc(50% + 125px), calc(50% + 204px) calc(50% + 70px), calc(50% + 215px) 50%, calc(50% + 204px) calc(50% - 70px), calc(50% + 175px) calc(50% - 125px ), calc(50% + 125px) calc(50% - 175px), calc(50% + 70px) calc(50% - 204px), 50% calc(50% - 216px), calc(50% - 70px) calc(50% - 204px), calc(50% - 125px) calc(50% - 175px), calc(50% - 175px) calc(50% - 125px), calc(50% - 204px) calc(50% - 70px);background-size:40px 40px, 38px 38px, 36px 36px, 34px 34px, 32px 32px, 30px 30px, 28px 28px, 26px 26px, 24px 24px, 22px 22px, 20px 20px, 18px 18px, 16px 16px, 14px 14px, 12px 12px, 10px 10px, 8px 8px, 6px 6px, 4px 4px, 3px 3px;background-size:10px 10px, 15px 15px, 20px 20px, 25px 25px, 30px 30px, 40px 40px, 30px 30px, 25px 25px, 20px 20px, 15px 15px, 10px 10px, 15px 15px, 20px 20px, 25px 25px, 30px 30px, 40px 40px, 30px 30px, 20px 20px, 15px 15px, 10px 10px;background-repeat: no-repeat;}.tuner-body.e-classic:before {background:linear-gradient(180deg, var(--c-mouth) 5%, #fff0 30% 70%, var(--c-mouth) 95%),linear-gradient(180deg, #000d 5%, #fff0 40% 60%, #000d 95%),radial-gradient(circle at 50% 50%, #c5a05e 0 135px, #bb8d3c 173px, #ff5e00 178px 185px, var(--c-mouth) 186px 195px, #ff5e00 196px 235px, var(--c-mouth) 236px 245px, #ff5e00 246px 100% );}.tuner-body.e-classic .notes:after {left: calc(50vw - 174px);top: calc(50% - 174px);width: 348px;height: 348px;background:radial-gradient(circle at calc(50% + 5px) calc(50% + 2.5px), #fff0 175px, var(--c-mouth) 185px),radial-gradient(circle at 40% 55%, #fff0 175px, #0004 195px, #000c 220px);border-radius: 100%;left: calc(50vw - 176px);top: calc(50% - 178px);width: 350px;height: 350px;}/*** Strings Clasic ***/.tuner-body.e-classic button.string:nth-child(n+4):before {background:#fff8;}/*** Electric ***/.tuner-body.e-electric::before {background: linear-gradient(180deg, #000 5%, #0566c2, #000 95%);}.tuner-body.e-electric:after, .tuner-body.e-electric .notes:after {--p-inner: #080808;--p-outer: #fffeee;--p-side: #141414;background:var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot),var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot),radial-gradient(circle at 120px 41px, var(--p-outer) 38px, #fff0 calc(38px + 1.5px) 100%),radial-gradient(circle at 120px calc(100% - 41px), var(--p-outer) 38px, #fff0 calc(38px + 1.5px) 100%),radial-gradient(circle at 41px calc(100% - 41px), var(--p-inner) 37px, #fff0 calc(37px + 1.5px) 100%),radial-gradient(circle at 41px 41px, var(--p-inner) 37px, #fff0 calc(37px + 1.5px) 100%),radial-gradient(circle at 119px 39px, #686868 37px, #fff0 calc(37px + 1.5px) 100%),radial-gradient(circle at 119px calc(100% - 37px), #686868 37px, #fff0 calc(37px + 1.5px) 100%),radial-gradient(circle at 41px calc(100% - 37px), #686868 37px, #fff0 calc(37px + 1.5px) 100%),radial-gradient(circle at 40px 39px, #686868 36px, #fff0 calc(36px + 1.5px) 100%),linear-gradient(180deg, #121212 40px, #fff0 0 calc(100% - 40px), #121212 0 100%),linear-gradient(90deg, #111 3px, var(--p-inner) 4px calc(50% - 3px), #111 50%, var(--p-outer) calc(50% + 3px) calc(100% - 3px), #fff0 100%),linear-gradient(45deg, #242424 2px, #fff0 3px 100%), linear-gradient(-45deg, #242424 2px, #fff0 3px 100%),linear-gradient(135deg, #242424 2px, #fff0 3px 100%), linear-gradient(225deg, #242424 2px, #fff0 3px 100%), #121212;width: 180px;left: calc(50% - 25px);height: 380px;top: calc(50% - 190px);border-radius: 10px;border: 10px solid #181818;border-width: 25px 10px;box-sizing: border-box;--dot: radial-gradient(circle, #ebebeb 3px, #adadad 8px, #000 9px, #fff0 10px 100%);background-repeat: no-repeat;background-size:22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 22px 22px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;background-position:109px 20px, 109px 74px, 109px 128px, 109px 182px, 109px 236px, 109px 290px, 29px 20px, 29px 74px, 29px 128px, 29px 182px, 29px 236px, 29px 290px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;box-shadow:0 0 3px 1px #262626, -1px 1px 0px 0px var(--p-side), -2px 1px 0px 0px var(--p-side), -3px 2px 0px 0px var(--p-side), -4px 2px 0px 0px var(--p-side), -5px 3px 0px 0px var(--p-side), -6px 3px 0px 0px var(--p-side), -7px 4px 0px 0px var(--p-side), -8px 4px 0px 0px var(--p-side), -9px 5px 0px 0px #20202080, -9px 5px 0px 0px #101010, -15px 10px 10px 0px #0008, 0 0 3px 1px #262626 inset;}.tuner-body.e-electric .notes:after {left: calc(50vw - 300px);--p-inner: #fffeee;--p-outer: #080808;}/*** Strings Electric ***/.e-electric button#s1:before {background: repeating-linear-gradient(0deg, #ababab 1px 2px, #000c 3px);}.e-electric button#s2:before {background: repeating-linear-gradient(0deg, #ababab 1px 3px, #000c 4px);}.e-electric button.string:before {background: repeating-linear-gradient(120deg, #ababab 1px 2px, #000c 3px);}/*** String Vibration Effect ***/@property --bgp1 {syntax: '<percentage>';inherits: false;initial-value: 50%;}button.playing-sound span {--bgp1: 50%;background-image:repeating-radial-gradient(#fff 0.0001%, #fff0 .0025%, #fff0 .065%, #fff0 0.091%),repeating-radial-gradient(#fff 0.0001%, #fff0 .0025%, #fff0 .0675%, #fff0 0.0875%);background-size: 100% var(--bgp1), 100% var(--bgp1);background-repeat: no-repeat;background-position: 50% 50%, 50% 50%;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: -1;animation: particles 4s ease 0s infinite;animation-fill-mode: forwards;filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) blur(1px);transition-property: all;opacity: 0;}@keyframes particles {0% { --bgp1: 50%; opacity: 0; }1% { opacity: 0.9; }100% { --bgp1: 100%; opacity:0; }}/*** NOTES ***/.notes span {width: 100%;color: #171717;font-size: 30px;text-shadow: -1px -1px 1px #000000, 0px 0px 1px #6f6f6f;padding: 0;opacity: 0.65;height: 100%;display: flex;align-items: center;justify-content: center;}.notes {position: absolute;height: 364px;width: 85px;z-index: 0;margin: 0 auto;padding: 20px 0;display: flex;flex-direction: column;}.notes .lightOn {--clr: #00aaff;color: var(--clr);text-shadow: 0px 0px 5px var(--clr), 0px 0px 10px var(--clr), 0px 0px 15px var(--clr), 0px 0px 20px var(--clr), 0px 0px 25px var(--clr), 0px 0px 25px var(--clr), 0px 0px 35px var(--clr), 1px 1px 2px #00000080, -1px -1px 2px #00000080, 0px 0px 2px #000000;transition: all 0.2s ease;opacity: 1;}.e-classic .notes .lightOn {--clr: #ff9800;}.notes > span:before {content: "";position: absolute;background: #282828;width: 52px;height: 52px;z-index: -1;left: 50%;border-radius: 5px;box-shadow: 0px 1px 3px 3px #000 inset, 1px 2px 5px -1px #fff8, -1px -1px 5px -1px #000;transform: translateX(-50%);}.notes + .notes {right: 2vmin;}.notes + .notes span:before {width: 100%;}/*** Move Pick ***/#move-pick {transition: 0.01s;width: 70px;height: 70px;background: linear-gradient(-42deg, #686868 , #e6e6e6, #686868);position: absolute;z-index: 1;right: 30px;bottom: 65px;border-radius: 35% 66% 40% 15% / 40% 66% 35% 15%;padding: 2px;background-color: #151515;box-shadow: #00000026 0 0 5px 3px, 0 0 2px 0px #000, 0 0 15px 5px #1118 inset, 0 0 4px 3px #fff inset;cursor: pointer;border: 2px solid #111111;border-color: #222 #222121 #222222 #1e1e1e;box-sizing: initial;display: none;}#move-pick:before {content: "";width: 100%;height: 60%;border-radius: 100%;background: repeating-linear-gradient(60deg, #fff0 0 1px , #6668 0 2px, #fff0 0 3px), repeating-linear-gradient(-60deg, #fff0 0 1px , #6668 0 2px, #fff0 0 3px);position: absolute;left: 3px;top: 11px;transform: rotate(45deg);}#guitar-body.pickActive #move-pick {display: block;}/*** FOOTER ***/footer {background: var(--dark);position: fixed;bottom: 0;width: 100%;height: 60px;display: flex;justify-content: space-between;padding: 10px;box-shadow: rgba(0, 0, 0, 0.16) 0px -2px 6px, rgba(0, 0, 0, 0.25) 0px -2px 6px;}footer:before, footer:after {content: "";position: absolute;right: 27%;border-right: 1px solid #000;float: left;border-left: 1px solid #fff2;height: 40px;}footer:before {right: inherit;left: 27%;}footer > div {width: 120px;height: 40px;display: inline-flex;justify-content: space-evenly;position: relative;margin-left: 25px;margin-right: 25px;font-size: 14px;background: var(--dark);}.buttons {width: 220px;}/*** Volume Slider ***/.slider-value {--fbc: #4caf50;width: 22px;float: right;margin: 0;position: absolute;right: 0px;background: #121212;color: var(--fbc) !important;text-align: center;border-radius: 2px;border: 1px solid #000;top: -2px;box-shadow: #00000026 0 0 5px 3px, 0 0 2px 0px #000, 0 0 10px 10px #111 inset, 1px 1px 2px 0 #fff3, -1px -1px 2px 0 #000;}#volume:active + .slider-value {--fbc: #4caf50;box-shadow: 0 0 10px 0 var(--fbc) inset, 0 0 10px 0 var(--fbc), 1px 1px 2px 0 #fff3, -1px -1px 2px 0 #000 !important;}/*** Range ***/input[type='range'] {cursor: pointer;bottom: 0;position: absolute;height: 17px;width: calc(100% + 2px);background:linear-gradient(90deg, #4caf5080 0 calc(var(--vol) * 100%), #fff0 0 100%),radial-gradient(#fff0 40px, #111),linear-gradient(-182deg, var(--dark) 5px, #fff0 6px 100%),linear-gradient(2deg, var(--dark) 5px, #fff0 6px 100%),linear-gradient(180deg, #fff0 6px, var(--thumb) 0 9px, #fff0 0 100%),repeating-linear-gradient(90deg, #fff0 0 2%, #fff8 calc(3% - 1px), var(--thumb) 0 calc(4% + 1px), #fff0 0 5%), var(--dark);margin: 0;--c1: #fff4;--c2: #4a4a4a;--bo: 2px;--bx: -1px -1px 3px var(--c1), 2px 2px 3px #0008, 0 0 2px 0 #000 inset;--range-bgsz: 100% 50%, 100% 100%;--range-bgps: 0px 45%, 0 0;--range-bgln: linear-gradient(90deg, #fff0 4px, #0008 0 5px, #222 6px, #fff0 0 7px, #0008 0 8px, #111 0 9px, #fff0 0 10px, #0008 0 11px, #222 12px, #fff0 0 100%);border: 1px solid #111111;border-color: #010101 #121212 #2f2f2f #181818;border-radius: 3px;box-shadow: 1px 1px 2px 0 #fff3, -1px -1px 2px 0 #000;}input[type='range']:focus {outline: none;}input[type='range'],input[type='range']::-webkit-slider-runnable-track,input[type='range']::-webkit-slider-thumb {-webkit-appearance: none;}input[type=range]::-webkit-slider-thumb {background: var(--range-bgln), var(--thumb);background-size: var(--range-bgsz);background-position: var(--range-bgps);background-repeat: no-repeat;width: 20px;height: 22px;border: var(--bo) solid var(--black);border-radius: 2px;margin-top: -10px;box-shadow: var(--bx);}input[type=range]::-moz-range-thumb {background: var(--range-bgln), var(--thumb);background-size: var(--range-bgsz);background-position: var(--range-bgps);background-repeat: no-repeat;width: 20px;height: 22px;border: var(--bo) solid var(--black);border-radius: 2px;margin-top: -10px;box-shadow: var(--bx);}input[type=range]::-webkit-slider-runnable-track {background-color: var(--track);height: 3px;}input[type=range]:focus::-webkit-slider-runnable-track {outline: none;}input[type=range]::-moz-range-track {background-color: var(--track);height: 5px;}/*** Buttons ***/footer button {height: 40px;width: 40px;border: 0;cursor: pointer;border-radius: 1px;}.buttons button {padding: 2px;background-color: #151515;box-shadow: #00000026 0 0 5px 3px, 0 0 2px 0px #000, 0 0 10px 10px #111 inset, 1px 1px 2px 0 #fff3, -1px -1px 2px 0 #000;cursor: pointer;border: 2px solid #111111;border-color: #010101 #121212 #222222 #181818;box-sizing: initial;position: relative;margin-top: -4px;--b-top: #085d7f;--b-bot: #176fa5;--b-bor: #15546e;--b-tra: #4084af;--b-lig: #0087dd;}.buttons button:before {content: "\25CB \A \2579";width: 100%;height: 100%;float: left;text-align: center;background: linear-gradient(180deg, var(--b-top), var(--b-tra));box-sizing: border-box;display: flex;justify-content: center;align-items: center;border-top: 0 solid #292929;border-bottom: 0 solid transparent;color: #fff7;font-family: Arial, Helvetica, serif;text-shadow: -1px -1px 0 #0000004a;border-radius: 2px;font-size: 12px;box-shadow: 0 0px 10px 3px #0008 inset;white-space: pre-wrap;line-height: 19px;}.buttons button:before {border-top: 5px solid var(--b-bor);}button.active:before, button#btnStop:active:before {border-top: 0 solid #fff0;box-shadow: 0 -2px 10px 1px var(--b-lig);border-bottom: 5px solid var(--b-bor);}button#btnStop {--b-top: #7f0808;--b-bot: #a51717;--b-bor: #852828; /*#560303*/--b-tra: #af4040;--b-lig: #dd0000;}/*** Pick ***/.pick {display: flex;justify-content: flex-start;padding-left: 20px;}button#btnPick {transform: rotate(-45deg) scale(0.85);margin-top: -12px;background: linear-gradient(-42deg, #686868 , #e6e6e6, #686868);position: absolute;border-radius: 35% 66% 40% 15% / 40% 66% 35% 15%;padding: 2px;background-color: #151515;box-shadow: -1px 1px 2px 0px #fff3, 1px -2px 3px -1px #000;cursor: pointer;border: 2px solid #111111;border-color: #222 #222121 #222222 #1e1e1e;box-sizing: initial;width: 45px;height: 45px;}button#btnPick.active {background: linear-gradient(44deg, #00000030, #0000009e, #00000030);}button#btnPick:before {content: "";width: 100%;height: 60%;border-radius: 100%;background: repeating-linear-gradient(60deg, #fff0 0 1px , #6668 0 2px, #fff0 0 3px), repeating-linear-gradient(-60deg, #fff0 0 1px , #6668 0 2px, #fff0 0 3px);position: absolute;left: 1px;top: 8px;transform: rotate(45deg);}button#btnPick.active:before {display: none;}/*** Buttons Text ***/footer input:after {content: "VOLUME";position: absolute;color: #4caf50;left: 0;top: -27px;background: #121212;padding: 1px 6px;border: 1px solid #000;box-sizing: border-box;border-radius: 2px;font-size: 12px;box-shadow: #00000026 0 0 5px 3px, 0 0 2px 0px #000, 0 0 10px 10px #111 inset, 1px 1px 2px 0 #fff3, -1px -1px 2px 0 #000;}footer button:after {content: "STOP";position: absolute;color: #fff;left: -62px;top: 0px;background: #121212;padding: 1px 6px;border: 1px solid #000;color: #983030;border-radius: 2px;font-size: 12px;box-shadow: #00000026 0 0 5px 3px, 0 0 2px 0px #000, 0 0 10px 10px #111 inset, 1px 1px 2px 0 #fff3, -1px -1px 2px 0 #000;}#btnHold:after {content: "HOLD";left: inherit;right: -62px;color: #0061b1;}#btnPick:after {content: "PICK";color: #929292;transform: translate(125px, 60px) rotate(45deg);font-size: 14px;height: 17.18px;transform-origin: center top;top: -1px;}/*** Buttons Hover ***/#volume:active + .slider-value,footer input:active:after,footer button:active:after,#btnHold.active:after,#btnPick.active:after {text-shadow: 0 0 5px #1a1a1a;border-color: var(--fbc);box-shadow: 0 5px 10px 0 var(--fbc) inset, 0 2px 10px 0 var(--fbc), 1px 1px 2px 0 #fff3, -1px -1px 2px 0 #000;color: var(--fbc);transition: all 0.25s ease 0s;}#volume:active:after,#volume:active + .slider-value {--fbc: #4caf50;}#btnStop:active:after {--fbc: #c91212;transition-duration: 0s;}#btnHold:active:after, #btnHold.active:after {--fbc: #0a7fdf;}#btnPick:active:after , #btnPick.active:after {--fbc: #95abbc;}audio {display: none;}/*** MOBILE Landscape ***/@media only screen and (max-width: 580px) {h1::before {display: none;}h1 {margin-left: 0;padding-right: 12px;}a.josetxu-btn {margin-left: 12px;width: 0;}a.josetxu-btn:before, a.josetxu-btn:after {margin-left: 0;}.tuner-body {margin-top: -10vh;}.tuner-body:before, .tuner-body:after, .notes:after {margin-top: -5vh;}footer {height: 130px;}footer:before {display: none;}footer:after {right: 50%;}.buttons {position: fixed;bottom: 10px;width: 95%;margin: 0 auto;left: 10px;text-align: center;}.buttons button {margin-left: 0;}.buttons:before {content: "";position: absolute;left: 5%;border-top: 1px solid #000;float: left;border-bottom: 1px solid #fff2;width: 90%;top: -17px;height: 0;}.notes:after {display: none;}.notes {left: -7px;}.notes + .notes {right: inherit;left: 70px;}.tuner-body.e-classic .notes {left: 100px;}.tuner-body.e-classic .notes + .notes {left: 175px;}.tuner-body.e-electric:after {left: calc(50% - 10px);}.tuner-body.e-classic .notes:after {display: block;left: calc(50vw - 275px);top: calc(50% - 143px);}.tuner-body.e-classic .notes + .notes:after {display: none;}}/*** MOBILE Portrait ***/@media only screen and (max-height: 400px) {.tuner-body button.string {margin: 0;}.tuner-body button.string:first-child {margin-top: 60px;}.tuner-body.e-electric:after, .tuner-body.e-electric .notes:after {transform: scale(0.735);}.notes:after {left: calc(50vw - 160px);transform: scale(1);}.notes {transform: scale(0.75);}.tuner-body.e-electric .notes:after {transform: scale(1);left: 200px;}.tuner-body.e-classic .notes:after {transform: scale(1.345);left: 256px;}}</style>
</head>
<body>
<section><div class="tuner-body e-electric" id="guitar-body"><button onmouseover="pickString(this.id)" onclick="clickString(this.id)" class="string" id="s6"><span></span></button><button onmouseover="pickString(this.id)" onclick="clickString(this.id)" class="string" id="s5"><span></span></button><button onmouseover="pickString(this.id)" onclick="clickString(this.id)" class="string" id="s4"><span></span></button><button onmouseover="pickString(this.id)" onclick="clickString(this.id)" class="string" id="s3"><span></span></button><button onmouseover="pickString(this.id)" onclick="clickString(this.id)" class="string" id="s2"><span></span></button><button onmouseover="pickString(this.id)" onclick="clickString(this.id)" class="string" id="s1"><span></span></button><div class="notes"><span class="" id="s6Note">E</span><span class="" id="s5Note">A</span><span class="" id="s4Note">D</span><span class="" id="s3Note">G</span><span class="" id="s2Note">B</span><span class="" id="s1Note">E</span></div><div class="notes"><span class="" id="s6Nota">MI</span><span class="" id="s5Nota">LA</span><span class="" id="s4Nota">RE</span><span class="" id="s3Nota">SOL</span><span class="" id="s2Nota">SI</span><span class="" id="s1Nota">MI</span></div><div id="move-pick"></div></div>
</section><footer><div class="slider"><input id="volume" type="range" min="0" max="1" value="0.5" step="0.1" oninput="setVolume(this.value)" onchange="setVolume(this.value)" autocomplete="off"><div class="slider-value">5</div></div><div class="buttons"><button onfocus="stopStrings()" class="" id="btnStop"></button><button onclick="holdSound()" class="" id="btnHold"></button></div><div class="pick"><button onclick="usePick()" class="" id="btnPick"></button></div>
</footer><audio id="as1" src="https://cdn.josetxu.com/audio/egs-1.mp3"></audio>
<audio id="as2" src="https://cdn.josetxu.com/audio/egs-2.mp3"></audio>
<audio id="as3" src="https://cdn.josetxu.com/audio/egs-3.mp3"></audio>
<audio id="as4" src="https://cdn.josetxu.com/audio/egs-4.mp3"></audio>
<audio id="as5" src="https://cdn.josetxu.com/audio/egs-5.mp3"></audio>
<audio id="as6" src="https://cdn.josetxu.com/audio/egs-6.mp3"></audio>
</body></html>
相关文章：
在线吉他调音
先看效果（图片没有声，可以下载源码看看，比这更好~）： 再看代码（查看更多）： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&quo…...
Windows11 Docker Desktop 启动 -wsl kernel version too low
系统环境：windows11 1：docker下载 Docker: Accelerated Container Application Development 下载后双击安装即可 安装后启动Docker提示：Docker Desktop -wsl kernel version too low 处理起来也是非常方便 1:管理员身份启动：…...
Golang 中的 unsafe 包详解
Golang 中的 unsafe 包用于在运行时进行低级别的操作。这些操作通常是不安全的，因为可以打破 Golang 的类型安全性和内存安全性，使用 unsafe 包的程序可能会影响可移植性和兼容性。接下来看下 unsafe 包中的类型和函数。 unsafe.Pointer 类型 通常用于…...
linux 的swap、swappiness及kswapd原理【转+自己理解】
本文讨论的 swap基于Linux4.4内核代码 。Linux内存管理是一套非常复杂的系统，而swap只是其中一个很小的处理逻辑。 希望本文能让读者了解Linux对swap的使用大概是什么样子。阅读完本文，应该可以帮你解决以下问题： swap到底是干嘛的…...
什么是Java中的适配器模式？
Java中的适配器模式（Adapter Pattern）是一种设计模式，它允许我们将一种类的接口转换成另一种类的接口，以便于使用。适配器模式通常用于在不兼容的接口之间提供一种过渡性的接口，从而使代码更加灵活和可维护。 在Java中…...
MYSQL线上无锁添加索引
在需求上线过程中，经常会往一个数据量比较大的数据表中的字段加索引，一张几百万数据的表，加个索引往往要几分钟起步。在这段时间内，保证服务的正常功能运行十分重要，所以需要线上无锁添加索引，即加索引的语…...
如何实现客户自助服务？打造产品知识库
良好的客户服务始于自助服务。根据哈佛商业评论，81% 的客户在联系工作人员之前尝试自己解决问题。92% 的客户表示他们更喜欢使用产品知识库/帮助中心。 所以本文主要探讨了产品知识库是什么，有哪些优势以及如何创建。 产品知识库是什么 产品知识库是将…...
LeetCode环形子数组的最大和（编号918）
目录 一.题目 二.解题思路 三.解题代码 一.题目 918. 环形子数组的最大和 给定一个长度为 n 的环形整数数组 nums ，返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上， nums[i] 的下一个元素是 nums[…...
PhpOffice/PhpSpreadsheet读取和写入Excel
PhpSpreadsheet是一个纯PHP编写的组件库，它使用现代PHP写法，代码质量和性能比PHPExcel高不少，完全可以替代PHPExcel（PHPExcel已不再维护）。使用PhpSpreadsheet可以轻松读取和写入Excel文档，支持Excel的所有…...
jenkins自动化部署Jenkinsfile文件配置
简介 使用jenkins部署时会读取项目中Jenkinsfile文件，文件配置不对会导致部署失败 文件内容 pipeline {agent anyparameters {string(name: project_name, defaultValue: xxx1, description: 项目jar名称)string(name: version, defaultValue: xxx2, description…...
【socket编程简述】TCP UDP 通信总结、TCP连接的三次握手、TCP断开的四次挥手
Socket：Socket被称做 套接字，是网络通信中的一种约定。 Socket编程的应用无处不在，我们平时用的QQ、微信、浏览器等程序.都与Socket编程有关。 三次握手 四次断开 面试可…...
多线程-死锁
/*** 死锁demo*/ public class DeadlockDemo {public static void main(String[] args) {// 创建两个对象final Object resource1 "resource1";final Object resource2 "resource2";// 创建第一个线程Thread t1 new Thread(() -> {// 尝试锁定resour…...
P1006 [NOIP2008 提高组] 传纸条
P1006 [NOIP2008 提高组] 传纸条 题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 思路四维dp三维dp AC四维代码：AC三维代码： 题目描述 小渊和小轩是好朋友也是同班同学，他们在一起总有谈不完的话题。一次素质拓展活动中&#…...
杭电比赛总结
我们的队伍：team013 另外两队：team014、team015 今天是我第一次打杭电，发现杭电多数都是猜结论题 先给一下我们的提交数据 Submit TimeProblem IDTimeMemoryJudge Status4:59:59101115 MS1692 KWrong Answer4:59:55101115 MS1684 KWrong…...
dom靶场
靶场下载地址： https://www.vulnhub.com/entry/domdom-1,328/ 一、信息收集 获取主机ip nmap -sP 192.168.16.0/24netdiscover -r 192.168.16.0/24端口版本获取 nmap -sV -sC -A -p 1-65535 192.168.16.209开放端口只有80 目录扫描 这里扫描php后缀的文件 g…...
go struct 的常见问题
go struct 的常见问题 1. 什么是struct？2. 如何声明、定义和创建一个struct？3. struct和其他数据类型（如数组、切片、map等）有什么区别？4. 如何访问struct字段？5. struct是否支持继承，是否支持重…...
Linux系统下的性能分析命令
在 Linux 系统下，有许多用于性能分析和调试的命令和工具，可以帮助您识别系统瓶颈、优化性能以及调查问题。本文将介绍在性能分析过程中，可能使用到的一些命令。 以下是一些常用的性能分析命令和工具汇总： 命令功能简述top用于实…...
第十三课：QtCmd 命令行终端应用程序开发
功能描述：开发一个类似于 Windows 命令行提示符或 Linux 命令行终端的应用程序 一、最终演示效果 QtCmd 不是因为它是 Qt 的组件，而是采用 Qt 开发了一个类似 Windows 命令提示符或者 Linux 命令行终端的应用程序，故取名为 QtCmd。 上述演示…...
Jmeter进阶使用：BeanShell实现接口前置和后置操作
一、背景 我们使用Jmeter做压力测试或者接口测试时，除了最简单的直接对接口发起请求，很多时候需要对接口进行一些前置操作：比如提前生成测试数据，以及一些后置操作：比如提取接口响应内容中的某个字段的值。举个最常用…...
【知识分享】高防服务器的防御机制
【知识分享】高防服务器的防御机制 易受到攻击的网站选择接入高防服务更安全，大家对于这个都清楚!但是对于高防服务如何实现防御来保障安全的，又了解多少呢?今天壹基比小源（贰伍壹叁壹叁壹贰玖捌）就来说说高防服务实现防御的常规…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
无法与IP建立连接，未能下载VSCode服务器
如题，在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中，选择 环境 -> 常规 ，将其中的颜色主题改成深色 点击确定，更改完成...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...