AudioVisulation/main.js

let style = document.createElement("style");
document.head.appendChild(style);
style.sheet.insertRule(`
    @font-face{
        font-family: ubuntu;
        src: url(ubuntu-medium.ttf);
    }
`);
style.sheet.insertRule(`
    *{
        box-sizing: border-box;
        overflow: hidden;
    }
`);
style.sheet.insertRule(`
    html,body{
        height: 100%;
        margin: 0;
        font-family: Ubuntu;
    }
`);
style.sheet.insertRule(`
    .canvas-presentation{
        width: 100%;
        height: 100%;
    }
`);

let canvas = document.createElement("canvas");
document.body.appendChild(canvas);

let width, height;

function calculateCanvasRect()
{
    let rect = canvas.getClientRects()[0];
    for (const [name, value] of Object.entries({
        width: (width = rect.width)+"px",
        height: (height = rect.height)+"px"
    })) canvas.setAttribute(name,value);
}

document.body.addEventListener("resize", calculateCanvasRect);
window.addEventListener("resize", calculateCanvasRect);

for (const [name, value] of Object.entries({
    role:"presentation",
    class: "canvas-presentation"
})) canvas.setAttribute(name,value);

calculateCanvasRect();

let ctx = canvas.getContext("2d");

ctx.fillRect(50,50,50,50);

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();

/**
 * @type {HTMLAudioElement}
 */
let taudio = document.querySelector("#taudio");

const source = audioCtx.createBufferSource();

fetch("Contra.webm").then(e => e.arrayBuffer()).then(e => {
    audioCtx.decodeAudioData(e).then(e => {
        source.buffer = e;
        source.loop = true;
    })
})

source.connect(analyser);
source.connect(audioCtx.destination);

let started = false;
canvas.addEventListener("click",async ()=>{
    await audioCtx.resume();
    source.start();
    started = true;
},{once:true})

canvas.addEventListener("touchend",async ()=>{
    await audioCtx.resume();
    source.start();
    started = true;
},{once:true})

analyser.fftSize = 2 ** 13;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

let o = 0,k = 0;
document.body.style.transition = `.2s all`;
function RenderWave()
{
    ctx.clearRect(0, 0, width, height);
    analyser.getByteTimeDomainData(dataArray);
    ctx.fillStyle = `rgba(0, 0, 0, 0)`;
    ctx.fillRect(0, 0, width, height);

    let r = (255-((o/k)*5)|0);
    let rx = [Math.max(128, r),Math.max(32, r),Math.max(16, r)];
    document.body.style.backgroundColor = `rgba( ${rx[0]}, ${rx[1]}, ${rx[2]},1)`;
    
    o = 0;
    k = 0;

    ctx.lineWidth = 3;
    ctx.strokeStyle = "rgb(255,0, 0)";
    ctx.beginPath();
    const sliceWidth = width / bufferLength;
    let x = 0;

    for (let i = 0; i < bufferLength; i++) {
        const v = 128 - dataArray[i];
        let V = (v * 1.5) + (height/2);
      
        if(x < 256){
            o += v < 0 ? -v : v;
            k++;
        };

        if (i === 0) {
            ctx.moveTo(x, V);
        } else {
            ctx.lineTo(x, V);
        }
      
        x += sliceWidth;
    }
    ctx.lineTo(width, height / 2);
    ctx.stroke();

    if(!started)
    {
        ctx.font = ((width * .05)|0)+"px ubuntu";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.fillStyle = "black";
        ctx.fillText("Başlatmak için dokunun", width / 2, height / 2);
    }

    requestAnimationFrame(RenderWave)
};

requestAnimationFrame(RenderWave);

let logoContainer = document.createElement("logo");
style.sheet.insertRule(`
    logo{
        position: fixed;
        left: 0;
        top: 0;
        vertical-align: middle;
        font-size: 4vw;
        text-shadow: 0 0 3px white;
    }
`);


let image = document.createElement("img");
image.src = "saQüt.png"
image.classList.add("logo");
let span = document.createElement("span");
span.textContent = "saQüt Software";

style.sheet.insertRule(`
    .logo{
        max-width: 5vw;
        vertical-align: middle;
    }
`);

logoContainer.appendChild(image);
logoContainer.appendChild(span);
document.body.appendChild(logoContainer);




let supportContainer = document.createElement("links");
style.sheet.insertRule(`
    links{
        position: fixed;
        bottom: 0;
        left: 0; right: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;    
    }
`);
style.sheet.insertRule(`
    links > .container {
        background-color: white;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }
`);

let div = document.createElement("div");
div.classList.add("container");

let facebook = document.createElement("img");
facebook.src = "facebook.svg"
facebook.classList.add("icon");
facebook.addEventListener("click",()=> window.open("https://www.facebook.com/saQut/"));

let linkedin = document.createElement("img");
linkedin.src = "linkedin.svg"
linkedin.classList.add("icon");
linkedin.addEventListener("click",()=> window.open("https://www.linkedin.com/in/abdussamed-ulutas"));

let share2 = document.createElement("img");
share2.src = "share-2.svg"
share2.classList.add("icon");
share2.addEventListener("click",()=> window.open("https://www.abdussamedulutas.com.tr"));

let git = document.createElement("img");
git.src = "github.svg"
git.classList.add("icon");
git.addEventListener("click",()=> window.open("https://git.saqut.com"));


style.sheet.insertRule(`
    .icon{
        max-width: 5vw;
        margin: 10px;
        cursor: pointer;
    }
`);

div.appendChild(facebook);
div.appendChild(linkedin);
div.appendChild(share2);
div.appendChild(git);
supportContainer.appendChild(div);
document.body.appendChild(supportContainer);