JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
    <div id="timer">click play</div>
    <a href="#" id="btn_start">PLAY</a>
</div>


<audio id="audiosource">
    <source src="http://www.virtuagym.com/audio/en/get_ready.mp3" type="audio/mpeg" />
    <source src="http://www.soundjay.com/button/button-1.wav" type="audio/wav" />
</audio>


<audio  id="a_1" >
    <source src="http://www.virtuagym.com/audio/en/1.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/en/1.mp3" type="audio/mp3" />
</audio>
<audio  id="a_2" >
    <source src="http://www.virtuagym.com/audio/en/2.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/en/2.mp3" type="audio/mp3" />
</audio>
<audio   id="a_3" >
    <source src="http://www.virtuagym.com/audio/en/3.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/en/3.mp3" type="audio/mp3" />
</audio>
<audio id="a_4" >
    <source src="http://www.virtuagym.com/audio/en/4.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/en/4.mp3" type="audio/mp3" />
</audio>
<audio  id="a_5" >
    <source src="http://www.virtuagym.com/audio/audio/en/5.ogg" type="audio/ogg" />
    <source src="http://www.virtuagym.com/audio/en/5.mp3" type="audio/mp3" />
</audio>

JavaScript

(function ($) {
    // function to play sounds, calls `done` when sounds are finished to play
    // here you should adjust timings for your audio
    var playGetReady = function (done) {
        var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
            playNext = function () {
                var id = ids.shift();
                document.getElementById(id).play();
                if (ids.length) {
                    setTimeout(playNext, 1000);
                } else {
                    done();
                }
            };
        playNext();
    };

    // constructor
    function App($el, startFrom) {
        this.$el = $el; // root element
        this.$timer = this.$('#timer'); // find element to render countdown to
        this.$button = this.$('#btn_start'); // play/pause button
        // $.proxy(fn, ctx); makes `ctx` to be referenced by `this` inside `fn`
        // sets handler on button
        this.$button.click($.proxy(this.buttonHandler, this));
        // sets value to start countdown
        this.set(startFrom);
        // we're not running yet
        this.intervalHandle = null;
    };

    // look for elements inside of root element
    App.prototype.$ = function () {
        return this.$el.find.apply(this.$el, arguments);
    };

    // called on play/pause button click
    App.prototype.buttonHandler = function (e) {
        e.preventDefault(); // prevent anchor default action
        this.toggle(); // toggle play/pause
    };

    App.prototype.start = function () {
        var self = this,
            start = function () {
                // start countdown
                self.intervalHandle = setInterval($.proxy(self.tick, self), 1000);
                // change button text to PAUSE
                self.$button.text('PAUSE');
            };
        if (this.newTimer) {
            playGetReady(start);
        } else {
            start();
        }
    };

    App.prototype.stop = function () {
        // stop...