audio/noiz
2
0
Fork 0
mirror of https://codeberg.org/armin/noiz.git synced 2026-09-01 05:50:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: make waveform fit container width without scrollbar

Browse source
This commit is contained in:
Armin 2026-07-08 17:05:36 +02:00
commit 4932e8079b
1 changed files with 18 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

39
index.html
View file

@ -32,7 +32,7 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.big-time .sep { color: #6b7089; margin: 0 4px; }
.canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; }
.progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.waveform-wrap { flex: 1; overflow-x: auto; overflow-y: hidden; cursor: pointer; position: relative; height: 42px; }
.waveform-wrap { flex: 1; cursor: pointer; position: relative; height: 42px; }
.waveform-wrap canvas { display: block; height: 42px; }
#noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; }
#noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
@ -610,41 +610,34 @@ function drawWaveform() {
const visWidth = wrap.clientWidth;
const canvas = waveformCanvas;
const h = WF_HEIGHT;
canvas.style.height = h + 'px';
if (!t || !t.waveform) {
canvas.style.width = visWidth + 'px';
canvas.style.height = h + 'px';
canvas.width = Math.round(visWidth * dpr);
canvas.height = Math.round(h * dpr);
const ctx = canvas.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.clearRect(0, 0, visWidth, h);
return;
}
if (!t || !t.waveform) return;
const wf = t.waveform;
const totalWidth = wf.len;
const newWidth = Math.max(totalWidth, visWidth);
canvas.style.width = newWidth + 'px';
canvas.style.height = h + 'px';
canvas.width = Math.round(newWidth * dpr);
canvas.height = Math.round(h * dpr);
const ctx = canvas.getContext('2d');
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.clearRect(0, 0, newWidth, h);
const data = wf.data;
const halfH = h / 2;
const ampScale = halfH * 0.85;
let playheadX = -1;
if (audio && audio.duration && t.playtime) {
const pct = audio.currentTime / audio.duration;
playheadX = pct * totalWidth;
playheadX = (audio.currentTime / audio.duration) * visWidth;
}
for (let x = 0; x < visWidth; x++) {
const startIdx = Math.floor((x / visWidth) * wf.len);
const endIdx = Math.floor(((x + 1) / visWidth) * wf.len);
let mn = 0, mx = 0;
for (let i = startIdx; i < endIdx; i++) {
if (data[i * 2] < mn) mn = data[i * 2];
if (data[i * 2 + 1] > mx) mx = data[i * 2 + 1];
}
const data = wf.data;
for (let i = 0; i < wf.len; i++) {
const mn = data[i * 2];
const mx = data[i * 2 + 1];
const y1 = halfH + mn * ampScale;
const y2 = halfH + mx * ampScale;
ctx.fillStyle = playheadX >= 0 && i < playheadX ? '#6b88b0' : '#84a0c6';
ctx.fillRect(i, y1, 1, Math.max(1, y2 - y1));
ctx.fillStyle = playheadX >= 0 && x < playheadX ? '#6b88b0' : '#84a0c6';
ctx.fillRect(x, y1, 1, Math.max(1, y2 - y1));
}
if (playheadX >= 0) {
ctx.strokeStyle = '#e27878';
@ -653,8 +646,6 @@ function drawWaveform() {
ctx.moveTo(playheadX, 2);
ctx.lineTo(playheadX, h - 2);
ctx.stroke();
const targetScroll = playheadX - visWidth / 2;
wrap.scrollLeft = Math.max(0, Math.min(targetScroll, totalWidth - visWidth));
}
}
let tracks = [];