diff --git a/alt.html b/alt.html deleted file mode 100644 index 20e9a21..0000000 --- a/alt.html +++ /dev/null @@ -1,32 +0,0 @@ - - - wormTuner - - - - - - - - - - -
- -
-
-
-
-
-
- -
-
-
-

Click on a station to tune in!

-
- -
-
- - diff --git a/audiovis.js b/audiovis.js deleted file mode 100644 index 01b7b29..0000000 --- a/audiovis.js +++ /dev/null @@ -1,166 +0,0 @@ -/* wormTune Audio Visualizer */ - -var modes = ["None", "Bars","Scope","Spectrogram","Laser Rain"]; -var drawRequest = 0; -var renderInverval; - -function createVisualizer(player, context) { - var audioSrc = context.createMediaElementSource(player); - analyser = context.createAnalyser(); - - var canvas = document.querySelector("canvas.vis"); - - audioSrc.connect(analyser); - analyser.connect(context.destination); - - setVisualizer(canvas, analyser, 0); - - return analyser; -}; - -function setVisualizer(canvas, analyser, mode = 0) { - if (!analyser) return; - clearInterval(renderInverval); - var ctx = canvas.getContext("2d",{antialias: false,alpha: false}); - - var WIDTH = canvas.width; - var HEIGHT = canvas.height; - - // Set the "defaults" - analyser.smoothingTimeConstant = 0.8; - analyser.fftSize = 2048; - - if (mode != -1) canvas.height = 96; - - window.cancelAnimationFrame(drawRequest); - if (mode == -1) { // VIDEO MODE - canvas.height = canvas.width / 4 * 3; - renderInverval = window.setInterval(() => { - ctx.drawImage(audioPlayer, 0, 0, WIDTH, HEIGHT); - }, 1000 / 24); - } else if (mode == 0 || mode > modes.length - 1) { - function draw() { - drawRequest = window.requestAnimationFrame(draw); - - ctx.clearRect(0,0,WIDTH,HEIGHT); - - ctx.font = "16px Pixio"; - ctx.fillStyle = "#FFF"; - ctx.textAlign = "center"; - ctx.fillText("Click here to cycle visualizations.", WIDTH/2,HEIGHT/2); - } - draw(); - } else if (mode == 1) { // BAR - analyser.fftSize = 256; - var bufferLength = analyser.frequencyBinCount; - var dataArray = new Uint8Array(bufferLength) - - var barWidth = (WIDTH / bufferLength) * 2.5; - var barHeight; - - function draw() { - ctx.clearRect(0, 0, WIDTH, HEIGHT); - drawRequest = window.requestAnimationFrame(draw); - - analyser.getByteFrequencyData(dataArray); - ctx.fillStyle = "#FFF"; - - var x = 0; - - ctx.beginPath(); - for (var i = 0; i < bufferLength; i++) { - barHeight = (dataArray[i] / 256) * HEIGHT; - ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight); - x += barWidth + 1; - } - ctx.closePath(); - } - draw(); - } else if (mode == 2) { // SCOPE - analyser.smoothingTimeConstant = 0; - var dataArray = new Uint8Array(analyser.fftSize) - - function draw() { - ctx.clearRect(0, 0, WIDTH, HEIGHT); - drawRequest = window.requestAnimationFrame(draw); - - analyser.getByteTimeDomainData(dataArray); - const step = WIDTH / dataArray.length; - - ctx.strokeStyle = "#0F0"; - - ctx.beginPath(); - for (let i = 0; i < dataArray.length; i += 2) { - const percent = dataArray[i] / 256; - const x = i * step; - const y = HEIGHT * percent; - ctx.lineTo(x, y); - } - ctx.stroke(); - } - draw(); - } else if (mode == 3) { // SPECTROGRAM - analyser.smoothingTimeConstant = 0; - - var tempCanvas = document.createElement("canvas"), - tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = WIDTH; - tempCanvas.height = HEIGHT; - - analyser.fftSize = Math.pow(2, Math.ceil(Math.log(WIDTH)/Math.log(2))); - - var bufferLength = analyser.frequencyBinCount; - var dataArray = new Uint8Array(bufferLength); - - var start = new Date(); - //ctx.clearRect(0,0,WIDTH,HEIGHT); - function draw() { - drawRequest = window.requestAnimationFrame(draw); - - analyser.getByteFrequencyData(dataArray); - var barHeight = WIDTH/analyser.fftSize; - - var now = new Date(); - if (now < new Date(start.getTime() + 20)) { return; } - start = now; - - tempCtx.drawImage(ctx.canvas, 0, 0, WIDTH, HEIGHT); - - for (var i = 0; i < dataArray.length; i++) { - var value = dataArray[i]; - ctx.fillStyle = 'rgb('+((value > 190) ? 255 : value)+', '+ ((value > 220) ? 255 : value-100) +', 0)'; - ctx.fillRect(WIDTH - 1, HEIGHT - i*barHeight, 1, barHeight); - } - ctx.translate(-1, 0); - ctx.drawImage(tempCanvas, 0, 0, WIDTH, HEIGHT, 0, 0, WIDTH, HEIGHT); - ctx.setTransform(1, 0, 0, 1, 0, 0); - } - draw(); - } else if (mode == 4) { // RUNWAY - analyser.smoothingTimeConstant = 0.2; - - var bufferLength = analyser.frequencyBinCount; - var dataArray = new Uint8Array(bufferLength); - - //ctx.clearRect(0,0,WIDTH,HEIGHT); - function draw() { - drawRequest = window.requestAnimationFrame(draw); - - analyser.getByteFrequencyData(dataArray); - - ctx.clearRect(0,0,WIDTH,HEIGHT); - for (var i = 0; i < dataArray.length; i++) { - if (dataArray[i] == 0) continue; - ctx.fillStyle = 'rgb('+dataArray[i]/4+','+dataArray[i]/2+','+dataArray[i]+')'; - ctx.fillRect((WIDTH / 2)+i, 0, 1, HEIGHT); - ctx.fillRect((WIDTH / 2)-(i+1), 0, 1, HEIGHT); - } - // You are probably wondering how I got here, huh? Questioning my very sanity. Or maybe you completely understand, and as a web-developer, very well know the experience of bending the knees for Chrome in order to get something working that already works everywhere else. Since I've explained it, I think regardless, you understand now. - ctx.font = "16px Pixio"; - ctx.fillStyle = "#4080FF0A"; - ctx.textAlign = "center"; - ctx.fillText("0x4655434B204348524F4D45",WIDTH/2,HEIGHT/2); - } - draw(); - } -} diff --git a/dir.png b/dir.png deleted file mode 100644 index 6d3e8bd..0000000 Binary files a/dir.png and /dev/null differ diff --git a/style.css b/style.css deleted file mode 100644 index c616d95..0000000 --- a/style.css +++ /dev/null @@ -1,129 +0,0 @@ -:root { - --background: #b3a99e; - --primary: #f3dca9; - --border: #f2e5c8; - - --station-primary: #d0d0d0; - --station-border: #a4a4a4; - - --station-selected: #d0dadf; - --station-selected-border: #0088ff; - - --about-color: #b9a77f; - --about-indent: #000000AA; -} - -body { - background: var(--background); - background-repeat: repeat; -} - -canvas.vis { - border: 2px inset var(--border); - background: black; - margin: 4px; -} - -.player { - background: var(--primary); - border: 2px outset var(--border); - width: 384px; -} - -.textainer { - display: flex; - flex-direction:column; - line-height: 24px; - text-align: left; - flex-grow: 1; - padding: 2px; - overflow: hidden; - text-align: center; -} -.textainer .station { font-weight: bold; } -.textainer .genre { font-style: italic; display: none; } -.textainer > div { white-space: nowrap; } -.textainer > div.overflow { - -moz-animation: scroll-left 2s linear infinite; - -webkit-animation: scroll-left 2s linear infinite; - animation: scroll-left 20s linear infinite; -} - -.section { - display: flex; - flex-direction: column; -} - -.broadcasts .station { - background: var(--station-primary); - color: black; - border: 1px outset var(--station-border); - padding: 4px; - margin: 16px; - text-align: left; - cursor: pointer; - width: 360px; - display: inline-block; - vertical-align:top; -} - -.broadcasts .station.selected { - outline: 2px solid var(--station-selected-border); - background: var(--station-selected); -} - -.broadcasts .station hr { - margin: 2px 0px; - border: 1px solid #a4a4a4; - width: 100%; -} - -.titlebar { - display: flex; -} - -.infobar { - display: flex; - gap: 8px; -} - -.broadcasts .station .listeners img { - margin-right: 2px; -} - -.list { - flex-grow: 1; -} - -.vol, -.vismode { - pointer-events: none; - position: relative; - height: 0; - text-shadow: 0px 0px 5px black; - color: white; -} - -.vol { - top: -32px; - white-space: pre; -} - -.vismode { - top: 8px; - text-align: right; - right: 16px; -} - -.vol.hidden, -.vismode.hidden { - display: none; -} - -.about { - display: flex; - margin: -8px 0px 0px 0px; - text-shadow: -1px -1px 0px var(--about-indent); - padding: 4px 8px; -} -.about, .about a, .about a:link, .about:visited {color: var(--about-color);text-decoration: none;} diff --git a/url.png b/url.png deleted file mode 100644 index bfc1b9d..0000000 Binary files a/url.png and /dev/null differ diff --git a/users.png b/users.png deleted file mode 100644 index 71a4833..0000000 Binary files a/users.png and /dev/null differ