function Control(
    el,
    { value = 0, min = 0, max = 100, minAngle = 0, maxAngle = 360, wheelSpeed = 0.05, step = 1 } = {}
) {
    const img = document.createElement("img");
    img.src = "1@3x.png";
    el.append(img);

    const ratio = (maxAngle - minAngle) / (max - min);
    const getAngle = () => (value - min) * ratio + minAngle;

    this.setValue = (newValue) => {
        if (newValue > max) newValue = max;
        if (newValue < min) newValue = min;

        if (typeof this.onchange === "function" && newValue !== value) this.onchange(newValue);

        value = newValue;

        img.style.transform = `rotate(${getAngle()}deg)`;
    };

    img.onmousewheel = (event) => {
        const { deltaY } = event;
        //console.log(deltaY)
        this.setValue(value + deltaY * wheelSpeed);
        event.preventDefault();
    };

    img.onclick = (event) => {
        const { layerX } = event;
        if (layerX < img.width / 2) this.setValue(value - step);
        else this.setValue(value + step);
        event.preventDefault();
    };

    const event2Deg = (event) => {
        const { layerX, layerY } = event;
        const { width, height } = img;
        const x = layerX - width / 2;
        const y = height / 2 - layerY;

        //console.log(x, y, width, height)

        return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360;
    };

    let prevAngle = null;

    img.onmousedown = (event) => {
        prevAngle = event2Deg(event);
    };

    img.onmousemove = (event) => {
        if (prevAngle === null) return;

        const currentAngle = event2Deg(event);
        const deltaValue = (prevAngle - currentAngle) / ratio;
        //console.log(prevAngle - currentAngle, deltaValue)
        this.setValue(value + deltaValue);
        prevAngle = currentAngle;
        event.preventDefault();
    };

    img.onmouseup = (event) => {
        prevAngle = null;
    };
    img.onmouseleave = (event) => {
        prevAngle = null;
    };

    this.setValue(value);
    this.getValue = () => value;
}

//пришейте к нему тэг audio для громкости

function setRGB() {
    document.body.style.backgroundColor = `rgba(${red.getValue()},${green.getValue()},${blue.getValue()},1)`;
}

const red = new Control(container1, { min: 0, max: 255 });
red.onchange = setRGB;
const green = new Control(container1, { min: 0, max: 255 });
green.onchange = setRGB;
const blue = new Control(container1, { min: 0, max: 255 });
blue.onchange = setRGB;

////сделать три крутилки для RGB
////и обновлять цвет блока/фона блока при вращении любой из трех

//setTimeout(() => volumeControl.setValue(80), 2000)

const audioTag = document.createElement("audio");
audioTag.id = "audio1";
audioTag.src = "./world_of_warcraft_stormwind.mp3";
audioTag.controls = true;
container1.append(audioTag);

const volumeControl = new Control(container1, {
    value: 0.1,
    min: 0,
    max: 1,
    step: 0.02,
    wheelSpeed: 0.0002,
});
volumeControl.onchange = () => {
    audioTag.volume = volumeControl.getValue();
    console.log(volumeControl.getValue());
};
audioTag.volume = volumeControl.getValue();
console.log(volumeControl.getValue());