landingpage.js

window.onload = function () {

    /**
     * Pointers to html elements are prefixed with $
     * Lists of pointers have $$
     */
    var $heartbeatAudio = document.getElementById('heartbeat-audio');
    var $$beating = document.getElementsByClassName('beating');
    var $$beatingFirst = document.getElementsByClassName('beating-first');
    var $$beatingSecond = document.getElementsByClassName('beating-second');
    var $$beatingNumber = document.getElementsByClassName('beating-number');
    var $$beatingColor = document.getElementsByClassName('beating-color');

    var $swapOutFirst = document.getElementById('swap-out-first');
    var $swapOutSecond = document.getElementById('swap-out-second');


    var audioVolume = 0.5;
    $heartbeatAudio.volume = audioVolume;
    var heartbeatListeners = [];
    var heartbeatIndex = 0;
    var heartbeatDuration = 851.088;
    var heartbeatTimeToFirstBeat = 105;
    var heartbeatTimeToSecondBeat = 324;

    console.log('heartbeatDuration: ' + heartbeatDuration);

    /**
     * For iOS we have to trigger the audio start on the first user interaction.
     * This will 'unlock' the audio element so we can later play() at any time.
     * @link https://www.py4u.net/discuss/287774
     */
    var touchStartDone = false;
    window.addEventListener('touchstart', function () {
        if (touchStartDone) {
            return;
        }
        touchStartDone = true;
        console.log('touchstart: START');
        $heartbeatAudio.volume = 0.01;
        $heartbeatAudio.play().catch(function () { /* Ignore erros */ });
        setTimeout(function () {
            $heartbeatAudio.pause();
            $heartbeatAudio.currentTime = 0;
            console.log('touchstart: END');
        }, 1);
    });


    setInterval(function () {
        /**
         * Only run when browser tab is active
         * to not annoy the user with background sound otherwise.
         */
        if (!document.hidden) {
            heartbeatListeners.forEach(function (listener) {
                listener(heartbeatIndex);
            });
            heartbeatIndex = heartbeatIndex + 1;
        }
    }, heartbeatDuration * 1.9);


    // swap out main text on every X heartbeat
    var swapOutTextEveryX = 1;
    var swapOutsDone = 0;
    function swapMainText(index) {
        var textsFirst = [
            'NoSQL',
            'OfflineFirst',
            'JavaScript',
            'observable',
            'reactive',
            'realtime'
        ];
        var textsSecond = [
            'for the Web',
            'for Node.js',
            'for Browsers',
            'for Capacitor',
            'for Electron',
            'for PWAs',
            'for UI apps',
            'you deserve',
            'that syncs',

        ];
        /**
         * Do not directly change the text on the audio start,
         * but wait a bit for the first beat sound.
         */
        setTimeout(function () {
            if (
                index > 2 &&
                index % swapOutTextEveryX === 0
            ) {
                swapOutsDone = swapOutsDone + 1;
                if (swapOutsDone % 2 === 0) {
                    $swapOutFirst.innerHTML = randomOfArray(textsFirst, $swapOutFirst.innerHTML);
                } else {
                    $swapOutSecond.innerHTML = randomOfArray(textsSecond, $swapOutSecond.innerHTML);
                }
            }
        }, heartbeatTimeToFirstBeat);
    }

    // beat sound on heartbeat
    heartbeatListeners.push(function (index) {

        /**
         * This might throw because we cannot play audio when the user
         * has not interacted with the dom yet. 
         **/
        $heartbeatAudio.play()
            .then(function () {

                /**
                 * Only swap out the main text when the audio was playing,
                 * so we ensure that the user interacted with the site.
                 */
                swapMainText(index);

                /**
                 * If play() did not error,
                 * we decrease the volume to
                 * ensure we do not piss of people that are looking
                 * for which browser tab is playing audio.
                 */
                audioVolume = audioVolume * 0.9;
                $heartbeatAudio.volume = audioVolume;
            }).catch(function () {
                /**
                 * This might fail if the user has not already interaced with the UI
                 * and we are not allowed to play sound yet.
                 * Then we just do not play sound and ignore the error.
                 */
            });
    });

    // css animation of big logo on heartbeat
    heartbeatListeners.push(function () {
        Array.from($$beating).forEach(function (element) {
            element.style.animationDuration = heartbeatDuration + 'ms';
            element.classList.remove('animation');
            element.offsetWidth
            element.classList.add('animation');
        });
        Array.from($$beatingFirst).forEach(function (element) {
            element.style.animationDuration = heartbeatDuration + 'ms';
            element.classList.remove('animation');
            element.offsetWidth
            element.classList.add('animation');
        });
        Array.from($$beatingSecond).forEach(function (element) {
            element.style.animationDuration = heartbeatDuration + 'ms';
            element.classList.remove('animation');
            element.offsetWidth
            element.classList.add('animation');
        });
    });

    // increase beating numbers
    heartbeatListeners.push(function () {
        Array.from($$beatingNumber).forEach(function (element) {
            // only increase randomly so it looks more natural.
            if (randomBoolean() && randomBoolean()) {
                setTimeout(function () {
                    var value = parseFloat(element.innerHTML, 10);
                    var newValue = value + 1;
                    element.innerHTML = newValue + '';
                }, heartbeatTimeToFirstBeat);
            }
        });
    });

    // tablet swap color on heartbeat
    var colors = [
        '#e6008d',
        '#8d2089',
        '#5f2688'
    ];
    var lastColorByElementIndex = {};
    heartbeatListeners.push(function () {
        setTimeout(function () {
            Array.from($$beatingColor).forEach(function (element, idx) {
                var isColor = lastColorByElementIndex[idx];
                if (!isColor) {
                    isColor = colors[0];
                }
                var newColor = randomOfArray(colors, isColor);
                lastColorByElementIndex[idx] = newColor;
                element.style.backgroundColor = newColor;
            });
        }, heartbeatTimeToSecondBeat);
    });

};


// UTILS

function randomBoolean() {
    return Math.random() < 0.5;
}
function randomOfArray(array, mustNotBe) {
    var ret;
    while (!ret || ret === mustNotBe) {
        ret = array[Math.floor(Math.random() * array.length)];
    }
    return ret;
}