Victoria Fierce
dfca30bb66
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
import "https://unpkg.com/butterchurn@2.6.7"
|
|
import "https://unpkg.com/butterchurn-presets@2.4.7"
|
|
import "https://unpkg.com/butterchurn-presets/lib/butterchurnPresetsExtra.min.js"
|
|
|
|
export default class Visualizer {
|
|
butterViz = null;
|
|
canvas = null;
|
|
cycleInterval = null;
|
|
presetCycleLength = 15000;
|
|
|
|
constructor(mediaElement) {
|
|
var audioContext = new AudioContext();
|
|
var mediaSrc = audioContext.createMediaElementSource(mediaElement);
|
|
|
|
this.canvas = document.createElement('canvas');
|
|
this.canvas.className = "butterviz";
|
|
document.body.appendChild(this.canvas);
|
|
this.canvas.width = this.canvas.offsetWidth;
|
|
this.canvas.height = this.canvas.offsetHeight;
|
|
this.butterViz = butterchurn.default.createVisualizer(audioContext, this.canvas , {
|
|
width: this.canvas.width,
|
|
height: this.canvas.height,
|
|
pixelRatio: window.devicePixelRatio || 1,
|
|
textureRatio: 1,
|
|
});
|
|
|
|
mediaSrc.connect(audioContext.destination);
|
|
this.butterViz.connectAudio(mediaSrc);
|
|
|
|
var presets = {};
|
|
if (window.butterchurnPresets) {
|
|
Object.assign(presets, butterchurnPresets.getPresets());
|
|
}
|
|
if (window.butterchurnPresetsExtra) {
|
|
Object.assign(presets, butterchurnPresetsExtra.getPresets());
|
|
}
|
|
|
|
this.cycleInterval = setInterval(() => {
|
|
this.butterViz.loadPreset(_.sample(presets), 5.7);
|
|
}, this.presetCycleLength);
|
|
|
|
$(this.canvas).click(() => {
|
|
this.butterViz.loadPreset(_.sample(presets), 1.0);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
this.butterViz.loadPreset(_.sample(presets));
|
|
}, 0);
|
|
|
|
}
|
|
|
|
resize() {
|
|
this.canvas.width = window.innerWidth;
|
|
this.canvas.height = window.innerHeight;
|
|
this.butterViz.setRendererSize(this.canvas.offsetWidth, this.canvas.offsetHeight);
|
|
}
|
|
|
|
start() {
|
|
if (!document.hidden && this.butterViz) {
|
|
var fps = 60;
|
|
setTimeout(() => {
|
|
requestAnimationFrame(() => {this.start()});
|
|
}, 1000 / fps);
|
|
this.butterViz.render();
|
|
}
|
|
}
|
|
}
|