JSFiddle - React, Tailwind, and code Playground

by Jonathan_Ironman

HTML

<div class="center">
    <p>Heartbeat</p>
</div>
<img id="mute" src="mute.png" alt="" />
<audio id="music" loop="loop">
    <source src="http://www.soundjay.com/human/heartbeat-01a.mp3" type="audio/mpeg" />
</audio>

CSS

.center {
    font-size: 6em;
    font-weight:bold;
    color: red;
}
body, html {
    height: 100%;
    background: linear-gradient(to bottom, #000000 0%, #30000b 50%, #410110 76%, #4c0012 100%);
}
img {
    display:none;
}

JavaScript

var $audio;
var audioState = 1;
//var i = 1;

$(function () {
    $audio = $('#music');
    $(document).on('click', toggleAudio);
    $audio.prop("volume", 0);

    setTimeout(loop, 1500);
});

function loop() {
    var audio = g('music');
    if (audio.duration > 0 && !audio.paused) {
        $audio.animate({
            volume: 1
        }, 3000);
    } else {
        setTimeout(loop, 800);
        $audio.trigger("play");
        //g('count').innerHTML = i;
        // i++;
    }
}

function toggleAudio() {
    $audio.clearQueue();
    $audio.stop();
    audioState = audioState ? 0 : 1;
    $audio.animate({
        volume: audioState
    }, 1500);
    if (!audioState) $('#mute').fadeIn(1000);
    else $('#mute').fadeOut(1000);
}

function g(id) {
    return document.getElementById(id);
}

function pulse() {
    var target = $('html');

    target.animate({
        'font-size': '100.2%',
            'background-size': '230%'
    }, 200).animate({
        'font-size': '100.1%',
            'background-size': '200%'
    }, 200).delay(200);
}

setInterval(pulse, 2200);