ORIG_HEAD
This commit is contained in:
chuckdaniels
parent
caf59c6c70
commit
5adf4ee228
32
alt.html
32
alt.html
|
|
@ -1,32 +0,0 @@
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>wormTuner</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<link rel="icon" href="/favicon.png" type="image/png" sizes="128x128">
|
|
||||||
<script type="text/javascript" src="radio.js"></script>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<meta property="og:site_name" content="wormTuner">
|
|
||||||
<meta property="og:title" content="wormTuner">
|
|
||||||
<meta property="og:description" content="Worm-crafted radio waves, straight to your computer!">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<center>
|
|
||||||
<img src="banner.png" class='banner' width=384>
|
|
||||||
<div class='player'>
|
|
||||||
<div class='textainer'>
|
|
||||||
<div class='station'></div>
|
|
||||||
<div class='track'></div>
|
|
||||||
<div class='genre'></div>
|
|
||||||
</div>
|
|
||||||
<video controls=1 height=62 width=370></video>
|
|
||||||
</div>
|
|
||||||
</center>
|
|
||||||
<center class='section list'>
|
|
||||||
<div><p>Click on a station to tune in!</p></div>
|
|
||||||
<div class='broadcasts'>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</center>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
166
audiovis.js
166
audiovis.js
|
|
@ -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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
129
style.css
129
style.css
|
|
@ -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;}
|
|
||||||
Reference in New Issue
Block a user