hackerbots-live/index.html
2023-02-18 14:14:08 +01:00

209 lines
5.2 KiB
HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>live.hackerbots.net</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script type="text/javascript" src="../dist/butterchurn.js"></script> -->
<script type="text/javascript" src="https://unpkg.com/lodash"></script>
<script type="text/javascript" src="https://unpkg.com/butterchurn"></script>
<script type="text/javascript" src="https://unpkg.com/butterchurn-presets"></script>
<script type="text/javascript" src="https://unpkg.com/butterchurn-presets/lib/butterchurnPresetsExtra.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css" />
<script>
$(function() {
var visualizer = null;
var rendering = false;
var sourceNode = null;
var delayedAudible = null;
var cycleInterval = null;
var presets = {};
var presetKeys = [];
var presetIndexHist = [];
var presetIndex = 0;
var presetCycle = true;
var presetCycleLength = 15000;
var presetRandom = true;
function startRenderer() {
if (!document.hidden && visualizer) {
var fps = 60;
setTimeout(() => {
requestAnimationFrame(startRenderer);
}, 1000 / fps);
visualizer.render();
}
}
function visToggle() {
if (!document.hidden) {
startRenderer();
}
}
document.addEventListener('visibilitychange', visToggle);
function initPlayer() {
var audioContext = new AudioContext();
var mediaElement = document.getElementById('audio-player');
var mediaSrc = audioContext.createMediaElementSource(mediaElement);
//var canvas = document.getElementById('canvas');
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
visualizer = butterchurn.default.createVisualizer(audioContext, canvas , {
width: canvas.width,
height: canvas.height,
pixelRatio: window.devicePixelRatio || 1,
textureRatio: 1,
});
mediaSrc.connect(audioContext.destination);
visualizer.connectAudio(mediaSrc);
var presets = {};
if (window.butterchurnPresets) {
Object.assign(presets, butterchurnPresets.getPresets());
}
if (window.butterchurnPresetsExtra) {
Object.assign(presets, butterchurnPresetsExtra.getPresets());
}
visualizer.loadPreset(_.sample(presets));
cycleInterval = setInterval(() => {
visualizer.loadPreset(_.sample(presets), 5.7);
}, presetCycleLength);
$(canvas).click(() => {
visualizer.loadPreset(_.sample(presets), 1.0);
});
}
function updateMeta() {
$.getJSON('/status.json', (data) => {
var meta = data.icestats.source;
var title = meta.title;
var listeners = meta.listeners;
console.log(data.icestats.source);
$('#title').text(title);
$('#listeners').text(listeners + " listeners");
});
}
updateMeta();
setInterval(updateMeta, 3000);
var isSetup = false;
$('#the-button').click(() => {
if (!isSetup) {
initPlayer();
isSetup = true;
$('#the-button').remove();
startRenderer();
}
});
});
</script>
<style type="text/css">
html, body, #canvas {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
animation: rainbow-bg 10s linear;
animation-iteration-count: infinite;
}
#the-button {
animation: throb 2.5s ease-in-out infinite alternate;
font-family: 'Bungee Spice', cursive;
font-size: 6em;
text-align: center;
}
#metadata {
position: absolute;
bottom: 0%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
color: #fff;
font-family: 'Bungee Spice', sans-serif;
text-align: center;
padding: 3rem;
}
#title {
font-size: 2rem;
}
@keyframes rainbow-bg{
100%,0%{
background-color: rgb(255,0,0);
}
8%{
background-color: rgb(255,127,0);
}
16%{
background-color: rgb(255,255,0);
}
25%{
background-color: rgb(127,255,0);
}
33%{
background-color: rgb(0,255,0);
}
41%{
background-color: rgb(0,255,127);
}
50%{
background-color: rgb(0,255,255);
}
58%{
background-color: rgb(0,127,255);
}
66%{
background-color: rgb(0,0,255);
}
75%{
background-color: rgb(127,0,255);
}
83%{
background-color: rgb(255,0,255);
}
91%{
background-color: rgb(255,0,127);
}
}
@keyframes throb{
from{
transform: scale(1.0);
}
to {
transform: scale(0.75);
}
}
</style>
</head>
<body>
<audio id='audio-player' autoplay src="https://live.hackerbots.net/listen.mp3">No audio</audio>
<div id="the-button">HIT IT, JACK &#9654;</div>
<div id="metadata"><span id="title"></span><p><span id="listeners"></span></div>
</body>
</html>