MaszToZadanieDomowe.com/assets/js/2137.js

class Barka extends HTMLElement  {
    #odtwarzanie = false;

    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: "open" });
    }

    connectedCallback() {
        const styl = document.createElement("style");
        styl.textContent = `
            :host {
                width: 100vw;
                height: 100vh;
                position: fixed;
                top: 0px;
                left: 0px;
                background: #000000;
                z-index: 999999;
            }
            
            audio {
                width: 100%;
            }
            
            canvas {
                width: 40rem;
                height: 25rem;
                margin: auto;
                border: .3rem solid #ffffff;
            }
        `;
        this.shadow.append(styl)
    }

    /**
     * Rozpocznij balange
     */
    async start() {
        if (this.#odtwarzanie) {
            return;
        }
        this.#odtwarzanie = true;

        this.style.display = "none";
        for (const child of this.children) {
            child.remove();
        }

        this.audio = document.createElement("audio");
        this.audio.controls = true;
        this.audio.volume = 0.4;
        {
            const src = document.createElement("source")
            src.src = "/assets/sounds/barka.m4a";
            this.audio.appendChild(src);
        }
        this.audio.addEventListener("playing", ev => {
            if (this.audio.played == 1) {
            }
        })
        try {
            await this.audio.play();
        } catch (err) {
            console.error("Nie udało się puścić barki: ", err)
            this.#odtwarzanie = false;
            return;
        }
        this.shadow.appendChild(this.audio);
        this.style.display = "block";

        this.canvas = document.createElement("canvas");
        this.shadow.appendChild(this.canvas);
        this.ctx2D = this.canvas.getContext("2d");
        this.ctx2D.imageSmoothingEnabled = false;

        this.ctxAud = new AudioContext();
        this.analyser = this.ctxAud.createAnalyser();
        const src = this.ctxAud.createMediaElementSource(this.audio);
        src.connect(this.analyser);

        // LINIJKA SKRADZIONA Z YOUVIDEO PITER NIE OBRAŻ SIE ALE DOSŁOWNIE TYLKO TO SKOPIOWAŁEM I TYLE NA RESZTE NIE PATRZYŁEM
        this.analyser.connect(this.ctxAud.destination);

        this.analyser.fftSize = 2048;
        this.bufferLength = this.analyser.frequencyBinCount;
        this.dataArray = new Uint8Array(this.bufferLength);

        this.#ucyucy();
    }

    stop() {
        this.b
        this.#odtwarzanie = false;
    }

    async #ucyucy() {
        if (this.#odtwarzanie) {
            requestAnimationFrame(async () => {
                await this.#ucyucy()
            });
        }
        this.analyser.getByteTimeDomainData(this.dataArray);

        this.ctx2D.fillStyle = "rgb(13, 13, 24)";
        this.ctx2D.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
        
        this.ctx2D.lineWidth = 2;
        this.ctx2D.strokeStyle = "rgb(203, 166, 247)";
        this.ctx2D.beginPath();
        
        const sliceWidth = this.canvas.clientWidth / this.bufferLength;
        const middle = this.canvas.clientHeight / 2;

        let x = 0;

        let peak = 0;

        for (let i = 0; i < this.bufferLength; i++) {
            const v = this.dataArray[i] / 128.0;
            if (peak < v) {
                peak = v;
            }
            const y = v * middle * (1 - this.audio.volume) / 2;

            if (i == 0) {
                this.ctx2D.moveTo(x, y);
            } else {
                this.ctx2D.lineTo(x, y);
            }

            x += sliceWidth;
        }

        // Finish the line
        this.ctx2D.lineTo(this.canvas.clientWidth, this.canvas.clientHeight / 2);
        this.ctx2D.stroke();

        peak -= 0.5;
        console.log(peak);
        this.style.backgroundColor = `rgb(${255 * peak}, ${255 * peak}, ${255 * peak}`;
    }
}

customElements.define("barka-comp", Barka);

async function start() {
    
    const canvas = document.createElement("canvas");
    canvas.style.width = "40rem";
    canvas.style.height = "25rem";
    root.appendChild(canvas);
    const cvastx = canvas.getContext("2d");
    cvastx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);


    await new Promise(resolve => setTimeout(resolve, 38000))

    const kreciol = document.createElement("img")
    kreciol.src = "https://media1.tenor.com/m/CzW0P5EOQwoAAAAC/jp2gmd-pope.gif";
    kreciol.style.position = "fixed";
    kreciol.style.right = ".5rem";
    kreciol.style.bottom = ".5rem";
    root.appendChild(kreciol);
}

/** @type Barka */
const barka = document.createElement("barka-comp");
document.body.appendChild(barka);
document.addEventListener("DOMContentLoaded", () => {
    barka.start();
});