Metronome

metronome.jsx

import React, {useState} from "react";
import {useInterval} from "../Common/timers";

import Tick from '../static/sounds/tick.wav';

export default function Metronome(props)
{
    let [delay, setDelay] = useState(1000);
    let [startTime, setStartTime] = useState(null);
    let [r, setR] = useState(255);
    let [g, setG] = useState(255);
    let [b, setB] = useState(255);
    let [tickSound] = useState(new Audio(Tick));

    function PlaySound()
    {
        tickSound.play();
        setStartTime(new Date());
    }

    function UpdateColor()
    {
        let ms = new Date() - startTime;
        let gray = Math.max(0, Math.min(255, (ms / delay) * 255 ));

        setR(gray);
        setG(gray);
        setB(gray);
    }

    function CurrentColor()
    {
        let color = `rgb(${r}, ${g}, ${b})`;
        return color;
    }

    useInterval(() => PlaySound(), delay);

    return (
        <div>
            <div style={{backgroundColor: CurrentColor(), display: 'inline-block'}}>
                <input
                    type='range'
                    min='1'
                    max='2000'
                    value={delay}
                    onChange={(e) => setDelay(e.target.value)}
                />
            </div>
            <label>{delay}</label>
        </div>
    );
}