Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!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

              
                /**/
/* 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;
  }
}
              
            
!

JS

              
                /**/
/* 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);
}

              
            
!
999px

Console