diff --git a/editor.py b/editor.py index 6b20070..256d6e7 100644 --- a/editor.py +++ b/editor.py @@ -876,7 +876,7 @@ h1 { margin:0 0 6px; font-size:28px; } .editor { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:20px; } .wave-wrap { position:relative; width:100%; height:240px; background:var(--color-surface-dark); border-radius:6px; overflow:hidden; user-select:none; touch-action:none; } .wave-image { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:fill; display:block; opacity:.9; pointer-events:none; } -.selection { position:absolute; top:0; bottom:0; background:rgba(48,115,142,.48); border-left:2px solid #ffffff; border-right:2px solid #ffffff; pointer-events:none; } +.selection { position:absolute; top:0; bottom:0; background:rgba(48,115,142,.68); border-left:2px solid #ffffff; border-right:2px solid #ffffff; pointer-events:none; } .playhead { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#ffcc33; box-shadow:0 0 5px #000, 0 0 10px rgba(255,204,51,.85); z-index:4; pointer-events:none; } .handle { position:absolute; top:0; bottom:0; width:18px; margin-left:-9px; cursor:ew-resize; z-index:3; touch-action:none; } .handle::after { content:""; position:absolute; left:7px; top:0; bottom:0; width:4px; background:var(--color-white); border-radius:2px; box-shadow:0 0 5px var(--color-shadow); } @@ -1258,6 +1258,20 @@ wave.addEventListener('pointerdown', e => { const t=xToTime(e.clientX); audio.currentTime = Math.max(0, Math.min(duration,t)); }); + +// Keep keyboard playback controls available after clicking the waveform. +// Space toggles the audio regardless of which waveform element was clicked. +document.addEventListener('keydown', e => { + if (e.code !== 'Space') return; + const target = e.target; + if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable)) return; + e.preventDefault(); + if (audio.paused) { + audio.play().catch(() => {}); + } else { + audio.pause(); + } +}); audio.addEventListener('timeupdate', () => { document.getElementById('position').textContent=fmt(audio.currentTime); renderPlayhead();