在线吉他调音
先看效果（图片没有声，可以下载源码看看，比这更好~）：
再看代码（查看更多）：
<!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做压力测试或者接口测试时，除了最简单的直接对接口发起请求，很多时候需要对接口进行一些前置操作：比如提前生成测试数据，以及一些后置操作：比如提取接口响应内容中的某个字段的值。举个最常用…...
【知识分享】高防服务器的防御机制
【知识分享】高防服务器的防御机制 易受到攻击的网站选择接入高防服务更安全，大家对于这个都清楚!但是对于高防服务如何实现防御来保障安全的，又了解多少呢?今天壹基比小源（贰伍壹叁壹叁壹贰玖捌）就来说说高防服务实现防御的常规…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
Xshell远程连接Kali（默认 | 私钥）Note版
前言:xshell远程连接，私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
第7篇：中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中，可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中，必须做到： 🔍 追踪每一条 SQL 的生命周期（从入口到数据库执行）&#…...