<!DOCTYPE html>
<html lang="en" oncontextmenu="return false;">
<!-- HTML5 tool for Audio Blind Testing
written by Sound Spinning | https://soundspinning.tumblr.com/ -->
<!-- body info starts here ... -->
<body class="container px-2" >
<!--[if lte IE 9]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
  
  <div class="container outer m-0 pt-3 pb-1">

      <div class="row">
        
          <a class="col-3 pl-3 pl-sm-4 pr-0 justify-content-center" href="https://sweetjonny.co.uk/" target="_blank">
            <img class="img-fluid alb-art" src="https://sweetjonny.co.uk/assets/SJ-Logo2018-badge.png">
          </a>
          <span class="navbar-txt col-9 col-sm-8 pl-3 pl-sm-0">
            <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank"><h1 class="mb-0">Sweet Jonny</h1></a>
            <p class="mb-0 pt-1">Garage Rock Band<br>info@sweetjonny.co.uk</p>
          </span>
      </div>

    <h2 class="text-sm-left ml-3 d-flex justify-content-between">Music Badge

    <span data-toggle="tooltip" title="Info" data-placement="left" data-delay="300"><button type="button" class="oi oi-question-mark btn btn-secondary btn-info mr-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-Info" data-whatever="Info" data-dismiss="modal" aria-hidden="true"></button></span>
    
    </h2>

    <!-- accordion panel -->
    <div class="accordion" id="accordionExample">
      <div class="card mb-2 p-1">
        <div class="card-header px-0 pb-2 pt-1" id="headingOne" style="background-color: white;">
          <h3 class="card-tit mb-0">
            <button class="btn btn-link py-1 px-2 mx-2" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">TRACKS</button>
          </h3>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            <!-- Track 1 -->
            <span class=" d-flex justify-content-between">
            <span class="oi oi-audio-spectrum pt-1"></span>
              <h6 class="pt-1">Crack Of the Whip</h6>
              <span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
                <button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T1" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
              </span>
            </span>
            <audio class="w-100" controls preload="metadata">
            <source src="https://www.dropbox.com/s/fiswqrevd8r8s5a/Crack-Of-The-Whip.mp3?dl=1" type="audio/mpeg">
            Your browser does not support the audio tag.</audio> 
            <br>

            <!-- Track 2 -->
            <span class=" d-flex justify-content-between">
            <span class="oi oi-audio-spectrum pt-1"></span>
              <h6 class="pt-1">American Psycho</h6>
              <span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
                <button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T2" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
              </span>
            </span>
            <audio class="w-100" controls preload="metadata">
            <source src="https://www.dropbox.com/s/p0v6q3o4lgh1w2w/American-Psycho.mp3?dl=1" type="audio/mpeg">
            Your browser does not support the audio tag.</audio>
            <br>

            <!-- Track 3 -->
            <span class=" d-flex justify-content-between">
            <span class="oi oi-audio-spectrum pt-1"></span>
              <h6 class="pt-1">Judas Tree</h6>
              <span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
                <button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T3" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
              </span>
            </span>
            <audio class="w-100" controls preload="metadata">
            <source src="https://www.dropbox.com/s/acs3nmamr5g3ov4/JUDAS-TREE.mp3?dl=1" type="audio/mpeg">
            Your browser does not support the audio tag.</audio>
            <br>

            <!-- Track 4 -->
            <span class=" d-flex justify-content-between">
            <span class="oi oi-audio-spectrum pt-1"></span>
              <h6 class="pt-1">Mr Know It All</h6>
              <span data-toggle="tooltip" title="Lyrics" data-placement="top" data-delay="300">
                <button type="button" class="oi oi-copywriting btn btn-secondary btn-info mb-1 px-2 pt-0 pb-1" data-toggle="modal" data-target="#modal-T4" data-whatever="Lyrics" data-dismiss="modal" aria-hidden="true"></button>
              </span>
            </span>
            <audio class="w-100" controls preload="metadata">
            <source src="https://www.dropbox.com/s/a6oz5km46rh0xnb/Mr-Know-It-All.mp3?dl=1" type="audio/mpeg">
            Your browser does not support the audio tag.</audio>
            
          </div>
        </div>
      </div>


      <!-- modal dialogues -->
      <div class="modal fade" id="modal-Info" tabindex="-1" role="dialog" aria-labelledby="modal-Info" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header border-0 pt-3 pb-1 px-1 d-block">
              <h4 class="modal-title mb-1 pl-2">Sweet Jonny</h4>
              <div class="modal-body m-1 pt-1 pb-0">
                  A gutter garage rock band. From a do nothing town, to your new nightmare neighbours.
                  <br>
                  
                  <p class="mt-1"><span class="oi oi-globe p-0 my-0" data-title="globe" aria-hidden="true"></span><a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank"> www.sweetjonny.co.uk</a></p>
                  <p><span class="oi oi-phone p-0 my-0" data-title="phone" aria-hidden="true"></span> Tel: +44 07969 175388</p>
                  <p><span class="oi oi-envelope-closed p-0 my-0" data-title="envelope-closed" aria-hidden="true"></span> Email: info@sweetjonny.co.uk</p>
                  <!-- Free SVG icons for popular brands from https://simpleicons.org/ -->
                  <p class="social-icons m-0">
                    <span class="mr-2"><a href="http://facebook.com/sweeetjonny" target="_blank" data-toggle="tooltip" title="Go to our FB page"><img src="https://sweetjonny.co.uk/fonts/facebook.svg"/></a></span>
                    <span class="mr-2"><a href="http://www.twitter.com/SweeetJonny" target="_blank" data-toggle="tooltip" title="Go to our Twitter page"><img src="https://sweetjonny.co.uk/fonts/twitter.svg"/></a></span>
                    <span class="mr-2"><a href="http://www.youtube.com/user/sweeetjonny" target="_blank" data-toggle="tooltip" title="Visit our YouTube Channel"><img src="https://sweetjonny.co.uk/fonts/youtube.svg"/></a></span>
                    <span class="mr-2"><a href="https://open.spotify.com/artist/0ZYQubU5LJ8rn9RAnrPS7r" target="_blank" data-toggle="tooltip" title="Visit our Spotify channel"><img src="https://sweetjonny.co.uk/fonts/spotify.svg"/></a></span>
                    <span class="mr-2"><a href="https://www.instagram.com/sweeetjonny/" target="_blank" data-toggle="tooltip" title="Visit our Instagram"><img src="https://sweetjonny.co.uk/fonts/instagram.svg"/></a></span>
                    <span class="mr-2"><a href="https://plus.google.com/100067772317415101334" target="_blank" data-toggle="tooltip" title="Visit our Google+ page"><img src="https://sweetjonny.co.uk/fonts/googleplus.svg"/></a></span>
                  </p>
                
              </div>
              <p class="m-0 pt-0 pl-1" style="color: grey;">MB <small>V0.1 &nbsp;06Oct2018 &copy; <a class="btn-link" href="http://soundspinning.tumblr.com" target="_blank">Sound Spinning</a></small></p>
              
              <button type="button" class="oi oi-x btn btn-secondary btn-minus px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
              
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
      <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <div class="modal fade" id="modal-T1" tabindex="-1" role="dialog" aria-labelledby="modal-T1Label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header d-block">
              <h4 class="modal-title pl-1">Crack Of the Whip</h4>
              <div class="modal-body col-12 m-0 p-1">
                <p class="m-0 p-1">
                He said would you a like a lift in his car?<br>
                His name's graffiti-ed on the wall of the bathroom stall like a scar.<br>
                <br>
                Yeah I heard about your wife and how you still carry the ring.<br>
                I heard it was just hearsay what you're insinuating.<br>
                They let him out on Sundays and he drives about the park.<br>
                But give him a fair crack of the whip.<br>
                A crack of the whip.<br>
                <br>
                Jeffery said would you like a lift in his car?<br>
                Sweat drips from his lips and you're stuck to the road like tar.<br>
                Yeah we heard about your wife and how you still carry the ring.<br>
                We heard it was just hearsay what you're insinuating.<br>
                They let him out on Sundays and he's found in kiddies parks.<br>
                But give him a fair crack of the whip.<br>
                A crack of the whip.<br>
                <br>
                I said have you heard what they found in Jeff's car?<br>
                Police men about 10 broke it open with a new crow bar.<br>
                They heard about your wife and how you still carry the ring.<br>
                They said it wasn't hearsay what they're insinuating.<br>
                They let him out on Sunday and they haven't got him back.<br>
                But give him a fair crack of the whip.<br>
                A crack of the whip.
                </p>
              </div>
              
              <button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
            </div>
            <p class="m-0 pl-1" style="color: grey;"><small>&copy; <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
          </div>
          <!-- /.modal-content -->
        </div>
      <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <div class="modal fade" id="modal-T2" tabindex="-1" role="dialog" aria-labelledby="modal-T2Label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header d-block">
              <h4 class="modal-title pl-1">American Psycho</h4>
              <div class="modal-body col-12 m-0 p-1">
                <p class="m-0 p-1">
                I'm the epitome of Yankee dreams I'm vanity fair.<br>
                Behind a carefully constructed facade I am not here.<br>
                She gasps disgusted babe you truly are cramping my style.<br>
                <br>
                I try to quench it, satisfy it don't we have to fit in.<br>
                My pain is constant and it's sharp, it's sharp, it's sharp like the knife.<br>
                I'm flesh, blood, skin, hair and you can shake my hand.<br>
                I think I'm losing it.<br>
                <br>
                A straight J&B to the next white line.<br>
                She throws up later twice back at mine.<br>
                I take two Xanax then I'm feeling fine.<br>
                <br>
                There's nothing inside me put simply I am simply not there.<br>
                It thrives concealed, you can't recoil as it's starting to tear.<br>
                Currently out of my mind before I have to blend in.<br>
                <br>
                American psycho.<br>
                This is not.<br>
                This is not.<br>
                This is not.<br>
                An exit here.<br>
                <br>
                My most attractive quality, I'm emphatically void.<br>
                Your lack of taste disgusts me baby, honey, light of my eye.<br>
                Sedated eyes do realise too late the lock and it snaps.<br>
                <br>
                The television frequently will tell me what to do next.<br>
                My lusts unmentionable, my acts are absolutely mad.<br>
                I'm bloody, flesh, skin, hair and you can shake my hand.<br>
                I think I'm losing it.<br>
                <br>
                A straight J&B to the next white line.<br>
                She throws up later twice back at mine.<br>
                I take two Xanax then I'm feeling fine.<br>
                <br>
                There's nothing inside me put simply I am simply not there.<br>
                It thrives concealed, you can't recoil as it's starting to tear.<br>
                Currently out of my mind before I have to blend in.<br>
                <br>
                Chorus
                </p>
              </div>
              
              <button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
            </div>
            <p class="m-0 pl-1" style="color: grey;"><small>&copy; <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
          </div>
          <!-- /.modal-content -->
        </div>
      <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <div class="modal fade" id="modal-T3" tabindex="-1" role="dialog" aria-labelledby="modal-T3Label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header d-block">
              <h4 class="modal-title pl-1">Judas Tree</h4>
              <div class="modal-body col-12 m-0 p-1">
                <p class="m-0 p-1">
                Oh heavens above. As fickle as love,<br>
                as thick as our blood, now please that's enough.<br>
                Does it hurt to forget? Well I'll help you remember, 
                your son's birthday's September. Just so you know.<br>
                Say that you did. Say that you don't.<br>
                Say the things you did, you didn't do the family tapes, lied it's true.<br>
                Blame the drink. It must be the wine. Oh poor baby.<br>
                The mother, the father, the sister, the brother, the house and the pets and the wife and her lover.<br>
                <br>
                Some secrets best kept, but rumors they spread.<br> 
                Do you live in regret? Sure you loved them I guess.<br>
                So quick tell them all. Tell your friends how you treat them,<br>
                how you never have beat them, how you'd love still to see them.<br>
                Your lies were the best. You cried you're depressed.<br>
                I'm afraid our happy little family, is not all it appears to be.<br>
                Blame the drink. Have the lot. Poor baby.<br>
                The mother, the father, the sister, the brother, the house and the pets, and the wife and her lover.<br>
                <br>
                Lucky you. Loving me. Lucky me. Loving you.<br> 
                Lucky me. Lucky you. Loving me.<br>
                <br>
                Memories I can't remember. First born precious youth offender.<br>
                I won't hurt you accidentally. Judas trees branches hang softly.<br>
                <br>
                All my sympathies bleeds, for your heart oh my baby, 
                such a burden it's clearly something hard to forget.<br>
                Pull the wool over them, your lies don't deceive me,<br>
                she said policemen believe me. How low shall we go.<br>
                I'm vicious, I'm sick. Have a slap and a kick.<br>
                Because the hand that rocks the cradle is the hand that won't get bit.<br>
                Masquerades as a hand. Would you believe it's a fist? You coward.<br>
                The mother, the father, the sister, the brother, the house and the pets, and the wife and her lover.<br>
                <br>
                Memories I can't remember. First born precious youth offender.<br>
                I won't hurt you accidentally. Judas trees branches hang softly.
                </p>
              </div>
              
              <button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
            </div>
            <p class="m-0 pl-1" style="color: grey;"><small>&copy; <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
          </div>
          <!-- /.modal-content -->
        </div>
      <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <div class="modal fade" id="modal-T4" tabindex="-1" role="dialog" aria-labelledby="modal-T4Label" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header d-block">
              <h4 class="modal-title pl-1">Mr Know It All</h4>
              <div class="modal-body col-12 m-0 p-1">
                <p class="m-0 p-1">
                Good, good old grief, good old me.<br>
                Drained and wracked how'd you sleep.<br>
                I've taken forms, forms of many men.<br>
                This bitterness that you taught me.<br>
                <br>
                Well doesn't it just and didn't it always but then you knew I suppose.<br>
                Mr know it all.<br>
                As I watched you as you said it, would you like to grin and bear it Mr know it all.<br>
                But you knew then I suppose.<br>
                <br>
                Good, good old grief, good old me.<br>
                Stink, concede, seeth and stew.<br>
                Greatest advice, to the sweetest end.<br>
                Resentment, loathing then defeat.<br>
                <br>
                Chorus.<br>
                <br>
                My time, my time was all too short.<br> My legacy of guilt.<br>
                The bargaining the fault.<br> Of my failure last resort.<br>
                Amongst the nothingness that you taught me.<br>
                A haunted melody.<br> The bitter ghosts I've seen.<br>
                To stalk and capture me.<br>
                And me I could have had it all.<br> But then I died so long ago.<br>
                Alone and lost along the road.<br>
                And mr know it all knew all.
                </p>
              </div>
              
              <button type="button" class="oi oi-x btn btn-secondary btn-minus mr-1 px-2 py-1" data-dismiss="modal" data-toggle="tooltip" title="Close" data-placement="left" data-delay="300"></button>
            </div>
            <p class="m-0 pl-1" style="color: grey;"><small>&copy; <a class="btn-link" href="https://sweetjonny.co.uk/" target="_blank">Sweet Jonny</a></small></p>
          </div>
          <!-- /.modal-content -->
        </div>
      <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->


    </div>
    <p class="m-0 pt-1 pl-1" style="color: grey;"><small>Made by &copy; <a class="btn-link" href="http://soundspinning.tumblr.com" target="_blank">Sound Spinning</a></small></p>
  </div>


<!-- Scripts -->
  <!-- Bootstrap CDNs -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <!-- CUSTOM JS -->
  <script src="js/audio.js"></script>

</body>
<!-- body ends here ... -->
</html>
/**/
/* CSS for Audio Blind Test app */
/**/
body {
  padding-top: 2vh;
  max-width: 575px !important;
  font-family: 'Rubik', sans-serif;
  /*font-family: 'Roboto', sans-serif;*/
}

.navbar-txt {
  color: #C0C0C0;
  text-align:center;
}

.navbar-txt span {
  font-size: 0.9rem;
}

.alb-art {
  border-radius: 0%;
  min-width: 85px;
}

.outer {
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 128, 0, 0.95);
  border-radius: 10px;
}

h1 {
  font-size: 1.7rem;
}

h2 {
  color: white;
  text-align:center;
  font-size: 1.5rem;
}

h6 {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
}

.card {
  background-color: rgba(255, 128, 0, 0.95);
  border: 1px solid white !important;
  border-radius: 4px !important;
}

.card-tit * {
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  padding: 3px 0 3px 10px;
}

.card-tit:hover * {
  background-color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  color: rgba(255, 128, 0, 1.0);
}

.btn-link {
  color: #C0C0C0;
}

.btn-link:hover, .btn-link:active, .btn-link:focus {
  text-decoration: none;
  color: rgba(255, 128, 0, 1.0);
}

.btn-link, .btn-secondary {
  -webkit-transition: transform 0.3s cubic-bezier(1,1,.43,1.23);
  transition: transform 0.3s cubic-bezier(1,1,.43,1.23);
}

.btn-link:active, .btn-secondary:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}

.modal.fade {
  -webkit-transition: all 0.7s cubic-bezier(1,1,.43,1.23);
  transition: all 0.7s cubic-bezier(1,1,.43,1.23);
}

.modal-header {
  color: white;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-title {
  font-size: 1.2rem;
}

.modal-body {
  background-color: rgba(0, 0, 0, 0.5);
}

.btn-minus {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  font-size: 0.8em;
  border-radius: 10%;
  -webkit-transition: transform 0.3s cubic-bezier(0,.29,0,.29);
  transition: transform 0.3s cubic-bezier(0,.29,0,.29);
}

.btn-minus:hover {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.btn-info {
  -webkit-transition: transform 0.3s cubic-bezier(0,.29,0,.29);
  transition: transform 0.3s cubic-bezier(0,.29,0,.29);
}

.btn-info:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.browserupgrade {
  background-color: white;
  margin-top: 1rem;
  padding: 1rem;
  z-index: 1000;
}

.social-icons * {
  padding: 0;
}

.social-icons img {
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 15%;
  margin-bottom: 0.5rem;
}
/* =================================================
   =         Bootstrap 4.0 Media Queries             =
   ================================================= */

/* ------------ Mobile First Method ------------ */
/*
/* Extra small devices (portrait phones, less than 576px) */ 
@media screen and (max-width : 576px) {
  .list-tit {
    font-size: 1.2rem;
  }
  .navbar-txt {
    font-size: 0.75rem;
  }
}

/* Small devices (landscape phones, 576px and up) */ 
@media screen and (min-width : 576px) {
  .list-tit {
    font-size: 1.75rem;
  }
}
/**/
/* JScript for Audio Blind Test app */
/**/
// Initialize Tooltip
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});
});

// 
// Play/Pause tracks with single play click
// Note: it works on iOS devices
window.onload = init;
function init() {
    document.addEventListener('play', function (e) {
        var allTracks = document.getElementsByTagName('audio');
        for (var i = 0, len = allTracks.length; i < len; i++) {
            if (allTracks[i] != e.target) {
                allTracks[i].pause(); // stop All Sounds except play one
            }
        }
        // this moves onto next track when current one ends
        e.target.addEventListener('ended', function(){
            var indexT = Array.prototype.indexOf.call(allTracks, e.target);
            if (indexT != null) {
                if (indexT == allTracks.length-1) {
                    indexT = -1;
                }
                allTracks[indexT+1].play();
            }
        });
    }, true);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.