-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
55 lines (53 loc) · 1.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Reproductor de audio con subtítulos</title>
</head>
<body>
<h1>Reproductor de audio con subtítulos</h1>
<audio id="audio" src="audio.mp3" controls></audio>
<div id="transcription"></div>
<script>
// Carga los subtítulos del archivo SRT
fetch("transcription.srt")
.then((response) => response.text())
.then((text) => {
let subtitles = parseSRT(text); // Analiza el archivo SRT
let transcription = document.getElementById("transcription");
let index = 0;
// Muestra los subtítulos correspondientes al tiempo actual del audio
document
.getElementById("audio")
.addEventListener("timeupdate", (event) => {
while (
index < subtitles.length &&
subtitles[index].end <= event.target.currentTime
) {
index++;
}
transcription.textContent = subtitles[index].text;
});
})
.catch((error) => console.error(error));
// Analiza el archivo SRT y devuelve un arreglo de objetos de subtítulos
function parseSRT(text) {
let lines = text.trim().split(/\r?\n/);
let subtitles = [];
for (let i = 0; i < lines.length; i += 4) {
let index = parseInt(lines[i]);
let start = parseTime(lines[i + 1]);
let end = parseTime(lines[i + 2]);
let text = lines[i + 3];
subtitles.push({ index, start, end, text });
}
return subtitles;
}
// Convierte el formato de tiempo SRT (hh:mm:ss,ms) a segundos
function parseTime(time) {
let parts = time.split(/[:,]/).map(parseFloat);
return parts[0] * 3600 + parts[1] * 60 + parts[2] + parts[3] / 1000;
}
</script>
</body>
</html>