-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
76 lines (74 loc) · 4.19 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html><head>
<title>German A2</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="JavaScript Audio Sync With Text - Demo">
<style>
body{background:#000;font-family:'Lato',sans-serif;font-size:1.5em;line-height:1.1em;letter-spacing:.05em;margin:0}header, div.headerclone {background:#46ABB6;padding:20px 0}h1.heading{line-height:1.1em;text-align:center;font-weight:400;font-size:1.7em;color:#EDF7F2}div.naturallanguageform{width:900px;margin:2% auto;max-width:95%;min-height:400px;border-radius:5px;color:#FFF;font-size:1.5em}div.nlfinner{width:96%;padding:2%}p.line{line-height:1.5em;font-weight:300}input.textinput{background:none;border:0;border-bottom:1px dashed #EEE;width:auto;font-size:1em;color:#B5E655;font:inherit}input.textinput:focus{outline:none;border-bottom:1px dashed #D00}::-webkit-input-placeholder{color:#B5E655;font-weight:300}:-moz-placeholder{color:#B5E655;opacity:1}::-moz-placeholder{color:#B5E655;opacity:1}:-ms-input-placeholder{color:#B5E655}select.dropdown{font-size:1em;color:#B5E655;border:none;border-bottom:1px dashed #EFEFEF;-webkit-appearance:none;-moz-appearance:none;background:none;width:auto;text-indent:.01px;box-shadow:none;font:inherit}select.dropdown:focus{outline:none;border-bottom:1px dashed #D00}button.button{background:#388891;border:none;padding:10px 50px;font-size:1em;color:#FFF;display:block;margin:40px auto 0;cursor:pointer;font:inherit} .subs span { color: #FFF; background-color: #000; font-style: normal;} p{font-style: italic;}
</style>
</head>
<body>
<div class="naturallanguageform">
<div class="nlfinner">
<p class="line">
<audio style="width:80%;" src="a2.mp3" id="audiofile2" controls preload="auto" autobuffer></audio>
<a href="javascript:void(0)" title="repeat" id="b_repeat" onclick="return repx()"><br></a>
</p>
<p class="line subs" id="subtitles2"></p>
</div>
</div>
<script src="a2.js" charset="utf-8"></script>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function initr(n) {
syncData.forEach(function(d, i){d.re=n})
}
function s(d,a,v) {
d.setAttributeNS(null, a, v);
}
function repx() {
rep=!rep;
initr(rep?1:0);
var repeater = document.getElementById("b_repeat");
repeater.removeChild(repeater.firstChild);
var xmlns = "http://www.w3.org/2000/svg";
var img = document.createElementNS(xmlns, "svg");
s(img,"width",48);
s(img,"height",48);
s(img,"fill-rule","evenodd");
s(img,"clip-rule","evenodd");
var path = document.createElementNS(xmlns, "path");
s(path,"transform","scale(2,2)");
s(path,"fill","#FFF");
s(path,"d",rep?"M6 18h12c3.311 0 6-2.689 6-6s-2.689-6-6-6h-12.039c-3.293.021-5.961 2.701-5.961 6 0 3.311 2.688 6 6 6zm12-10c-2.208 0-4 1.792-4 4s1.792 4 4 4 4-1.792 4-4-1.792-4-4-4z":"M18 18h-12c-3.311 0-6-2.689-6-6s2.689-6 6-6h12.039c3.293.021 5.961 2.701 5.961 6 0 3.311-2.688 6-6 6zm0-10h-12c-2.208 0-4 1.792-4 4s1.792 4 4 4h12c2.208 0 4-1.792 4-4 0-2.199-1.778-3.986-3.974-4h-.026zm-12 1c1.656 0 3 1.344 3 3s-1.344 3-3 3-3-1.344-3-3 1.344-3 3-3z");
img.appendChild(path);
repeater.appendChild(img);
}
var rep = true;
repx();
var subtitles = document.getElementById("subtitles2");
var audioPlayer = document.getElementById("audiofile2");
audioPlayer.addEventListener("timeupdate", function(e){
syncData.forEach(async function(d, i){
var el;
if( (audioPlayer.currentTime*1000) >= d.start && (audioPlayer.currentTime*1000) < d.end ) {
while(subtitles.hasChildNodes())
subtitles.removeChild(subtitles.firstChild)
el = document.createElement('span');
el.innerText = syncData[i].de;
subtitles.appendChild(el);
el = document.createElement('p');
el.innerText = syncData[i].en;
subtitles.appendChild(el);
await sleep(d.end-d.start-150);
if (d.re > 0 && (audioPlayer.currentTime*1000) > d.end-200) {
d.re -= 1;
audioPlayer.currentTime = d.start/1000;
}
}
});
});
</script>
</body>
</html>