| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| const STYLE_ID = "ogg-editor-style"; |
| const PALETTE = ["#4fc3f7", "#ffb74d", "#81c784", "#f06292", "#ba68c8", "#4db6ac", "#e57373", "#aed581", |
| "#7986cb", "#ffd54f", "#a1887f", "#90a4ae", "#ff8a65", "#9575cd", "#4dd0e1", "#dce775"]; |
| const DEFAULTS = { |
| threshold_db: -50, trim_start: true, lead: 0.05, trim_end: true, tail: 0.15, |
| pause_longer: 0.75, pause_to: 0.75, gap_min: 0.3, gap_max: 1.0, |
| keep: [], cuts: [], inserts: [], speakers: {}, normalize: false, |
| }; |
| |
| const PRESETS = [ |
| { id: "generated", name: "As generated", hint: "Change nothing", |
| values: { trim_start: false, trim_end: false, pause_longer: 60, pause_to: 60, gap_min: 0, gap_max: 60 } }, |
| { id: "natural", name: "Natural", hint: "Trim the ends, pauses at most 0.75 s, lines 0.3–1 s apart", |
| values: { trim_start: true, lead: 0.05, trim_end: true, tail: 0.15, pause_longer: 0.75, pause_to: 0.75, gap_min: 0.3, gap_max: 1.0 } }, |
| { id: "tight", name: "Tight", hint: "Pauses at most 0.4 s, lines 0.2–0.6 s apart", |
| values: { trim_start: true, lead: 0.05, trim_end: true, tail: 0.1, pause_longer: 0.4, pause_to: 0.4, gap_min: 0.2, gap_max: 0.6 } }, |
| { id: "custom", name: "Custom", hint: "Set every value yourself" }, |
| ]; |
| const LONG_SILENCE = 1.5; |
| const PEAK_STEP = 0.005; |
| const TRACK_KEY = "ogg.editor.oneTrack"; |
| const FADE = 0.004; |
| const HISTORY = 200; |
| |
| const APPLY_IN_COMFYUI = { |
| label: "✓ Use these edits", |
| title: "Run the workflow with these edits: only this node runs again, the take itself is reused (Ctrl+Enter)", |
| done: "Running the workflow with your edits", |
| }; |
| const EXPAND_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7"/></svg>'; |
|
|
| const CSS = ` |
| .d3e-node { position: relative; width: 100%; height: 100%; min-height: 180px; display: flex; flex-direction: column; |
| gap: 5px; padding: 6px; box-sizing: border-box; background: #16161a; border-radius: 6px; color: #ddd; |
| font: 12px/1.35 system-ui, sans-serif; } |
| .d3e-node canvas { width: 100%; flex: 1 1 0; min-height: 40px; border-radius: 4px; background: #0f0f12; cursor: pointer; } |
| .d3e-row { display: flex; align-items: center; gap: 6px; min-width: 0; } |
| .d3e-grow { flex: 1; min-width: 0; } |
| .d3e-time { font-variant-numeric: tabular-nums; color: #cfd8dc; white-space: nowrap; padding: 0 4px; } |
| .d3e-dim { color: #8d95a6; } |
| .d3e-btn { display: inline-flex; align-items: center; gap: 5px; background: #2a2a31; color: #e6e6e6; border: 1px solid #3a3a44; |
| border-radius: 5px; padding: 3px 9px; font: inherit; cursor: pointer; white-space: nowrap; } |
| .d3e-btn svg { width: 12px; height: 12px; } |
| .d3e-btn:hover { background: #34343d; } |
| .d3e-btn.d3e-on { background: #3b4a6b; border-color: #5a77b3; } |
| .d3e-btn.d3e-primary { background: #2f6fd6; border-color: #2f6fd6; color: #fff; } |
| .d3e-btn.d3e-primary:hover { background: #3d7ff0; } |
| .d3e-btn:disabled { opacity: .45; cursor: default; } |
| .d3e-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; |
| padding: 12px; color: #888; background: #16161a; border-radius: 6px; } |
| .d3e-cap { position: relative; overflow: hidden; min-width: 0; } |
| .d3e-node .d3e-cap { flex: 1 1 0; min-height: 58px; } |
| .d3e-reel { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; |
| transition: transform .4s ease; } |
| .d3e-cap-row { max-width: 86%; text-align: center; font-size: 11px; line-height: 1.4; cursor: pointer; opacity: 0; |
| transition: opacity .4s ease, transform .4s ease; transform-origin: center; } |
| .d3e-cap-row.d3e-d0 { opacity: 1; transform: scale(1.14); cursor: default; } |
| .d3e-cap-row.d3e-d1 { opacity: .5; } |
| .d3e-cap-row.d3e-d2 { opacity: .3; } |
| .d3e-cap-row.d3e-d3 { opacity: .16; } |
| .d3e-cap-big { width: 100%; height: 100%; } |
| .d3e-cap-big .d3e-reel { gap: 10px; } |
| .d3e-cap-big .d3e-cap-row { font-size: 17px; max-width: 78%; } |
| .d3e-voice { font-weight: 600; margin-right: 6px; } |
| .d3e-word { border-radius: 3px; padding: 0 1px; cursor: pointer; color: #9aa0ad; } |
| .d3e-cap-row:not(.d3e-d0) .d3e-word, .d3e-untimed .d3e-word, .d3e-word.d3e-said { color: #f0f0f0; } |
| .d3e-cap-row:not(.d3e-d0) .d3e-word { background: none; cursor: inherit; } |
| .d3e-word.d3e-now { background: #f5c542; color: #111; } |
| .d3e-word.d3e-cut { text-decoration: line-through; color: #666; } |
| .d3e-cue { color: #8a8fa0; font-style: italic; } |
| .d3e-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(8, 8, 12, .55); padding: 3.5vh 3vw; |
| box-sizing: border-box; display: flex; } |
| .d3e-window { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; outline: none; overflow: hidden; |
| grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto; |
| grid-template-areas: "bar bar" "presets presets" "captions checks" "tracks checks" "transport checks" "foot foot"; |
| background: #16161b; color: #ddd; border: 1px solid #34343e; border-radius: 10px; box-shadow: 0 12px 48px rgba(0, 0, 0, .6); |
| font: 13px/1.4 system-ui, sans-serif; } |
| .d3e-bar { grid-area: bar; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #2c2c34; |
| background: #1b1b21; flex-wrap: wrap; } |
| .d3e-title { font-weight: 600; } |
| .d3e-spacer { flex: 1; } |
| .d3e-sep { width: 1px; height: 20px; background: #33333b; margin: 0 2px; } |
| .d3e-presets { grid-area: presets; padding: 10px 12px 12px; border-bottom: 1px solid #2c2c34; } |
| .d3e-step { font-weight: 600; margin-bottom: 8px; color: #e6e6e6; } |
| .d3e-step small { font-weight: 400; color: #8d95a6; margin-left: 8px; } |
| .d3e-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } |
| .d3e-card { border: 1px solid #34343e; border-radius: 8px; padding: 7px 10px; cursor: pointer; background: #1b1b21; } |
| .d3e-card:hover { border-color: #4a4a56; } |
| .d3e-card.d3e-on { border: 2px solid #2f6fd6; padding: 6px 9px; background: #1d2333; } |
| .d3e-card b { display: block; font-weight: 600; } |
| .d3e-card span { color: #8d95a6; font-size: 12px; } |
| .d3e-custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; } |
| .d3e-group { background: #1b1b21; border: 1px solid #2c2c34; border-radius: 8px; padding: 9px 11px; display: flex; |
| flex-direction: column; gap: 7px; } |
| .d3e-group h5 { margin: 0; font-size: 12px; font-weight: 600; color: #e6e6e6; } |
| .d3e-group small { color: #8d95a6; font-size: 11px; line-height: 1.35; } |
| .d3e-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; } |
| .d3e-unit { display: inline-flex; align-items: center; gap: 5px; color: #8d95a6; white-space: nowrap; } |
| .d3e-unit input[type=range] { width: 96px; } |
| .d3e-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; } |
| .d3e-window input[type=number]:disabled { opacity: .4; } |
| .d3e-window input[type=number] { width: 58px; background: #111; color: #ddd; border: 1px solid #333; border-radius: 4px; padding: 2px 4px; } |
| .d3e-window input[type=text] { width: 100%; box-sizing: border-box; background: #111; color: #ddd; border: 1px solid #5a77b3; |
| border-radius: 4px; padding: 1px 4px; font: inherit; } |
| .d3e-captions { grid-area: captions; position: relative; min-height: 0; overflow: hidden; } |
| .d3e-captions > .d3e-cap { position: absolute; inset: 0; } |
| .d3e-tracks { grid-area: tracks; display: grid; grid-template-columns: 190px minmax(0, 1fr); border-top: 1px solid #2c2c34; |
| background: #0f0f12; } |
| .d3e-heads { background: #18181d; border-right: 1px solid #2c2c34; } |
| .d3e-ruler-gap { border-bottom: 1px solid #26262d; box-sizing: border-box; display: flex; align-items: center; padding: 0 6px; } |
| .d3e-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; } |
| .d3e-chip { display: inline-flex; align-items: center; gap: 5px; } |
| .d3e-head { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; box-sizing: border-box; |
| border-bottom: 1px solid #202027; } |
| .d3e-swatch { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; } |
| .d3e-name { flex: 1; min-width: 0; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
| .d3e-name small { color: #8d95a6; margin-left: 4px; } |
| .d3e-head input[type=range] { flex: 1; min-width: 0; } |
| .d3e-mini { padding: 1px 7px; font-size: 11px; } |
| .d3e-scroll { overflow-x: auto; overflow-y: hidden; position: relative; } |
| .d3e-scroll canvas { display: block; } |
| .d3e-transport { grid-area: transport; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-top: 1px solid #2c2c34; |
| background: #1b1b21; flex-wrap: wrap; } |
| .d3e-checks { grid-area: checks; border-left: 1px solid #2c2c34; background: #141418; overflow: auto; padding: 10px 12px; } |
| .d3e-checks .d3e-step { margin-top: 4px; } |
| .d3e-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 7px 4px; |
| border-bottom: 1px solid #23232a; cursor: pointer; border-radius: 4px; } |
| .d3e-item:hover { background: #1d1d24; } |
| .d3e-item small { display: block; color: #8d95a6; } |
| .d3e-acts { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } |
| .d3e-warn { color: #ffb74d; } |
| .d3e-empty { color: #8d95a6; padding: 6px 4px 12px; } |
| .d3e-window.d3e-narrow { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto auto; |
| grid-template-areas: "bar" "presets" "captions" "tracks" "transport" "checks" "foot"; } |
| .d3e-window.d3e-narrow .d3e-checks { border-left: none; border-top: 1px solid #2c2c34; max-height: 30vh; } |
| .d3e-window.d3e-narrow .d3e-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| .d3e-window.d3e-narrow .d3e-cap-big .d3e-cap-row { font-size: 15px; } |
| .d3e-foot { grid-area: foot; display: flex; gap: 16px; align-items: center; padding: 5px 12px; border-top: 1px solid #2c2c34; |
| background: #18181d; color: #8d95a6; font-size: 12px; flex-wrap: wrap; } |
| .d3e-foot b { color: #cfd8dc; font-weight: 500; } |
| .d3e-key { display: inline-flex; align-items: center; gap: 5px; } |
| .d3e-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } |
| .d3e-toast { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 3; padding: 6px 12px; border-radius: 8px; |
| background: rgba(20, 20, 24, .94); border: 1px solid #3f9a6c; pointer-events: none; opacity: 0; transition: opacity .2s; } |
| .d3e-toast.d3e-show { opacity: 1; } |
| .d3e-help { position: absolute; right: 16px; top: 46px; z-index: 4; width: 380px; background: #1c1c22; border: 1px solid #3a3a44; |
| border-radius: 8px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 12px; } |
| .d3e-help h4 { margin: 0 0 6px; font-size: 13px; } |
| .d3e-help table { width: 100%; border-collapse: collapse; margin-bottom: 10px; } |
| .d3e-help td { padding: 2px 4px; vertical-align: top; } |
| .d3e-help td:first-child { color: #f5c542; white-space: nowrap; font-family: ui-monospace, monospace; } |
| `; |
|
|
| function injectStyle() { |
| if (document.getElementById(STYLE_ID)) return; |
| const style = document.createElement("style"); |
| style.id = STYLE_ID; |
| style.textContent = CSS; |
| document.head.append(style); |
| } |
|
|
| function el(tag, attrs = {}, ...children) { |
| const node = document.createElement(tag); |
| for (const [key, value] of Object.entries(attrs)) { |
| if (key === "class") node.className = value; |
| else if (key === "style") node.style.cssText = value; |
| else if (key.startsWith("on")) node.addEventListener(key.slice(2), value); |
| else if (value !== undefined && value !== null && value !== false) node.setAttribute(key, value === true ? "" : value); |
| } |
| node.append(...children.flat().filter((c) => c !== null && c !== undefined && c !== false)); |
| return node; |
| } |
|
|
| function icon(svg) { |
| const holder = document.createElement("span"); |
| holder.innerHTML = svg; |
| return holder.firstChild; |
| } |
|
|
| function fmt(seconds, precise = true) { |
| const s = Math.max(0, seconds); |
| const m = Math.floor(s / 60); |
| const rest = s - m * 60; |
| return `${m}:${rest.toFixed(precise ? 2 : 0).padStart(precise ? 5 : 2, "0")}`; |
| } |
|
|
| function speakerColor(speaker) { |
| return PALETTE[speaker % PALETTE.length]; |
| } |
|
|
| |
| function readSetting(key) { |
| try { return localStorage.getItem(key); } catch { return null; } |
| } |
|
|
| function writeSetting(key, value) { |
| try { localStorage.setItem(key, value); } catch { } |
| } |
|
|
| |
| |
|
|
| class Take { |
| constructor(analysis, buffer) { |
| this.analysis = analysis; |
| this.buffer = buffer; |
| this.lines = analysis.lines; |
| this.speakers = analysis.speakers.length ? analysis.speakers : [0]; |
| this.texts = this.lines.map((line) => line.tokens.filter((t) => t.spoken).map((t) => t.text).join(" ")); |
| this.peaks = Take.peaks(buffer); |
| } |
|
|
| static peaks(buffer) { |
| const data = buffer.getChannelData(0); |
| const step = Math.max(1, Math.round(PEAK_STEP * buffer.sampleRate)); |
| const count = Math.ceil(data.length / step); |
| const peaks = new Float32Array(count * 2); |
| for (let i = 0; i < count; i++) { |
| let lo = 0, hi = 0; |
| const end = Math.min(data.length, (i + 1) * step); |
| for (let j = i * step; j < end; j++) { |
| const v = data[j]; |
| if (v < lo) lo = v; |
| if (v > hi) hi = v; |
| } |
| peaks[2 * i] = lo; |
| peaks[2 * i + 1] = hi; |
| } |
| return peaks; |
| } |
|
|
| |
| originalPlan() { |
| const pieces = this.lines.length |
| ? this.lines.map((line, i) => ({ src: [line.start, i + 1 < this.lines.length ? this.lines[i + 1].start : this.analysis.duration], line: i })) |
| : [{ src: [0, this.analysis.duration], line: 0 }]; |
| return { pieces, pauses: [], duration: this.analysis.duration }; |
| } |
| } |
|
|
| |
| class Layout { |
| constructor(plan, take) { |
| this.plan = plan; |
| this.take = take; |
| this.items = []; |
| let t = 0; |
| for (const piece of plan.pieces) { |
| const length = piece.src ? piece.src[1] - piece.src[0] : piece.gap; |
| this.items.push({ ...piece, start: t, end: t + length, speaker: this.speakerOf(piece) }); |
| t += length; |
| } |
| this.duration = t; |
| } |
|
|
| speakerOf(piece) { |
| const line = this.take.lines[piece.line]; |
| return line ? line.speaker : 0; |
| } |
|
|
| |
| toSource(t) { |
| for (const item of this.items) { |
| if (t < item.end || item === this.items[this.items.length - 1]) { |
| if (item.src) return item.src[0] + Math.min(Math.max(0, t - item.start), item.src[1] - item.src[0]); |
| const next = this.items.find((i) => i.src && i.start >= item.end); |
| return next ? next.src[0] : this.take.analysis.duration; |
| } |
| } |
| return 0; |
| } |
|
|
| |
| toEdited(s) { |
| for (const item of this.items) { |
| if (item.src && s >= item.src[0] && s < item.src[1]) return item.start + (s - item.src[0]); |
| } |
| return null; |
| } |
|
|
| |
| cuts() { |
| const out = []; |
| let previous = null; |
| for (const item of this.items) { |
| if (!item.src) continue; |
| if (previous && Math.abs(previous.src[1] - item.src[0]) > 1e-3 && item.src[0] > previous.src[1]) { |
| out.push({ at: item.start, removed: item.src[0] - previous.src[1], from: previous.src[1], to: item.src[0] }); |
| } |
| previous = item; |
| } |
| const first = this.items.find((i) => i.src); |
| if (first && first.src[0] > 1e-3) out.unshift({ at: first.start, removed: first.src[0], from: 0, to: first.src[0] }); |
| return out; |
| } |
| } |
|
|
| |
| |
|
|
| class Player { |
| constructor(onEnd) { |
| this.ctx = null; |
| this.nodes = []; |
| this.playing = false; |
| this.startedAt = 0; |
| this.from = 0; |
| this.until = null; |
| this.onEnd = onEnd; |
| } |
|
|
| context() { |
| if (!this.ctx) this.ctx = new (window.AudioContext || window.webkitAudioContext)(); |
| return this.ctx; |
| } |
|
|
| position() { |
| if (!this.playing) return this.from; |
| return this.from + (this.ctx.currentTime - this.startedAt); |
| } |
|
|
| stop(keepPosition = true) { |
| if (keepPosition) this.from = this.position(); |
| for (const n of this.nodes) { try { n.stop(); } catch { } } |
| this.nodes = []; |
| this.playing = false; |
| clearTimeout(this.endTimer); |
| } |
|
|
| |
| play(layout, buffer, from, until, gains) { |
| this.stop(false); |
| const ctx = this.context(); |
| ctx.resume(); |
| const end = Math.min(until ?? layout.duration, layout.duration); |
| if (from >= end - 1e-3) from = 0; |
| const start = ctx.currentTime + 0.04; |
| for (const item of layout.items) { |
| if (!item.src || item.end <= from || item.start >= end) continue; |
| const offset = Math.max(0, from - item.start); |
| const length = Math.min(item.end, end) - item.start - offset; |
| if (length <= 0) continue; |
| const source = ctx.createBufferSource(); |
| source.buffer = buffer; |
| const gain = ctx.createGain(); |
| const level = gains(item.speaker); |
| const when = start + Math.max(0, item.start - from); |
| gain.gain.setValueAtTime(0, when); |
| gain.gain.linearRampToValueAtTime(level, when + FADE); |
| gain.gain.setValueAtTime(level, Math.max(when + FADE, when + length - FADE)); |
| gain.gain.linearRampToValueAtTime(0, when + length); |
| source.connect(gain).connect(ctx.destination); |
| source.start(when, item.src[0] + offset, length); |
| this.nodes.push(source); |
| } |
| this.from = from; |
| this.startedAt = start; |
| this.until = end; |
| this.playing = true; |
| this.endTimer = setTimeout(() => { this.stop(false); this.from = end; this.onEnd?.(); }, (end - from) * 1000 + 80); |
| } |
| } |
|
|
| |
| |
|
|
| class EditorView { |
| constructor({ readEdits, writeEdits, apply, plan, applyText = APPLY_IN_COMFYUI }) { |
| this.readEdits = readEdits; |
| this.writeEdits = writeEdits; |
| this.applyWorkflow = apply; |
| this.requestPlan = plan; |
| this.applyText = applyText; |
| this.oneTrack = readSetting(TRACK_KEY) === "1"; |
| this.take = null; |
| this.edits = { ...DEFAULTS }; |
| this.plan = null; |
| this.layout = null; |
| this.original = false; |
| this.selection = null; |
| this.loop = false; |
| this.zoom = null; |
| this.undoStack = []; |
| this.redoStack = []; |
| this.player = new Player(() => this.onPlaybackEnd()); |
| this.listeners = new Set(); |
| this.raf = null; |
| } |
|
|
| subscribe(fn) { this.listeners.add(fn); return () => this.listeners.delete(fn); } |
| emit() { for (const fn of this.listeners) fn(); } |
|
|
| async load(analysis, buffer) { |
| this.player.stop(false); |
| this.player.from = 0; |
| this.take = new Take(analysis, buffer); |
| this.edits = { ...DEFAULTS, ...this.readEdits() }; |
| this.undoStack = []; |
| this.redoStack = []; |
| this.selection = null; |
| await this.replan(); |
| } |
|
|
| async replan() { |
| if (!this.take) return; |
| const token = (this.planToken = (this.planToken || 0) + 1); |
| const plan = await this.requestPlan(this.take.analysis, this.edits); |
| if (token !== this.planToken) return; |
| this.plan = plan; |
| this.relayout(); |
| } |
|
|
| relayout() { |
| const wasPlaying = this.player.playing; |
| const source = this.layout ? this.layout.toSource(this.player.position()) : 0; |
| this.layout = new Layout(this.original ? this.take.originalPlan() : this.plan, this.take); |
| const edited = this.layout.toEdited(source); |
| this.player.stop(false); |
| this.player.from = edited ?? Math.min(this.player.from, this.layout.duration); |
| if (wasPlaying) this.play(); |
| this.emit(); |
| } |
|
|
| |
| change(patch, { history = true } = {}) { |
| if (history) { |
| this.undoStack.push(JSON.stringify(this.edits)); |
| if (this.undoStack.length > HISTORY) this.undoStack.shift(); |
| this.redoStack = []; |
| } |
| this.edits = { ...this.edits, ...patch }; |
| this.writeEdits(this.edits); |
| this.replan(); |
| } |
|
|
| undo() { |
| if (!this.undoStack.length) return; |
| this.redoStack.push(JSON.stringify(this.edits)); |
| this.edits = JSON.parse(this.undoStack.pop()); |
| this.writeEdits(this.edits); |
| this.replan(); |
| } |
|
|
| redo() { |
| if (!this.redoStack.length) return; |
| this.undoStack.push(JSON.stringify(this.edits)); |
| this.edits = JSON.parse(this.redoStack.pop()); |
| this.writeEdits(this.edits); |
| this.replan(); |
| } |
|
|
| reset() { |
| this.change({ ...DEFAULTS, cuts: this.edits.cuts, inserts: this.edits.inserts, keep: [] }); |
| } |
|
|
| setOneTrack(on) { |
| this.oneTrack = on; |
| writeSetting(TRACK_KEY, on ? "1" : "0"); |
| this.emit(); |
| } |
|
|
| setOriginal(on) { |
| if (this.original === on) return; |
| this.original = on; |
| this.selection = null; |
| this.relayout(); |
| } |
|
|
| gain(speaker) { |
| const s = this.edits.speakers[String(speaker)] || {}; |
| if (s.mute) return 0; |
| return Math.pow(10, (s.gain_db || 0) / 20); |
| } |
|
|
| |
| voiceLabel(speaker) { |
| const name = (this.edits.speakers[String(speaker)] || {}).name; |
| return name ? `${name} (Voice ${speaker})` : `Voice ${speaker}`; |
| } |
|
|
| jumpLine(direction) { |
| if (!this.layout) return; |
| const position = this.player.position(); |
| const starts = this.take.lines.map((line) => this.layout.toEdited(line.start)).filter((t) => t !== null); |
| const target = direction < 0 ? starts.filter((t) => t < position - 0.3).pop() ?? 0 : starts.find((t) => t > position + 0.05); |
| if (target !== undefined) this.seek(target); |
| } |
|
|
| play(from = null, until = null) { |
| if (!this.layout) return; |
| const start = from ?? this.player.position(); |
| const stop = until ?? (this.loop && this.selection ? this.selection[1] : null); |
| this.player.play(this.layout, this.take.buffer, start, stop, (s) => this.gain(s)); |
| this.tick(); |
| this.emit(); |
| } |
|
|
| pause() { |
| this.player.stop(true); |
| this.emit(); |
| } |
|
|
| toggle() { |
| if (this.player.playing) this.pause(); |
| else if (this.selection && (this.player.from < this.selection[0] || this.player.from >= this.selection[1])) this.play(this.selection[0]); |
| else this.play(); |
| } |
|
|
| seek(t, { keepPlaying = true } = {}) { |
| if (!this.layout) return; |
| const target = Math.max(0, Math.min(t, this.layout.duration)); |
| if (this.player.playing && keepPlaying) this.play(target); |
| else { this.player.stop(false); this.player.from = target; this.emit(); } |
| } |
|
|
| onPlaybackEnd() { |
| if (this.loop && this.selection) { this.play(this.selection[0]); return; } |
| this.emit(); |
| } |
|
|
| tick() { |
| cancelAnimationFrame(this.raf); |
| const step = () => { |
| this.emit(); |
| if (this.player.playing) this.raf = requestAnimationFrame(step); |
| }; |
| this.raf = requestAnimationFrame(step); |
| } |
|
|
| |
| cutSelection() { |
| if (!this.selection || this.original) return; |
| const [a, b] = this.selection; |
| const ranges = []; |
| for (const item of this.layout.items) { |
| if (!item.src || item.end <= a || item.start >= b) continue; |
| const s0 = item.src[0] + Math.max(0, a - item.start); |
| const s1 = item.src[0] + Math.min(item.end, b) - item.start; |
| if (s1 > s0) ranges.push([+s0.toFixed(4), +s1.toFixed(4)]); |
| } |
| if (!ranges.length) return; |
| this.change({ cuts: [...this.edits.cuts, ...ranges] }); |
| this.selection = null; |
| this.seek(a, { keepPlaying: false }); |
| } |
|
|
| insertSilence(seconds) { |
| if (this.original || !this.layout) return; |
| const at = this.layout.toSource(this.selection ? this.selection[0] : this.player.position()); |
| this.change({ inserts: [...this.edits.inserts, [+at.toFixed(4), seconds]] }); |
| } |
|
|
| removeEdit(kind, index) { |
| const list = [...this.edits[kind]]; |
| list.splice(index, 1); |
| this.change({ [kind]: list }); |
| } |
|
|
| toggleKeep(pauseId) { |
| const keep = new Set(this.edits.keep); |
| if (keep.has(pauseId)) keep.delete(pauseId); else keep.add(pauseId); |
| this.change({ keep: [...keep] }); |
| } |
|
|
| setSpeaker(speaker, patch) { |
| const speakers = { ...this.edits.speakers, [String(speaker)]: { ...(this.edits.speakers[String(speaker)] || {}), ...patch } }; |
| this.change({ speakers }); |
| } |
|
|
| apply() { |
| this.writeEdits(this.edits); |
| this.applyWorkflow(); |
| } |
|
|
| destroy() { |
| this.player.stop(false); |
| cancelAnimationFrame(this.raf); |
| this.player.ctx?.close(); |
| this.listeners.clear(); |
| } |
| } |
|
|
| |
| |
|
|
| |
| function drawWaveform(ctx, take, item, x0, x1, top, height, color, clip0 = x0, clip1 = x1) { |
| const peaks = take.peaks; |
| const buckets = peaks.length / 2; |
| const span = item.src[1] - item.src[0]; |
| const mid = top + height / 2; |
| ctx.fillStyle = color; |
| const width = Math.max(1, x1 - x0); |
| for (let x = Math.max(0, Math.floor(Math.max(x0, clip0))); x < Math.ceil(Math.min(x1, clip1)); x++) { |
| const a = item.src[0] + ((x - x0) / width) * span; |
| const b = item.src[0] + ((x + 1 - x0) / width) * span; |
| let lo = 0, hi = 0; |
| for (let i = Math.floor(a / PEAK_STEP); i <= Math.min(buckets - 1, Math.floor(b / PEAK_STEP)); i++) { |
| if (peaks[2 * i] < lo) lo = peaks[2 * i]; |
| if (peaks[2 * i + 1] > hi) hi = peaks[2 * i + 1]; |
| } |
| const y0 = mid - hi * height * 0.48, y1 = mid - lo * height * 0.48; |
| ctx.fillRect(x, y0, 1, Math.max(1, y1 - y0)); |
| } |
| } |
|
|
| function drawOverview(canvas, view) { |
| const rect = canvas.getBoundingClientRect(); |
| const dpr = window.devicePixelRatio || 1; |
| const w = Math.max(1, Math.round(rect.width * dpr)), h = Math.max(1, Math.round(rect.height * dpr)); |
| if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } |
| const ctx = canvas.getContext("2d"); |
| ctx.clearRect(0, 0, w, h); |
| const layout = view.layout; |
| if (!layout) return; |
| const scale = w / Math.max(layout.duration, 0.001); |
| const speakers = view.take.speakers; |
| const laneH = h / speakers.length; |
| speakers.forEach((speaker, i) => { |
| ctx.fillStyle = i % 2 ? "#121217" : "#141419"; |
| ctx.fillRect(0, i * laneH, w, laneH); |
| }); |
| const spans = new Map(); |
| for (const item of layout.items) { |
| if (!item.src) continue; |
| const span = spans.get(item.line) ?? { start: item.start, end: item.end, speaker: item.speaker }; |
| span.start = Math.min(span.start, item.start); |
| span.end = Math.max(span.end, item.end); |
| spans.set(item.line, span); |
| } |
| for (const span of spans.values()) { |
| const lane = Math.max(0, speakers.indexOf(span.speaker)); |
| ctx.fillStyle = speakerColor(span.speaker) + "22"; |
| ctx.fillRect(span.start * scale + dpr, lane * laneH + dpr, Math.max(1, (span.end - span.start) * scale - 2 * dpr), laneH - 2 * dpr); |
| } |
| for (const item of layout.items) { |
| if (!item.src) continue; |
| const lane = speakers.indexOf(item.speaker); |
| drawWaveform(ctx, view.take, item, item.start * scale, item.end * scale, Math.max(0, lane) * laneH, laneH, speakerColor(item.speaker)); |
| } |
| ctx.font = `${Math.round(10 * dpr)}px system-ui`; |
| speakers.forEach((speaker, i) => { |
| const label = view.voiceLabel(speaker); |
| ctx.fillStyle = "rgba(15,15,18,.75)"; |
| ctx.fillRect(0, i * laneH, ctx.measureText(label).width + 8 * dpr, 14 * dpr); |
| ctx.fillStyle = speakerColor(speaker); |
| ctx.fillText(label, 4 * dpr, i * laneH + 10.5 * dpr); |
| }); |
| ctx.fillStyle = "#ff5252"; |
| ctx.fillRect(Math.round(view.player.position() * scale), 0, Math.max(1, dpr), h); |
| } |
|
|
| |
| |
| |
|
|
| class Captions { |
| constructor(view, big = false) { |
| this.view = view; |
| this.reel = el("div", { class: "d3e-reel" }); |
| this.root = el("div", { class: `d3e-cap${big ? " d3e-cap-big" : ""}` }, this.reel); |
| this.rows = []; |
| this.index = null; |
| this.builtFor = null; |
| new ResizeObserver(() => this.place(false)).observe(this.root); |
| } |
|
|
| build() { |
| const v = this.view; |
| this.rows = v.take.lines.map((line, i) => { |
| const words = []; |
| const row = el("div", { class: "d3e-cap-row", title: "Click to go to this line" }, |
| el("span", { class: "d3e-voice", style: `color:${speakerColor(line.speaker)}` }, v.voiceLabel(line.speaker))); |
| for (const token of line.tokens) { |
| if (!token.spoken) { row.append(el("span", { class: "d3e-cue" }, token.text), " "); continue; } |
| const span = el("span", { class: "d3e-word" }, token.text); |
| span.addEventListener("click", (e) => { |
| if (i !== this.index) return; |
| e.stopPropagation(); |
| const at = v.layout.toEdited(token.start ?? line.start); |
| if (at !== null) v.seek(at); |
| }); |
| words.push({ span, token }); |
| row.append(span, " "); |
| } |
| row.addEventListener("click", () => { |
| const at = v.layout.toEdited(line.start); |
| if (at !== null) v.seek(at); |
| }); |
| return { row, words }; |
| }); |
| this.reel.replaceChildren(...this.rows.map(({ row }) => row)); |
| this.root.classList.toggle("d3e-untimed", !v.take.analysis.aligned); |
| this.index = null; |
| } |
|
|
| |
| place(animate = true) { |
| const current = this.rows[this.index]?.row; |
| if (!current) return; |
| this.reel.style.transition = animate ? "" : "none"; |
| const y = this.root.clientHeight / 2 - (current.offsetTop + current.offsetHeight / 2); |
| this.reel.style.transform = `translateY(${Math.round(y)}px)`; |
| if (!animate) { |
| void this.reel.offsetHeight; |
| this.reel.style.transition = ""; |
| } |
| } |
|
|
| update() { |
| const v = this.view; |
| if (!v.layout || !v.take.lines.length) return; |
| if (this.builtFor !== v.layout) { |
| this.builtFor = v.layout; |
| this.build(); |
| } |
| const source = v.layout.toSource(v.player.position()); |
| let index = 0; |
| v.take.lines.forEach((line, i) => { if (source >= line.start - 1e-3) index = i; }); |
| if (index !== this.index) { |
| const animate = this.index !== null; |
| this.index = index; |
| this.rows.forEach(({ row }, i) => { row.className = `d3e-cap-row d3e-d${Math.min(Math.abs(i - index), 4)}`; }); |
| this.place(animate); |
| } |
| const cuts = v.original ? [] : v.edits.cuts; |
| for (const { span, token } of this.rows[index].words) { |
| if (token.start === undefined) continue; |
| span.classList.toggle("d3e-now", source >= token.start && source < token.end); |
| span.classList.toggle("d3e-said", source >= token.end); |
| span.classList.toggle("d3e-cut", cuts.some(([a, b]) => token.start >= a - 0.02 && token.end <= b + 0.02)); |
| } |
| } |
| } |
|
|
| |
| |
|
|
| class EditorWindow { |
| static RULER = 24; |
| static LANE = 64; |
| static ONE_TRACK = 90; |
| static PAD = 8; |
|
|
| |
| lanes() { |
| return this.view.oneTrack ? [null] : this.view.take.speakers; |
| } |
|
|
| laneHeight() { |
| return this.view.oneTrack ? EditorWindow.ONE_TRACK : EditorWindow.LANE; |
| } |
|
|
| |
| clips() { |
| const byLine = new Map(); |
| for (const item of this.view.layout.items) { |
| if (!item.src) continue; |
| const clip = byLine.get(item.line); |
| if (clip) { |
| clip.start = Math.min(clip.start, item.start); |
| clip.end = Math.max(clip.end, item.end); |
| clip.items.push(item); |
| } else { |
| byLine.set(item.line, { line: item.line, speaker: item.speaker, start: item.start, end: item.end, items: [item] }); |
| } |
| } |
| return [...byLine.values()]; |
| } |
|
|
| constructor(view, onClose) { |
| this.view = view; |
| this.onClose = onClose; |
| this.drag = null; |
| this.helpOpen = false; |
| this.customOpen = false; |
| this.window = el("div", { class: "d3e-window", tabindex: "0" }); |
| this.root = el("div", { class: "d3e-overlay" }, this.window); |
| this.root.addEventListener("mousedown", (e) => { if (e.target === this.root) this.close(); }); |
| this.build(); |
| this.unsubscribe = view.subscribe(() => this.update()); |
| this.window.addEventListener("keydown", (e) => this.onKey(e)); |
| |
| this.resize = new ResizeObserver(() => { |
| this.window.classList.toggle("d3e-narrow", this.window.clientWidth < 1100); |
| this.drawTimeline(); |
| }); |
| this.resize.observe(this.window); |
| document.body.append(this.root); |
| this.window.focus(); |
| this.renderAll(); |
| } |
|
|
| build() { |
| const v = this.view; |
| const button = (label, title, onclick, cls = "") => |
| el("button", { class: `d3e-btn ${cls}`, title, onclick: (e) => { onclick(e); this.window.focus(); } }, label); |
| this.undoBtn = button("↶ Undo", "Undo the last change (Ctrl+Z)", () => v.undo()); |
| this.redoBtn = button("↷ Redo", "Redo (Ctrl+Shift+Z)", () => v.redo()); |
| const bar = el("div", { class: "d3e-bar" }, |
| el("span", { class: "d3e-title" }, "OGG Editor"), |
| el("span", { class: "d3e-dim" }, "Tidy the silences, check each line, cut what you don't want."), |
| el("span", { class: "d3e-spacer" }), this.undoBtn, this.redoBtn, |
| button("? Help", "Keyboard shortcuts and what the colours mean (?)", () => this.toggleHelp()), |
| button(v.applyText.label, v.applyText.title, () => { v.apply(); this.toast(v.applyText.done); }, "d3e-primary"), |
| button("✕ Close", "Close the editor; your edits stay on the node (Esc)", () => this.close())); |
| this.presets = el("div", { class: "d3e-presets" }); |
| this.captions = new Captions(v, true); |
| this.heads = el("div", { class: "d3e-heads" }); |
| this.canvas = el("canvas"); |
| this.scroll = el("div", { class: "d3e-scroll" }, this.canvas); |
| this.playBtn = button("▶ Play", "Play or pause (Space)", () => v.toggle(), "d3e-primary"); |
| this.timeLabel = el("span", { class: "d3e-time" }); |
| this.afterBtn = button("After", "Hear and see the take with your edits (A switches)", () => v.setOriginal(false)); |
| this.beforeBtn = button("Before", "Hear and see the take as it was generated (A switches)", () => v.setOriginal(true)); |
| this.loopBtn = button("⟲ Loop", "Play the selection over and over (L)", () => { v.loop = !v.loop; this.update(); }); |
| this.cutBtn = button("✂ Cut selection", "Remove the selected part: drag across the tracks to select (Delete)", () => v.cutSelection()); |
| this.silenceBtn = button("+ Add silence", "Add 0.5 s of silence at the playhead, or at the start of the selection (I)", () => v.insertSilence(0.5)); |
| const transport = el("div", { class: "d3e-transport" }, |
| button("⏮", "Back to the start (Home)", () => v.seek(0)), |
| button("◀ Line", "Previous line (↑)", () => v.jumpLine(-1)), |
| this.playBtn, |
| button("Line ▶", "Next line (↓)", () => v.jumpLine(1)), |
| this.timeLabel, el("span", { class: "d3e-sep" }), |
| el("span", { class: "d3e-dim" }, "Hear"), this.afterBtn, this.beforeBtn, this.loopBtn, el("span", { class: "d3e-sep" }), |
| this.cutBtn, this.silenceBtn, el("span", { class: "d3e-spacer" }), |
| el("span", { class: "d3e-dim" }, "Zoom"), |
| button("−", "Zoom out (−)", () => this.zoomBy(1 / 1.5)), |
| button("Fit", "Show the whole take (0)", () => { v.zoom = null; this.drawTimeline(); }), |
| button("+", "Zoom in (+)", () => this.zoomBy(1.5))); |
| this.checks = el("div", { class: "d3e-checks" }); |
| this.foot = el("div", { class: "d3e-foot" }); |
| this.toastEl = el("div", { class: "d3e-toast" }); |
| this.window.append(bar, this.presets, el("div", { class: "d3e-captions" }, this.captions.root), |
| el("div", { class: "d3e-tracks" }, this.heads, this.scroll), transport, this.checks, this.foot, this.toastEl); |
| this.bindTimeline(); |
| } |
|
|
| close() { |
| this.view.pause(); |
| this.unsubscribe(); |
| this.resize.disconnect(); |
| this.root.remove(); |
| this.onClose(); |
| } |
|
|
| toast(text) { |
| this.toastEl.textContent = text; |
| this.toastEl.classList.add("d3e-show"); |
| clearTimeout(this.toastTimer); |
| this.toastTimer = setTimeout(() => this.toastEl.classList.remove("d3e-show"), 2400); |
| } |
|
|
| toggleHelp() { |
| const v = this.view; |
| this.helpOpen = !this.helpOpen; |
| this.help?.remove(); |
| this.help = null; |
| if (!this.helpOpen) return; |
| const rows = [["Space", "Play or pause (plays the selection when there is one)"], ["↑ ↓", "Previous / next line"], |
| ["← →", "Back / forward 1 s (Shift: 5 s)"], ["Home End", "Start / end"], ["Click", "Move the playhead (tracks or a word)"], |
| ["Drag", "Select a part on the tracks"], ["Delete", "Cut the selection"], ["I", "Add 0.5 s of silence"], ["L", "Loop the selection"], |
| ["A", "Hear after / before your edits"], ["Ctrl+Z", "Undo (Ctrl+Shift+Z redo)"], ["+ − 0", "Zoom in / out / fit"], |
| ["Ctrl+wheel", "Zoom at the pointer"], ["Ctrl+Enter", v.applyText.label.replace(/^\W+/, "")], ["Esc", "Clear the selection, then close"]]; |
| const key = (color, text) => el("div", { class: "d3e-key", style: "display:flex;margin:3px 0" }, el("i", { style: `flex:none;background:${color}` }), text); |
| this.help = el("div", { class: "d3e-help" }, el("h4", {}, "Keys"), |
| el("table", {}, rows.map(([k, d]) => el("tr", {}, el("td", {}, k), el("td", {}, d)))), |
| el("h4", {}, "Colours on the tracks"), |
| key("#6d4c1f", "A pause the settings shortened (click its label to leave it as generated)"), |
| key("#2e7d4f", "Silence added between lines that ran into each other"), |
| key("#455a64", "A pause you left as generated"), key("#ef5350", "Audio removed here"), |
| key("rgba(90,130,220,.6)", "Your selection")); |
| this.window.append(this.help); |
| } |
|
|
| onKey(e) { |
| const v = this.view; |
| if (e.target.matches?.("input, textarea")) return; |
| const ctrl = e.ctrlKey || e.metaKey; |
| let handled = true; |
| if (e.key === " ") v.toggle(); |
| else if (e.key === "Escape") { if (this.helpOpen) this.toggleHelp(); else if (v.selection) { v.selection = null; this.update(); } else this.close(); } |
| else if (ctrl && e.key.toLowerCase() === "z") e.shiftKey ? v.redo() : v.undo(); |
| else if (ctrl && e.key.toLowerCase() === "y") v.redo(); |
| else if (ctrl && e.key === "Enter") { v.apply(); this.toast(v.applyText.done); } |
| else if (e.key === "Delete" || e.key === "Backspace") v.cutSelection(); |
| else if (e.key === "ArrowUp") v.jumpLine(-1); |
| else if (e.key === "ArrowDown") v.jumpLine(1); |
| else if (e.key === "ArrowLeft") v.seek(v.player.position() - (e.shiftKey ? 5 : 1)); |
| else if (e.key === "ArrowRight") v.seek(v.player.position() + (e.shiftKey ? 5 : 1)); |
| else if (e.key === "Home") v.seek(0); |
| else if (e.key === "End") v.seek(v.layout?.duration ?? 0); |
| else if (e.key.toLowerCase() === "i" && !ctrl) v.insertSilence(0.5); |
| else if (e.key.toLowerCase() === "l" && !ctrl) { v.loop = !v.loop; this.update(); } |
| else if (e.key.toLowerCase() === "a" && !ctrl) v.setOriginal(!v.original); |
| else if (e.key === "+" || e.key === "=") this.zoomBy(1.5); |
| else if (e.key === "-") this.zoomBy(1 / 1.5); |
| else if (e.key === "0") { v.zoom = null; this.drawTimeline(); } |
| else if (e.key === "?") this.toggleHelp(); |
| else handled = false; |
| if (handled) { e.preventDefault(); e.stopPropagation(); } |
| } |
|
|
| |
| renderPresets() { |
| const v = this.view; |
| const e = v.edits; |
| const matching = PRESETS.find((p) => p.values && Object.entries(p.values).every(([key, value]) => e[key] === value))?.id; |
| const chosen = this.customOpen || !matching ? "custom" : matching; |
| const cards = el("div", { class: "d3e-cards" }, PRESETS.map((preset) => el("div", { |
| class: `d3e-card ${chosen === preset.id ? "d3e-on" : ""}`, |
| onclick: () => { |
| this.customOpen = !preset.values; |
| if (preset.values) v.change(preset.values); |
| else this.renderPresets(); |
| }, |
| }, el("b", {}, preset.name), el("span", {}, preset.hint)))); |
| const shortened = v.plan.pauses.filter((p) => p.action === "shortened").length; |
| const added = v.plan.pieces.filter((piece) => piece.gap).length - e.inserts.length; |
| this.presets.replaceChildren(...[ |
| el("div", { class: "d3e-step" }, "1 · How should the silences sound?", |
| el("small", {}, `${shortened} pause${shortened === 1 ? "" : "s"} shortened · space added between ${added} pair${added === 1 ? "" : "s"} of lines · ` + |
| `${fmt(v.take.analysis.duration)} → ${fmt(v.plan.duration)}`)), |
| cards, chosen === "custom" ? this.customSettings() : null].filter(Boolean)); |
| } |
|
|
| customSettings() { |
| const v = this.view; |
| const e = v.edits; |
| const number = (key, min, max, step, disabled = false) => el("input", { type: "number", min, max, step, value: e[key], disabled, |
| onchange: (ev) => v.change({ [key]: +ev.target.value }) }); |
| const seconds = (input) => el("span", { class: "d3e-unit" }, input, "s"); |
| const toggle = (key, label) => el("label", { class: "d3e-toggle" }, |
| el("input", { type: "checkbox", checked: e[key], onchange: (ev) => v.change({ [key]: ev.target.checked }) }), label); |
| const field = (label, control) => el("div", { class: "d3e-field" }, el("span", {}, label), control); |
| const group = (title, hint, ...rows) => el("div", { class: "d3e-group" }, el("h5", {}, title), ...rows, el("small", {}, hint)); |
| return el("div", { class: "d3e-custom" }, |
| group("Start and end", "Cuts the silence before the first word and after the last, leaving a little.", |
| toggle("trim_start", "Trim the start"), field("Keep before the first word", seconds(number("lead", 0, 2, 0.05, !e.trim_start))), |
| toggle("trim_end", "Trim the end"), field("Keep after the last word", seconds(number("tail", 0, 3, 0.05, !e.trim_end)))), |
| group("Pauses inside a line", "The middle of a long pause goes, so the end of the word and the next breath stay.", |
| field("Shorten pauses longer than", seconds(number("pause_longer", 0.1, 60, 0.05))), |
| field("down to", seconds(number("pause_to", 0, 60, 0.05)))), |
| group("Space between lines", "Lines that run into each other get the minimum; longer gaps are cut to the maximum.", |
| field("At least", seconds(number("gap_min", 0, 10, 0.05))), |
| field("At most", seconds(number("gap_max", 0, 60, 0.05)))), |
| group("Silence and loudness", "Lower counts only true silence as silence; higher also counts breaths and room noise.", |
| field("Silence is quieter than", el("span", { class: "d3e-unit" }, |
| el("input", { type: "range", min: -75, max: -25, step: 1, value: e.threshold_db, onchange: (ev) => v.change({ threshold_db: +ev.target.value }) }), |
| `${e.threshold_db} dB`)), |
| toggle("normalize", "Make it as loud as possible without clipping"))); |
| } |
|
|
| |
| renderHeads() { |
| const v = this.view; |
| const toggle = el("button", { class: "d3e-btn d3e-mini", title: v.oneTrack ? "Give each voice its own track" : "Show every voice on one track", |
| onclick: () => v.setOneTrack(!v.oneTrack) }, v.oneTrack ? "Track per voice" : "One track"); |
| this.heads.replaceChildren(el("div", { class: "d3e-ruler-gap", style: `height:${EditorWindow.RULER}px` }, toggle)); |
| const mute = (speaker, s) => el("button", { class: `d3e-btn d3e-mini ${s.mute ? "d3e-on" : ""}`, |
| title: s.mute ? "Hear this voice again" : "Silence this voice", onclick: () => v.setSpeaker(speaker, { mute: !s.mute }) }, s.mute ? "Muted" : "Mute"); |
| const name = (speaker, s) => { |
| const label = el("span", { class: "d3e-name", title: "Click to name this voice" }, |
| s.name || `Voice ${speaker}`, s.name ? el("small", {}, `(Voice ${speaker})`) : null); |
| label.addEventListener("click", () => this.rename(speaker, label)); |
| return label; |
| }; |
| if (v.oneTrack) { |
| this.heads.append(el("div", { class: "d3e-head", style: `height:${EditorWindow.ONE_TRACK}px` }, |
| el("span", { class: "d3e-dim" }, "All voices"), |
| el("div", { class: "d3e-chips" }, v.take.speakers.map((speaker) => { |
| const s = v.edits.speakers[String(speaker)] || {}; |
| return el("span", { class: "d3e-chip" }, el("span", { class: "d3e-swatch", style: `background:${speakerColor(speaker)}` }), name(speaker, s), mute(speaker, s)); |
| })))); |
| return; |
| } |
| for (const speaker of v.take.speakers) { |
| const s = v.edits.speakers[String(speaker)] || {}; |
| const gain = s.gain_db || 0; |
| this.heads.append(el("div", { class: "d3e-head", style: `height:${EditorWindow.LANE}px` }, |
| el("div", { class: "d3e-row" }, el("span", { class: "d3e-swatch", style: `background:${speakerColor(speaker)}` }), name(speaker, s), mute(speaker, s)), |
| el("div", { class: "d3e-row", title: "This voice's volume" }, el("span", { class: "d3e-dim" }, "Vol"), |
| el("input", { type: "range", min: -18, max: 12, step: 0.5, value: gain, onchange: (ev) => v.setSpeaker(speaker, { gain_db: +ev.target.value }) }), |
| el("span", { class: "d3e-dim", style: "width:58px;text-align:right;white-space:nowrap" }, `${gain >= 0 ? "+" : ""}${gain.toFixed(1)} dB`)))); |
| } |
| } |
|
|
| rename(speaker, nameEl) { |
| const input = el("input", { type: "text", value: (this.view.edits.speakers[String(speaker)] || {}).name || "", placeholder: `Voice ${speaker}` }); |
| let done = false; |
| const commit = (save) => { |
| if (done) return; |
| done = true; |
| if (save) this.view.setSpeaker(speaker, { name: input.value.trim() }); |
| else this.renderHeads(); |
| this.window.focus(); |
| }; |
| input.addEventListener("keydown", (e) => { |
| if (e.key === "Enter") commit(true); |
| else if (e.key === "Escape") commit(false); |
| e.stopPropagation(); |
| }); |
| input.addEventListener("blur", () => commit(true)); |
| nameEl.replaceWith(input); |
| input.focus(); |
| input.select(); |
| } |
|
|
| |
| findings() { |
| const v = this.view; |
| const lines = v.take.lines; |
| const items = []; |
| const lineName = (i) => `Line ${i + 1} (${v.voiceLabel(lines[i].speaker)})`; |
| lines.forEach((line, i) => { |
| const spoken = line.tokens.filter((t) => t.spoken).length; |
| const length = line.end - line.start; |
| const item = { at: line.start, until: Math.max(line.end, line.start + 2) }; |
| if (length < 0.05) items.push({ ...item, text: `${lineName(i)} has no audio of its own`, hint: "The take ran it into the line before: listen there." }); |
| else if (spoken && length / spoken < 0.12) items.push({ ...item, text: `${lineName(i)} is short for its words`, hint: "A word may be missing." }); |
| else if (spoken && length / spoken > 1.4) items.push({ ...item, text: `${lineName(i)} is long for its words`, hint: "It may hold a long silence or a stall." }); |
| }); |
| for (const pause of v.plan.pauses) { |
| const length = pause.end - pause.start; |
| if (length < LONG_SILENCE || (pause.kind !== "inside" && pause.kind !== "between")) continue; |
| const i = lines.findIndex((line) => pause.start < line.end); |
| const where = pause.kind === "inside" && i >= 0 ? `inside line ${i + 1}` : `between lines ${i} and ${i + 1}`; |
| const kept = pause.action === "kept by you"; |
| items.push({ |
| at: Math.max(0, pause.start - 1), until: pause.end + 1, pause, silence: true, |
| text: `${length.toFixed(1)} s of silence ${where}`, |
| hint: kept ? "Left as generated." : pause.action === "kept" ? "Your settings keep it." : `Shortened to ${pause.to.toFixed(2)} s.`, |
| }); |
| } |
| return items.sort((a, b) => a.at - b.at); |
| } |
|
|
| hear(from, until) { |
| const v = this.view; |
| const start = v.layout.toEdited(from) ?? v.layout.toEdited(Math.max(0, from - 0.5)); |
| if (start === null) return; |
| const end = v.layout.toEdited(Math.max(from, until - 0.01)); |
| v.play(start, end !== null && end > start ? end : null); |
| } |
|
|
| renderChecks() { |
| const v = this.view; |
| const e = v.edits; |
| const items = this.findings(); |
| const row = (iconText, iconClass, text, hint, actions, onclick) => el("div", { class: "d3e-item", onclick }, |
| el("span", { class: iconClass }, iconText), el("div", {}, text, el("small", {}, hint)), el("div", { class: "d3e-acts" }, actions)); |
| const play = (from, until) => el("button", { class: "d3e-btn d3e-mini", title: "Hear this part", |
| onclick: (ev) => { ev.stopPropagation(); this.hear(from, until); } }, "▶ Hear"); |
| const go = (at) => () => { const t = v.layout.toEdited(at); if (t !== null) v.seek(t, { keepPlaying: false }); }; |
| const edits = [ |
| ...e.cuts.map(([a, b], i) => row("✂", "d3e-dim", `${(b - a).toFixed(2)} s cut at ${fmt(a)}`, "Removed by you.", |
| [el("button", { class: "d3e-btn d3e-mini", onclick: (ev) => { ev.stopPropagation(); v.removeEdit("cuts", i); } }, "Undo this one")], go(Math.max(0, a - 0.5)))), |
| ...e.inserts.map(([at, s], i) => row("+", "d3e-dim", `${s.toFixed(2)} s of silence at ${fmt(at)}`, "Added by you.", |
| [el("button", { class: "d3e-btn d3e-mini", onclick: (ev) => { ev.stopPropagation(); v.removeEdit("inserts", i); } }, "Undo this one")], go(at))), |
| ]; |
| this.checks.replaceChildren(...[ |
| el("div", { class: "d3e-step" }, `2 · Things to check (${items.length})`), |
| items.length ? items.map((item) => row(item.silence ? "⏸" : "⚠", "d3e-warn", item.text, item.hint, [ |
| play(item.at, item.until), |
| item.pause && item.pause.action !== "kept" ? el("button", { class: "d3e-btn d3e-mini", |
| title: item.pause.action === "kept by you" ? "Shorten it again with your settings" : "Undo this change and keep the silence as generated", |
| onclick: (ev) => { ev.stopPropagation(); v.toggleKeep(item.pause.id); } }, |
| item.pause.action === "kept by you" ? "Shorten it" : "Leave as generated") : null, |
| ], go(item.at))) |
| : el("div", { class: "d3e-empty" }, `Nothing to check: every line has a normal pace and no silence lasts ${LONG_SILENCE} s or more.`), |
| el("div", { class: "d3e-step", style: "margin-top:14px" }, `Your edits (${edits.length})`), |
| edits.length ? edits : el("div", { class: "d3e-empty" }, "Drag across the tracks to select a part, then Cut selection or Add silence."), |
| ].flat()); |
| } |
|
|
| |
| pxPerSecond() { |
| const width = this.scroll.clientWidth - 2 * EditorWindow.PAD; |
| const fit = width / Math.max(this.view.layout?.duration || 1, 0.5); |
| return this.view.zoom ?? fit; |
| } |
|
|
| zoomBy(factor, anchorX = null) { |
| const before = this.pxPerSecond(); |
| const anchor = anchorX ?? this.scroll.clientWidth / 2; |
| const t = (this.scroll.scrollLeft + anchor - EditorWindow.PAD) / before; |
| this.view.zoom = Math.min(2000, Math.max(5, before * factor)); |
| this.drawTimeline(); |
| this.scroll.scrollLeft = t * this.view.zoom + EditorWindow.PAD - anchor; |
| } |
|
|
| timeAt(clientX) { |
| const rect = this.canvas.getBoundingClientRect(); |
| return Math.max(0, (clientX - rect.left - EditorWindow.PAD) / this.pxPerSecond()); |
| } |
|
|
| bindTimeline() { |
| this.canvas.addEventListener("mousedown", (e) => { |
| if (e.button !== 0) return; |
| const t = this.timeAt(e.clientX); |
| const rect = this.canvas.getBoundingClientRect(); |
| const hit = this.hitPause(e.clientX - rect.left, e.clientY - rect.top); |
| if (hit) { this.view.toggleKeep(hit.id); return; } |
| this.drag = { start: t, moved: false }; |
| const move = (ev) => { |
| const now = this.timeAt(ev.clientX); |
| if (Math.abs(now - this.drag.start) * this.pxPerSecond() > 3) this.drag.moved = true; |
| if (this.drag.moved) { |
| this.view.selection = [Math.min(this.drag.start, now), Math.min(Math.max(this.drag.start, now), this.view.layout.duration)]; |
| this.update(); |
| } |
| }; |
| const up = () => { |
| window.removeEventListener("mousemove", move); |
| window.removeEventListener("mouseup", up); |
| if (!this.drag.moved) { this.view.selection = null; this.view.seek(this.drag.start); } |
| else this.view.seek(this.view.selection[0], { keepPlaying: false }); |
| this.drag = null; |
| }; |
| window.addEventListener("mousemove", move); |
| window.addEventListener("mouseup", up); |
| }); |
| this.scroll.addEventListener("wheel", (e) => { |
| if (e.ctrlKey || e.metaKey) { |
| e.preventDefault(); |
| this.zoomBy(e.deltaY < 0 ? 1.25 : 0.8, e.clientX - this.scroll.getBoundingClientRect().left); |
| } else if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { |
| e.preventDefault(); |
| this.scroll.scrollLeft += e.deltaY; |
| } |
| }, { passive: false }); |
| this.scroll.addEventListener("scroll", () => this.drawTimeline()); |
| this.canvas.addEventListener("mousemove", (e) => { |
| const rect = this.canvas.getBoundingClientRect(); |
| const x = e.clientX - rect.left; |
| const hit = this.hitPause(x, e.clientY - rect.top); |
| const cut = hit ? null : this.cutsShown?.find((c) => Math.abs(c.x - x) <= 4); |
| this.canvas.style.cursor = hit ? "pointer" : "text"; |
| this.canvas.title = hit ? this.describePause(hit) : cut ? `${cut.removed.toFixed(2)} s removed here` : "Click to move the playhead, drag to select"; |
| }); |
| } |
|
|
| describePause(pause) { |
| const kind = pause.kind === "inside" ? "Pause inside a line" : "Space between lines"; |
| const length = (pause.end - pause.start).toFixed(2); |
| if (pause.action === "kept by you") return `${kind}: left as generated (${length} s). Click to apply your settings again.`; |
| return `${kind}: was ${length} s, now ${pause.to.toFixed(2)} s. Click to leave it as generated.`; |
| } |
|
|
| |
| hitPause(x, y) { |
| if (y > EditorWindow.RULER || !this.badges) return null; |
| return this.badges.find((b) => x >= b.x0 && x <= b.x1)?.pause ?? null; |
| } |
|
|
| drawTimeline() { |
| const v = this.view; |
| if (!v.layout) return; |
| const { RULER, PAD } = EditorWindow; |
| const LANE = this.laneHeight(); |
| const pps = this.pxPerSecond(); |
| const speakers = v.take.speakers; |
| const lanes = this.lanes(); |
| const width = v.zoom === null ? this.scroll.clientWidth : Math.ceil(2 * PAD + v.layout.duration * pps); |
| const height = RULER + lanes.length * LANE; |
| const dpr = window.devicePixelRatio || 1; |
| const viewWidth = Math.max(width, this.scroll.clientWidth); |
| this.canvas.style.width = `${viewWidth}px`; |
| this.canvas.style.height = `${height}px`; |
| this.scroll.style.height = `${height + (width > this.scroll.clientWidth ? 12 : 0)}px`; |
| if (this.canvas.width !== Math.round(viewWidth * dpr) || this.canvas.height !== Math.round(height * dpr)) { |
| this.canvas.width = Math.round(viewWidth * dpr); |
| this.canvas.height = Math.round(height * dpr); |
| } |
| const ctx = this.canvas.getContext("2d"); |
| ctx.setTransform(dpr, 0, 0, dpr, 0, 0); |
| ctx.clearRect(0, 0, viewWidth, height); |
| const left = this.scroll.scrollLeft, right = left + this.scroll.clientWidth; |
| const X = (t) => PAD + t * pps; |
| const laneTop = (i) => RULER + i * LANE; |
|
|
| lanes.forEach((_, i) => { |
| ctx.fillStyle = i % 2 ? "#121217" : "#141419"; |
| ctx.fillRect(0, laneTop(i), viewWidth, LANE); |
| ctx.fillStyle = "#202027"; |
| ctx.fillRect(0, laneTop(i) + LANE - 1, viewWidth, 1); |
| }); |
| if (v.selection) { |
| ctx.fillStyle = "rgba(90,130,220,.22)"; |
| ctx.fillRect(X(v.selection[0]), RULER, (v.selection[1] - v.selection[0]) * pps, height - RULER); |
| } |
| for (const item of v.layout.items) { |
| if (!item.gap) continue; |
| const x0 = X(item.start), x1 = X(item.end); |
| if (x1 < left - 4 || x0 > right + 4) continue; |
| ctx.fillStyle = "rgba(120,200,140,.10)"; |
| ctx.fillRect(x0, RULER, x1 - x0, height - RULER); |
| ctx.fillStyle = "#7fc69a"; |
| ctx.font = "10px system-ui"; |
| if (x1 - x0 > 34) ctx.fillText(`+${item.gap.toFixed(2)} s`, x0 + 3, height - 5); |
| } |
| |
| const position = v.player.position(); |
| for (const clip of this.clips()) { |
| const x0 = X(clip.start), x1 = X(clip.end); |
| if (x1 < left - 4 || x0 > right + 4) continue; |
| const lane = v.oneTrack ? 0 : Math.max(0, speakers.indexOf(clip.speaker)); |
| const top = laneTop(lane) + 3, h = LANE - 7; |
| const color = speakerColor(clip.speaker); |
| const muted = (v.edits.speakers[String(clip.speaker)] || {}).mute; |
| const current = position >= clip.start && position < clip.end; |
| ctx.beginPath(); |
| ctx.roundRect(x0 + 0.5, top + 0.5, Math.max(1, x1 - x0 - 1), h, 4); |
| ctx.fillStyle = color + (current ? "33" : "1f"); |
| ctx.fill(); |
| ctx.lineWidth = current ? 2 : 1; |
| ctx.strokeStyle = color + (current ? "ff" : "88"); |
| ctx.stroke(); |
| ctx.save(); |
| ctx.beginPath(); |
| ctx.rect(x0 + 2, top, Math.max(0, x1 - x0 - 4), h); |
| ctx.clip(); |
| ctx.fillStyle = color + "40"; |
| ctx.fillRect(x0, top, x1 - x0, 15); |
| ctx.fillStyle = "#f0f0f0"; |
| ctx.font = "11px system-ui"; |
| ctx.fillText(`${v.voiceLabel(clip.speaker)} · ${v.take.texts[clip.line] ?? ""}`, x0 + 5, top + 11); |
| ctx.restore(); |
| for (const item of clip.items) { |
| drawWaveform(ctx, v.take, item, X(item.start), X(item.end), top + 17, h - 19, muted ? "#55555f" : color, Math.max(left - 2, x0 + 1), Math.min(right + 2, x1 - 1)); |
| } |
| } |
| |
| this.cutsShown = []; |
| for (const cut of v.layout.cuts()) { |
| const x = X(cut.at); |
| this.cutsShown.push({ x, removed: cut.removed }); |
| ctx.fillStyle = "#ef5350"; |
| ctx.fillRect(x - 1, RULER, 2, height - RULER); |
| ctx.beginPath(); |
| ctx.moveTo(x - 5, RULER); |
| ctx.lineTo(x + 5, RULER); |
| ctx.lineTo(x, RULER + 7); |
| ctx.fill(); |
| } |
| |
| ctx.fillStyle = "#18181d"; |
| ctx.fillRect(0, 0, viewWidth, RULER); |
| ctx.fillStyle = "#26262d"; |
| ctx.fillRect(0, RULER - 1, viewWidth, 1); |
| const steps = [0.1, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60]; |
| const major = steps.find((s) => s * pps >= 70) ?? 60; |
| ctx.fillStyle = "#8d95a6"; |
| ctx.font = "10px system-ui"; |
| for (let t = Math.floor(Math.max(0, (left - PAD) / pps) / major) * major; X(t) < right + 50; t += major) { |
| ctx.fillRect(X(t), RULER - 6, 1, 6); |
| ctx.fillText(major < 1 ? t.toFixed(2) : fmt(t, false), X(t) + 3, 13); |
| } |
| |
| this.badges = []; |
| if (!v.original) { |
| let lastEnd = -Infinity; |
| const dots = []; |
| for (const pause of v.plan.pauses) { |
| if (pause.action === "kept" || pause.kind === "lead" || pause.kind === "tail") continue; |
| const at = v.layout.toEdited(Math.max(pause.start, 0)); |
| if (at === null) continue; |
| const length = pause.end - pause.start; |
| const label = pause.action === "kept by you" ? "as generated" : `${length.toFixed(2)} → ${pause.to.toFixed(2)} s`; |
| const color = pause.action === "kept by you" ? "#455a64" : pause.action === "lengthened" ? "#2e7d4f" : "#6d4c1f"; |
| const w = ctx.measureText(label).width + 8; |
| if (X(at) < lastEnd + 2) { |
| dots.push({ x: X(at), color, pause }); |
| continue; |
| } |
| ctx.fillStyle = color; |
| ctx.fillRect(X(at), 3, w, 15); |
| ctx.fillStyle = "#fff"; |
| ctx.fillText(label, X(at) + 4, 14); |
| this.badges.push({ x0: X(at), x1: X(at) + w, pause }); |
| lastEnd = X(at) + w; |
| } |
| for (const dot of dots) { |
| ctx.beginPath(); |
| ctx.arc(dot.x + 5, 10, 5, 0, Math.PI * 2); |
| ctx.fillStyle = dot.color; |
| ctx.fill(); |
| ctx.lineWidth = 1.5; |
| ctx.strokeStyle = "#0f0f12"; |
| ctx.stroke(); |
| this.badges.unshift({ x0: dot.x, x1: dot.x + 10, pause: dot.pause }); |
| } |
| } |
| const p = X(v.player.position()); |
| ctx.fillStyle = "#ff5252"; |
| ctx.fillRect(p - 1, 0, 2, height); |
| } |
|
|
| renderFoot() { |
| const v = this.view; |
| const take = v.take; |
| const before = take.analysis.duration, after = v.plan.duration; |
| const key = (color, text) => el("span", { class: "d3e-key" }, el("i", { style: `background:${color}` }), text); |
| const sel = v.selection; |
| this.foot.replaceChildren(...[ |
| el("span", {}, "Take ", el("b", {}, fmt(before)), " → with your edits ", el("b", {}, fmt(after)), |
| ` (${after <= before ? "−" : "+"}${Math.abs(before - after).toFixed(1)} s) · ${take.lines.length} lines · ${take.speakers.length} voice${take.speakers.length > 1 ? "s" : ""}`), |
| sel ? el("span", {}, el("b", {}, `Selected ${fmt(sel[0])} – ${fmt(sel[1])}`), " · Delete cuts it, I adds silence, L loops it") |
| : el("span", {}, v.original ? "You are hearing the take as generated: press After for your edits." : "Click the tracks to move the playhead, drag to select."), |
| el("span", { class: "d3e-spacer" }), |
| take.analysis.aligned ? null : el("span", { class: "d3e-warn" }, "Connect Qwen3-ForcedAligner to the aligner input to follow each word."), |
| key("#6d4c1f", "shortened"), key("#2e7d4f", "space added"), key("#ef5350", "removed")].filter(Boolean)); |
| } |
|
|
| renderAll() { |
| if (!this.view.layout) return; |
| this.layoutShown = null; |
| this.update(); |
| } |
|
|
| update() { |
| const v = this.view; |
| if (!v.layout) return; |
| if (this.planShown !== v.plan || this.editsShown !== v.edits || this.layoutShown !== v.layout || this.oneTrackShown !== v.oneTrack) { |
| this.planShown = v.plan; |
| this.editsShown = v.edits; |
| this.layoutShown = v.layout; |
| this.oneTrackShown = v.oneTrack; |
| this.renderPresets(); |
| this.renderHeads(); |
| this.renderChecks(); |
| } |
| this.playBtn.textContent = v.player.playing ? "⏸ Pause" : "▶ Play"; |
| this.timeLabel.textContent = `${fmt(v.player.position())} / ${fmt(v.layout.duration)}`; |
| this.afterBtn.classList.toggle("d3e-on", !v.original); |
| this.beforeBtn.classList.toggle("d3e-on", v.original); |
| this.undoBtn.disabled = !v.undoStack.length; |
| this.redoBtn.disabled = !v.redoStack.length; |
| this.loopBtn.classList.toggle("d3e-on", v.loop); |
| this.cutBtn.disabled = !v.selection || v.original; |
| this.silenceBtn.disabled = v.original; |
| if (this.selectionShown !== v.selection || this.originalShown !== v.original || this.footFor !== v.plan) { |
| this.selectionShown = v.selection; |
| this.originalShown = v.original; |
| this.footFor = v.plan; |
| this.renderFoot(); |
| } |
| this.drawTimeline(); |
| this.captions.update(); |
| if (v.player.playing) this.follow(); |
| } |
|
|
| |
| follow() { |
| const x = EditorWindow.PAD + this.view.player.position() * this.pxPerSecond(); |
| const left = this.scroll.scrollLeft, width = this.scroll.clientWidth; |
| if (x > left + width - 60 || x < left) this.scroll.scrollLeft = x - 40; |
| } |
| } |
|
|
| |
| |
|
|
| class TakePreview { |
| constructor(view, { onOpen, emptyText }) { |
| this.view = view; |
| this.captions = new Captions(view); |
| this.canvas = el("canvas", { title: "Click to move the playhead · double-click to open the editor" }); |
| this.playBtn = el("button", { class: "d3e-btn d3e-primary", title: "Play or pause", onclick: () => view.toggle() }, "▶"); |
| this.time = el("span", { class: "d3e-time" }); |
| this.status = el("div", { class: "d3e-status" }, emptyText); |
| this.root = el("div", { class: "d3e-node" }, this.captions.root, this.canvas, |
| el("div", { class: "d3e-row" }, |
| el("button", { class: "d3e-btn", title: "Back to the start", onclick: () => view.seek(0) }, "⏮"), this.playBtn, this.time, |
| el("span", { class: "d3e-grow" }), |
| el("button", { class: "d3e-btn", title: "Open the editor: tidy the silences, check each line, cut and name voices", |
| onclick: () => view.layout && onOpen() }, icon(EXPAND_ICON), "Edit")), |
| this.status); |
| this.canvas.addEventListener("dblclick", () => view.layout && onOpen()); |
| this.canvas.addEventListener("click", (e) => { |
| if (!view.layout) return; |
| const rect = this.canvas.getBoundingClientRect(); |
| view.seek(((e.clientX - rect.left) / rect.width) * view.layout.duration); |
| }); |
| this.unsubscribe = view.subscribe(() => this.update()); |
| new ResizeObserver(() => drawOverview(this.canvas, view)).observe(this.canvas); |
| } |
|
|
| setStatus(text) { |
| this.status.textContent = text ?? ""; |
| this.status.style.display = text ? "flex" : "none"; |
| } |
|
|
| update() { |
| const view = this.view; |
| if (!view.layout) return; |
| this.playBtn.textContent = view.player.playing ? "⏸" : "▶"; |
| this.time.textContent = `${fmt(view.player.position())} / ${fmt(view.layout.duration)}`; |
| this.captions.update(); |
| drawOverview(this.canvas, view); |
| } |
| } |
|
|
| |
| async function loadTake(view, analysisUrl, audioUrl) { |
| const [analysisRes, audioRes] = await Promise.all([fetch(analysisUrl), fetch(audioUrl)]); |
| if (!analysisRes.ok || !audioRes.ok) throw new Error(`take not found (HTTP ${analysisRes.status}/${audioRes.status})`); |
| const analysis = await analysisRes.json(); |
| const buffer = await view.player.context().decodeAudioData(await audioRes.arrayBuffer()); |
| await view.load(analysis, buffer); |
| } |
|
|
| export { injectStyle, EditorView, EditorWindow, TakePreview, loadTake }; |
|
|
