smshine/mediaplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed a bug

Browse Source
This commit is contained in:
Shuming Liu
2026-08-26 10:25:07 +08:00
parent 14d9c56d34
commit 1b6090e44c
1 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
sentence_api/static/dub-share.html
View File

@@ -14,6 +14,7 @@ button{flex:1;height:44px;border:0;border-radius:10px;color:#fff;background:#256
.sentences{display:flex;flex-direction:column;gap:8px} .sentences{display:flex;flex-direction:column;gap:8px}
.sentence{padding:12px;border-radius:10px;background:#1c2228;color:#cbd5e1;line-height:1.5} .sentence{padding:12px;border-radius:10px;background:#1c2228;color:#cbd5e1;line-height:1.5}
.active-sentence{outline:2px solid #14b8a6;color:#fff} .active-sentence{outline:2px solid #14b8a6;color:#fff}
.selected-sentence{background:#334155;color:#fff}
</style> </style>
<div class="wrap"> <div class="wrap">
@@ -36,6 +37,7 @@ const sentenceList = document.getElementById('sentences');
let dubAudio = new Audio(); let dubAudio = new Audio();
dubAudio.preload = 'auto'; dubAudio.preload = 'auto';
let segments = []; let segments = [];
let selectedIndex = 0;
let mode = null; let mode = null;
function stopAll() { function stopAll() {
@@ -51,11 +53,18 @@ function playOriginal() {
mode = 'original'; mode = 'original';
originalButton.classList.add('active'); originalButton.classList.add('active');
video.muted = false; video.muted = false;
video.play(); playSelectedSentence();
} }
function syncDub() { function syncDub() {
const timeMs = video.currentTime * 1000; const timeMs = video.currentTime * 1000;
const sentence = segments[selectedIndex];
if (sentence && timeMs >= sentence.end_ms) {
video.pause();
dubAudio.pause();
video.currentTime = sentence.end_ms / 1000;
return;
}
const active = segments.find(item => timeMs >= item.start_ms && timeMs < item.end_ms); const active = segments.find(item => timeMs >= item.start_ms && timeMs < item.end_ms);
document.querySelectorAll('.sentence').forEach((node, index) => { document.querySelectorAll('.sentence').forEach((node, index) => {
node.classList.toggle('active-sentence', segments[index] === active); node.classList.toggle('active-sentence', segments[index] === active);
@@ -82,8 +91,16 @@ function playDubbing() {
mode = 'dubbing'; mode = 'dubbing';
dubbingButton.classList.add('active'); dubbingButton.classList.add('active');
video.muted = true; video.muted = true;
video.play(); playSelectedSentence();
syncDub(); }
function playSelectedSentence() {
const sentence = segments[selectedIndex];
if (!sentence) return;
video.currentTime = sentence.start_ms / 1000;
dubAudio.dataset.src = '';
dubAudio.src = '';
video.play().catch(() => {});
} }
async function load() { async function load() {
@@ -102,8 +119,15 @@ async function load() {
segments.forEach(item => { segments.forEach(item => {
const node = document.createElement('div'); const node = document.createElement('div');
node.className = 'sentence'; node.className = 'sentence';
if (item === segments[selectedIndex]) node.classList.add('selected-sentence');
node.textContent = item.text || `第 ${item.index + 1} 句`; node.textContent = item.text || `第 ${item.index + 1} 句`;
node.onclick = () => { video.currentTime = item.start_ms / 1000; }; node.onclick = () => {
selectedIndex = segments.indexOf(item);
document.querySelectorAll('.sentence').forEach((other, index) => {
other.classList.toggle('selected-sentence', index === selectedIndex);
});
video.currentTime = item.start_ms / 1000;
};
sentenceList.appendChild(node); sentenceList.appendChild(node);
}); });
originalButton.onclick = playOriginal; originalButton.onclick = playOriginal;