@@ -1,5 +1,6 @@
(function(){
const canvasDom = document.getElementById("canvas");
const twiDom = document.getElementById("canvasTwi");
const peakColorLeftDom = document.getElementById("peakColorLeft");
const peakOpacityLeftDom = document.getElementById("peakOpacityLeft");
@@ -22,6 +23,7 @@
rmsOpacityRightDom.addEventListener("input", refresh, false);
var songsJson = null;
var twiJson = null;
reload();
function reload() {
@@ -31,10 +33,49 @@
refresh();
});
});
fetch("data.twi.decoded.json").then(function(response) {
response.json().then(function(results) {
twiJson = results;
refresh();
});
});
}
function refresh() {
draw(canvasDom, songsJson[0]);
drawTwi(twiDom, twiJson);
}
function drawTwi(canvas, songJson) {
const ctx = canvas.getContext("2d");
const width = songJson.length;
const height = 256;
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
drawPeak(canvas, songJson, width, height, 0, peakColorLeftDom.value, +peakOpacityLeftDom.value);
//drawPeak(canvas, songJson, width, height, split, peakColorRightDom.value, +peakOpacityRightDom.value);
drawRms(canvas, songJson, width, height, 0, rmsColorLeftDom.value, +rmsOpacityLeftDom.value);
//drawRms(canvas, songJson, width, height, split, rmsColorRightDom.value, +rmsOpacityRightDom.value);
}
function drawPeakTwi(canvas, songJson, width, height, offset, color, opacity) {
const ctx = canvas.getContext("2d");
ctx.globalAlpha = opacity;
ctx.beginPath();
ctx.strokeStyle = color;
for (let x = 0; x < width; x += 1) {
const min = 0;
const max = songJson[offset + x];
const min_y = height - (127 - min) / 256 * height;
const max_y = height - (127 - max) / 256 * height;
ctx.moveTo(x + 0.25, max_y);
ctx.lineTo(x + 0.25, min_y);
}
ctx.stroke();
}
function draw(canvas, songJson) {
@@ -42,16 +83,16 @@
const split = songJson.length / 2;
const width = split / 3;
const height = 256;
canvasDom.width = width;
canvasDom.height = height;
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
drawPeak(canvas, songJson, width, height, 0, peakColorLeftDom.value, +peakOpacityLeftDom.value);
drawPeak(canvas, songJson, width, height, split, peakColorRightDom.value, +peakOpacityRightDom.value);
//drawPeak(canvas, songJson, width, height, split, peakColorRightDom.value, +peakOpacityRightDom.value);
drawRms(canvas, songJson, width, height, 0, rmsColorLeftDom.value, +rmsOpacityLeftDom.value);
drawRms(canvas, songJson, width, height, split, rmsColorRightDom.value, +rmsOpacityRightDom.value);
//drawRms(canvas, songJson, width, height, split, rmsColorRightDom.value, +rmsOpacityRightDom.value);
}
function drawPeak(canvas, songJson, width, height, offset, color, opacity) {