78 lines
2 KiB
JavaScript
78 lines
2 KiB
JavaScript
let shaderHandler, gl, c, actx, analyser, peak, isInit = false;
|
|
|
|
function createAudioContextStream(audio) {
|
|
let AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
if (actx) {
|
|
actx.close();
|
|
}
|
|
actx = new AudioContext();
|
|
analyser = actx.createAnalyser();
|
|
let MEDIA_ELEMENT_NODES = new WeakMap();
|
|
let Source;
|
|
|
|
analyser.fftSize = 4096;
|
|
analyser.maxDecibels = 0;
|
|
analyser.smoothingTimeConstant = .4;
|
|
if (audio) {
|
|
if (MEDIA_ELEMENT_NODES.has(audio)) {
|
|
Source = MEDIA_ELEMENT_NODES.get(audio);
|
|
} else {
|
|
Source = actx.createMediaElementSource(audio);
|
|
MEDIA_ELEMENT_NODES.set(audio, Source);
|
|
}
|
|
|
|
Source.connect(analyser);
|
|
analyser.connect(actx.destination);
|
|
audio.oncanplay = () => {
|
|
actx.resume();
|
|
};
|
|
audio.onended = function () {
|
|
actx.pause();
|
|
};
|
|
}
|
|
return null;
|
|
}
|
|
|
|
async function init() {
|
|
c = document.body.querySelector('#c');
|
|
gl = c.getContext("webgl2");
|
|
if (!gl) {
|
|
console.error("GL not found");
|
|
return false;
|
|
}
|
|
shaderHandler = new Shaders(gl);
|
|
await shaderHandler.loadShader("wave", "shaders/");
|
|
|
|
//sphere shader
|
|
await shaderHandler.loadShader("sphere", "shaders/", gl.VERTEX_SHADER);
|
|
return shaderHandler.createProgramForEach(["wave", "sphere"]);
|
|
}
|
|
|
|
function createView() {
|
|
if (!isInit) {
|
|
createAudioContextStream(audioFile);
|
|
init().then(b => {
|
|
if (b) {
|
|
loadConfig();
|
|
draw();
|
|
}
|
|
})
|
|
isInit = true;
|
|
}
|
|
}
|
|
|
|
function initGUI() {
|
|
generateRotationSliders();
|
|
generateColorSliders();
|
|
generateWorldSliders();
|
|
generateDrawSliders();
|
|
generateTranslateSliders();
|
|
}
|
|
|
|
(function () {
|
|
if (document.readyState === "complete" || document.readyState === "interactive") {
|
|
initGUI()
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', initGUI);
|
|
}
|
|
})() |