<div id="gc-cw"><a target="_blank" href="http://www.joeltbennett.com">© 2016 | JTBennett</a>
<a target="_blank" href="https://www.electricherald.com">Visit the <br/><span>Electric Herald </span><br/>for more.</a>
</div>
<div id="bass_tuner_wrap">
<audio id="F_E" preload="auto">
<source src="https://www.electricherald.com/basstuner/F_E_1.mp3"></source>
</audio>
<audio id="P_E" preload="auto">
<source src="https://www.electricherald.com/basstuner/P_E_1.mp3"></source>
</audio>
<audio id="F_A" preload="auto">
<source src="https://www.electricherald.com/basstuner/F_A_1.mp3"></source>
</audio>
<audio id="P_A" preload="auto">
<source src="https://www.electricherald.com/basstuner/P_A_1.mp3"></source>
</audio>
<audio id="F_D" preload="auto">
<source src="https://www.electricherald.com/basstuner/F_D_1.mp3"></source>
</audio>
<audio id="P_D" preload="auto">
<source src="https://www.electricherald.com/basstuner/P_D_1.mp3"></source>
</audio>
<audio id="F_G" preload="auto">
<source src="https://www.electricherald.com/basstuner/F_G_1.mp3"></source>
</audio>
<audio id="P_G" preload="auto">
<source src="https://www.electricherald.com/basstuner/P_G_1.mp3"></source>
</audio>
<div id="tuner_container">
<div id="tuner_pickups">
</div>
<div id="tuner_strings">
<div id="sound_switch"><span>CHANGE<br />TONE</span>
<div id="ss_fing" class="ss_FP">FINGER</div>
<div id="ss_pick" class="ss_FP">PICK</div>
</div>
<div id="string-F_E" class="fing strngPT"></div>
<div id="string-F_E-G" class="string"></div>
<div id="string-F_A" class="fing strngPT"></div>
<div id="string-F_A-G" class="string"></div>
<div id="string-F_D" class="fing strngPT"></div>
<div id="string-F_D-G" class="string"></div>
<div id="string-F_G" class="fing strngPT"></div>
<div id="string-F_G-G" class="string"></div>
<div id="string-P_E" class="pick strngPT"></div>
<div id="string-P_E-G" class="string"></div>
<div id="string-P_A" class="pick strngPT"></div>
<div id="string-P_A-G" class="string"></div>
<div id="string-P_D" class="pick strngPT"></div>
<div id="string-P_D-G" class="string"></div>
<div id="string-P_G" class="pick strngPT"></div>
<div id="string-P_G-G" class="string"></div>
</div>
</div>
</div>
#bass_tuner_wrap {height:450px; width:100%;}
#tuner_container {width:calc(461px / 2);height:calc(789px / 2); position:absolute; top:40px; left:calc(50% - 115px);}
#tuner_pickups {width:100%; height:100%; position:absolute; background:url("https://www.electricherald.com/basstuner/BG-sm.jpg"); background-size:contain;}
#tuner_strings {width:100%; height:100%; position:absolute;
background:url('https://www.electricherald.com/basstuner/Strings-wp.png'); background-repeat:no-repeat; background-size:contain; background-position:center;
}
#sound_switch {height:30px; width:calc(100% - 2px); z-index:500; position:absolute; top:-30px; left:0; background:rgba(255,255,255,.9); border:1px #666 solid;font-weight:bold;font-family:Lato;}
#sound_switch span {text-align:center;font-size:7px; line-height:7px; color:#666;position:absolute;left:calc(50% - 11px); top:8px; cursor:default;}
#ss_fing {float:left;}
#ss_pick {float:right;}
.ss_FP {width:50%;text-align:center;font-size:16px; line-height:28px;cursor:pointer;}
.ss_FP:hover {color:#cc4c4c;}
.ss_FP:active {color:#fff;}
.string { position:absolute; height:100%;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.strngPT:hover + .string {
outline:20px #fff solid; outline-offset:10px; color:#c44c4c; background:rgba(255,255,255,1); opacity:0;
}
.strngPT:active + .string {
outline:2px green solid; outline-offset:0px; background:rgba(255,255,255,0); opacity:1;
}
.fing, .pick {position:absolute; height:100%; z-index:200; cursor: pointer;}
.strngPT {}
#string-F_E {left:13.5%; width:12%;}
#string-F_A {left:34%; width:12%;}
#string-F_D {left:55%; width:12%;}
#string-F_G {left:76%; width:12%;}
#string-P_E {left:13.5%; width:12%;}
#string-P_A {left:34%; width:12%;}
#string-P_D {left:55%; width:12%;}
#string-P_G {left:76%; width:12%;}
#string-F_E-G {left:18.5%; width:2%;}
#string-F_A-G {left:39.5%; width:1.6%;}
#string-F_D-G {left:60.5%; width:1%;}
#string-F_G-G {left:81.6%; width:1%;}
#string-P_E-G {left:18.5%; width:2%;}
#string-P_A-G {left:39.5%; width:1.6%;}
#string-P_D-G {left:60.5%; width:1%;}
#string-P_G-G {left:81.6%; width:1%;}
@media (max-width: 1018px) {
h1 {color:#000;background:rgba(255,255,255,0);}
}
@media (min-width: 1019px) {
h1 {color:#000;background:rgba(255,255,255,.8);}
}
h3.amazon-box-title-1 {margin-bottom:0;padding-bottom:0;text-align:center; text-transform:uppercase;}
h4.amazon-box-title-2 {font-size:14px;font-weight:bold;}
.amazon-box-one-third {float:left; display:inline-block; width:calc(33% - 2px); max-width:370px; max-height:370px; text-align:center; margin:0; padding:0;}
.amazon-box-two-thirds {float:right; display:inline-block; width:calc(66% - 2px); text-align:center;}
a.amazon-buy-now-btn {display:block; margin:0 auto 0 auto; width:100px; height:30px; border:1px #ddd solid; padding:0; line-height:27px; background:rgba(228,121,17,1); text-align:center; text-decoration:none; color:#fff;
box-shadow:1px 1px 2px #ddd;border-radius:2px;}
a.amazon-buy-now-btn:hover {text-decoration:none; box-shadow:1px 1px 2px #555;}
a.amazon-buy-now-btn:active {text-decoration:none; color:#fafafa; box-shadow:1px 1px 2px #555 inset;}
@media (max-width: 680px) {
.amazon-box-wrap {position:relative; width:100%; display:inline-block; text-align:center; margin-top:50px; border-top:1px #ccc solid;}
#amazon-divider {display:none;}
.amazon-box-half-left {float:left; display:block; width:100%;border-bottom:1px #eee solid;}
.amazon-box-half-right {float:left; display:block; width:100%;}
}
@media (min-width: 681px) {
.amazon-box-wrap {position:relative; width:100%; display:inline-block; text-align:center; margin-top:30px; border-top:1px #ccc solid;}
#amazon-divider {position:absolute;left:50%;top:50%;height:40%;width:1px;background:#eee;}
.amazon-box-half-left {float:left; display:inline-block; width:45%;}
.amazon-box-half-right {float:right; display:inline-block; width:45%;}
}
#gc-cw {font-family:lato; position:absolute; top:0; left:20px; font-size:10px;}
#gc-cw a {text-decoration:none; color:#000; display:block; margin-top:8px; width:100%;text-align:center;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;}
#gc-cw a:hover {outline:10px #fff solid;color:#c44c4c;}
#gc-cw a:active {outline:1px #f00 solid;}
#gc-cw a span {font-weight:bold;font-size:11px;line-height:11px;}
jQuery(document).ready(function($){
jQuery(".pick").hide();
jQuery("#ss_fing").click(function(){
jQuery(".pick").hide(),
jQuery(".fing").show();
});
jQuery("#ss_pick").click(function(){
jQuery(".fing").hide(),
jQuery(".pick").show();
});
function cloneAndPlay(audioNode) {
var clone = audioNode.cloneNode(true);
clone.play();
}
jQuery("#string-F_E").mousedown(function() {
cloneAndPlay(F_E);
});
jQuery("#string-F_A").mousedown(function() {
cloneAndPlay(F_A);
});
jQuery("#string-F_D").mousedown(function() {
cloneAndPlay(F_D);
});
jQuery("#string-F_G").mousedown(function() {
cloneAndPlay(F_G);
});
jQuery("#string-P_E").mousedown(function() {
cloneAndPlay(P_E);
});
jQuery("#string-P_A").mousedown(function() {
cloneAndPlay(P_A);
});
jQuery("#string-P_D").mousedown(function() {
cloneAndPlay(P_D);
});
jQuery("#string-P_G").mousedown(function() {
cloneAndPlay(P_G);
});
});
Also see: Tab Triggers