/*author: Luis calderon*/ let analyser = null, notes = new Set, iframe = null, screen = null, renderer = null; async function main() { let bars = {}; screen = new Screen(innerWidth, innerHeight); screen.setStyle({ font: "20px sans-serif" }) screen.listenResize(window); initTouchEvents(screen, notes); $("#analyser").appendChild(screen.canvas); bars = { width: 2, height: 100, margin: 1.5, color: "#3ae9ff" }; analyser = new AudioAnalyser($("#audio"), bars); renderer = new Renderer(dt => { screen.context.clearRect(0, 0, innerWidth, innerHeight); analyser.draw(screen.context, screen.canvas.height); notes.forEach(note => { if (note.update(dt)) notes.delete(note); note.render(screen.context); }); }); //Set bars style document.documentElement.style.setProperty("--bars-color", analyser.config.color); $("#color").value = analyser.config.color; $("#color").oninput = function () { analyser.config.color = this.value; document.documentElement.style.setProperty("--bars-color", this.value); } listenSettings(); listenProfileViewer(); createRangeInputs() songNameAnimation(); renderer.start(); $("#audio").play(); } window.onload = async () => { listenRippleEvent(window); await new Confirm({ title: "Tips", content: "Move your finger on screen and you will see the magic.

for pc: mouse down and mose move.

Wear headphones for a better experience.", textBtn: "Continue", }).listen(); new Confirm({ title: "Confirm", content: "User interaction is required", onclick: main, textBtn: "Interact" }).listen(); }; /*functions*/ const $ = selectors => document.querySelector(selectors); const random = (min, max, fixed) => Number((Math.random() * (max - min) + min).toFixed(fixed)); const sleep = milis => new Promise(resolve => setTimeout(resolve, milis)); function createElement(type, cssClass) { const element = document.createElement(type); element.classList.add(cssClass); return element; } function listenRippleEvent(window) { window.addEventListener("click", ({ clientX, clientY, target }) => { const ripple = document.createElement("span"); ripple.classList.add("ripple") ripple.style.left = `${clientX}px`; ripple.style.top = `${clientY}px`; document.body.appendChild(ripple); $("body").style.setProperty("--left", `${clientX + target.offsetLeft}px`); $("body").style.setProperty("--top", `${clientY + target.offsetTop + window.pageYOffset}px`) setTimeout(() => { ripple.remove(); }, 2000) }) } function listenSettings() { $("#settings-btn").onclick = () => { $("#settings-btn").classList.toggle("active"); $("#menu").classList.toggle("active"); } } function listenProfileViewer() { $("#openProfile").onclick = () => { if (iframe === null) { iframe = document.createElement("iframe"); iframe.src = "https://sl-profile-viewer.web.app/?id=9374228&colors=128" $("#profileViewer").appendChild(iframe); } $("#profileViewer").classList.add("active"); $("#profileHeader").classList.add("active") } $("#back").onclick = () => { $("#profileViewer").classList.remove("active"); $("#profileHeader").classList.remove("active") } } function createRangeInputs() { for (let element of document.querySelectorAll(".range")) { const { max, value, name } = element.dataset; const range = new RangeSlider({ max, value, oninput: (e) => { analyser.config[name] = e.target.value; } }); $(`#${name}`).appendChild(range); } } function initTouchEvents() { let touching = false; screen.canvas.onclick = ({ clientX, clientY }) => { notes.add(new Note(clientX, clientY)) } ["touchend", "mouseup"].forEach(eventType => { screen.canvas.addEventListener(eventType, () => { touching = false; }) }); ["touchstart", "mousedown"].forEach(eventType => { screen.canvas.addEventListener(eventType, () => { touching = true; }) }) screen.canvas.ontouchmove = ({ touches }) => { const { clientX, clientY } = touches[0]; notes.add(new Note(clientX, clientY)) } screen.canvas.onmousemove = ({ clientX, clientY }) => { if (touching) { notes.add(new Note(clientX, clientY)) } } } async function songNameAnimation() { const container = document.querySelector(".animateText"); const txt = container.dataset.text; for (let i = 0; i < txt.length; ++i) { const letter = document.createElement("span"); letter.innerHTML = txt[i]; container.appendChild(letter); await sleep(20); letter.classList.add("fade"); } } /*classes*/ class Confirm { constructor(options) { this.options = options; this.button = null; this.overlay = null; this.create(); } remove() { document.body.removeChild(this.overlay); } listen() { return new Promise(resolve => { this.button.addEventListener("click", () => { if (this.options.onclick) this.options.onclick(); resolve(); this.remove(); }); document.body.appendChild(this.overlay); }) } create() { const { title, content, textBtn } = this.options; this.overlay = createElement("div", "overlay"); const container = createElement("div", "box"); container.innerHTML = `

${title}

${content}

`; this.button = createElement("button", "confirmBtn"); this.button.textContent = textBtn; container.appendChild(this.button); this.overlay.appendChild(container); } } class RangeSlider { constructor(attributes) { this.attrs = attributes; this.slider = null; this.counterElem = null; this.oninput = attributes.oninput; this.container = this.create(); this.initSlider(); this.listenInput(); return this.container; } initSlider() { this.slider.type = "range"; this.slider.step = this.attrs.max > 10 ? 1 : 0.1; this.slider.min = 0; this.slider.max = this.attrs.max; this.slider.value = this.attrs.value; } setStyles(value) { const percent = 100 / this.attrs.max * value; this.counterElem.dataset.value = value; this.counterElem.style.left = `${percent}%`; this.counterElem.style.transform = `translateX(-${percent}% )` this.slider.style.background = `linear-gradient(90deg,#2196f3 ${percent}%,#fff ${percent}%)` } listenInput() { this.slider.oninput = () => { this.setStyles(this.slider.value) } this.slider.addEventListener("input", this.oninput) } create() { const container = createElement("div", "slider-container"); this.counterElem = createElement("div", "counter"); this.counterElem.dataset.value = this.attrs.value || 0; this.slider = document.createElement("input"); this.setStyles(this.attrs.value); container.appendChild(this.slider); container.appendChild(this.counterElem); return container; } } class Screen { constructor(width, height) { this.canvas = document.createElement("canvas"); this.canvas.width = width; this.canvas.height = height; this.context = this.canvas.getContext("2d"); } setStyle(styles) { for (let styleName in styles) { this.context[styleName] = styles[styleName]; } this.styles = styles; } listenResize(window) { window.onresize = () => { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; this.setStyle(this.styles); } } } class AudioAnalyser { constructor(audio, config) { this.audio = audio; this.config = config; this.audioCtx = new AudioContext(); this.analyser = this.audioCtx.createAnalyser(); this.fbcArray = null; this.source = this.audioCtx.createMediaElementSource(audio); this.source.connect(this.analyser); this.analyser.connect(this.audioCtx.destination); } draw(context, bottom) { const { width, height, margin } = this.config if (width == 0 || height == 0) return; context.fillStyle = this.config.color; this.fbcArray = new Uint8Array(this.analyser.frequencyBinCount); this.analyser.getByteFrequencyData(this.fbcArray); let barX = 0, barHeigth = 0; for (let i = 0; i < innerWidth / this.config.width; i++) { barX = i * this.config.margin + i * this.config.width; barHeigth = (this.fbcArray[i]) * (this.config.height / 100); context.fillRect(barX, bottom, this.config.width, -barHeigth); } } } class Vector { constructor(x = 0, y = 0) { this.x = x; this.y = y; } } class Note { constructor(x, y) { this.size = 40; this.pos = new Vector(x, y); this.vel = new Vector(random(-0.1, 0.1, 3), random(0.1, 0.25, 3)); } update(dt) { this.pos.y -= dt * this.vel.y; this.pos.x += dt * this.vel.x; this.size -= dt * 0.02; return this.size <= 0; } render(context) { context.drawImage($("#note"), this.pos.x, this.pos.y, this.size, this.size); } } class Renderer { constructor(callback) { this.callback = callback; this.lastTime = 0; this.dt = 0; this.request = null; this.update = milis => { this.dt = milis - this.lastTime; if (milis && this.dt) this.callback(this.dt); this.lastTime = milis; this.request = requestAnimationFrame(this.update); } } start() { this.update(); this.request = requestAnimationFrame(this.update); } }

Mozart audio analyser 🎻🎶