209 lines
5.2 KiB
HTML
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 ▶</div>
|
||
|
|
<div id="metadata"><span id="title"></span><p><span id="listeners"></span></div>
|
||
|
|
</body>
|
||
|
|
</html>
|