JSFiddle - React, Tailwind, and code Playground

A/B Looper (Tap)

by tonytlwu

HTML

<button id="setA">A (<span id="aTime"></span>)</button>
<button id="setB">B (<span id="bTime"></span>)</button>

<button id="reset">Reset all</button>

<div id="counterDiv"></div>

<audio id="player" controls="">
            <!--<source src="http://traffic.libsyn.com/timferriss/final-timferrissshow-TF-5-morning-rituals___128kbps_REVISED.mp3">-->
    <!--<source src="https://ec-media.sndcdn.com/6IXULTM2cJUy.128.mp3?f10880d39085a94a0418a7ef69b03d522cd6dfee9399eeb9a522059e69f0ba3a703f669b3c0f9d3e21f988a5db0ef9dd888459ba7b274bc2d0eac70adc9c5fd45bb8d37c1b">-->
    <source src="https://ia600409.us.archive.org/26/items/TheWinstons-AmenBrother/B_The_Winstons_-_Amen_Brother.mp3">
        </audio>

CSS

button {
    display: block;
    float: left;
    width: 45%;
    height: 165px;
    background: red;
    line-height: 65px;
    text-align: center;
    margin-top: 10px;
    color: white;
    cursor: pointer;
}

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

JavaScript

var aTime, bTime;
var aTimeContainer = document.getElementById('aTime');
var bTimeContainer = document.getElementById('bTime');
var player = document.getElementById('player');
var counter = document.getElementById('counterDiv');

var isTouch = is_touch_device();

function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}


setTimeout(function(){player.play();},1000);

var getAudioTime = function(){
    return player.currentTime;
};

var setA = function(e){
    e.preventDefault();
    aTime = getAudioTime();
    aTimeContainer.innerHTML = aTime;
};

var setB = function(e){
    e.preventDefault();
    bTime = getAudioTime();
    bTimeContainer.innerHTML = bTime;
    return false;
};

var clickEvent = isTouch ? 'touchstart' : 'mousedown';

document.getElementById('setA').addEventListener(clickEvent,setA,true);
document.getElementById('setB').addEventListener(clickEvent,setB,true);

var loop = function(){
    player.currentTime = aTime;
};


var checkTime = function(event){
    if (typeof aTime === 'number' && typeof bTime === 'number' && this.currentTime >= bTime) {
        loop();
    }
};

var resetAll = function(){
    player.currentTime = 0;
    aTime = null;
    bTime = null;
    aTimeContainer.innerHTML = '';
    bTimeContainer.innerHTML = '';
};

document.getElementById('reset').addEventListener(clickEvent,resetAll,true);

player.addEventListener('timeupdate',checkTime,true);