added share function

2026-08-26 09:47:52 +08:00
parent ccd8ec16bb
commit f80da8a5f6
5 changed files with 435 additions and 18 deletions
--- a/sentence_api/static/dub-share.html
+++ b/sentence_api/static/dub-share.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="zh-CN">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>口语配音</title>
+<style>
+body{margin:0;background:#0b0f13;color:#e7edf3;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
+.wrap{max-width:900px;margin:0 auto;padding:20px}
+video{width:100%;border-radius:12px;background:#000;aspect-ratio:16/9}
+h1{font-size:22px}.muted{color:#94a3b8;font-size:14px}
+.controls{display:flex;gap:10px;margin:14px 0}
+button{flex:1;height:44px;border:0;border-radius:10px;color:#fff;background:#2563eb;font-weight:700;font-size:15px}
+.active{background:#14b8a6}
+.sentences{display:flex;flex-direction:column;gap:8px}
+.sentence{padding:12px;border-radius:10px;background:#1c2228;color:#cbd5e1;line-height:1.5}
+.active-sentence{outline:2px solid #14b8a6;color:#fff}
+</style>
+
+<div class="wrap">
+  <h1 id="title">加载中…</h1>
+  <p class="muted" id="status">正在读取配音数据</p>
+  <video id="video" playsinline controls></video>
+  <div class="controls">
+    <button id="original">播放原音</button>
+    <button id="dubbing">播放配音</button>
+  </div>
+  <div class="sentences" id="sentences"></div>
+</div>
+
+<script>
+const video = document.getElementById('video');
+const originalButton = document.getElementById('original');
+const dubbingButton = document.getElementById('dubbing');
+const statusText = document.getElementById('status');
+const sentenceList = document.getElementById('sentences');
+let dubAudio = new Audio();
+dubAudio.preload = 'auto';
+let segments = [];
+let mode = null;
+
+function stopAll() {
+  video.pause();
+  dubAudio.pause();
+  originalButton.classList.remove('active');
+  dubbingButton.classList.remove('active');
+  mode = null;
+}
+
+function playOriginal() {
+  stopAll();
+  mode = 'original';
+  originalButton.classList.add('active');
+  video.muted = false;
+  video.play();
+}
+
+function syncDub() {
+  const timeMs = video.currentTime * 1000;
+  const active = segments.find(item => timeMs >= item.start_ms && timeMs < item.end_ms);
+  document.querySelectorAll('.sentence').forEach((node, index) => {
+    node.classList.toggle('active-sentence', segments[index] === active);
+  });
+  if (mode !== 'dubbing') return;
+  if (!active) {
+    dubAudio.pause();
+    return;
+  }
+  const source = active.audio_url;
+  if (dubAudio.dataset.src !== source) {
+    dubAudio.dataset.src = source;
+    dubAudio.src = source;
+  }
+  const target = Math.max(0, timeMs - active.start_ms) / 1000;
+  if (Math.abs(dubAudio.currentTime - target) > 0.25 && Number.isFinite(target)) {
+    dubAudio.currentTime = target;
+  }
+  if (video.paused || dubAudio.paused) dubAudio.play().catch(() => {});
+}
+
+function playDubbing() {
+  stopAll();
+  mode = 'dubbing';
+  dubbingButton.classList.add('active');
+  video.muted = true;
+  video.play();
+  syncDub();
+}
+
+async function load() {
+  try {
+    const shareId = location.pathname.split('/').pop();
+    const shareResponse = await fetch(`/api/v1/dub-shares/${shareId}`);
+    if (!shareResponse.ok) throw new Error(`HTTP ${shareResponse.status}`);
+    const share = await shareResponse.json();
+    segments = share.segments;
+    const detailResponse = await fetch(`/api/v1/videos/${share.video_hash}`);
+    const detail = await detailResponse.json();
+    video.src = detail.video.stream_url;
+    document.title = share.title;
+    document.getElementById('title').textContent = share.title;
+    statusText.textContent = `共 ${segments.length} 句配音`;
+    segments.forEach(item => {
+      const node = document.createElement('div');
+      node.className = 'sentence';
+      node.textContent = item.text || `第 ${item.index + 1} 句`;
+      node.onclick = () => { video.currentTime = item.start_ms / 1000; };
+      sentenceList.appendChild(node);
+    });
+    originalButton.onclick = playOriginal;
+    dubbingButton.onclick = playDubbing;
+    video.addEventListener('timeupdate', syncDub);
+    video.addEventListener('play', () => { if (mode === 'dubbing') syncDub(); });
+    video.addEventListener('pause', () => dubAudio.pause());
+    video.addEventListener('seeked', syncDub);
+  } catch (error) {
+    statusText.textContent = `加载失败：${error.message}`;
+  }
+}
+load();
+</script>