-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (156 loc) · 9.73 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tscribe</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#8183cd">
<link rel="shortcut icon" href="favicon.ico">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="main">
<div class="error hidden">
<div class="error-message"></div>
</div>
<div class="transcript-functions">
<label id="container-audio-file" for="input-audio-file">
<svg id="svg-audio-file" class="svg-transcript-function" viewBox="0 0 1000 1000" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(0.678601,0,0,0.621167,435.079,187.582)">
<path
d="M169.379,143.124C169.379,143.124 316.859,282.443 321.353,519.376C326.739,803.344 169.379,914.813 169.379,914.813"
style="fill:none;stroke-width:138.35px;" />
</g>
<g transform="matrix(0.374852,0,0,0.343126,391.781,334.657)">
<path
d="M169.379,143.124C169.379,143.124 316.859,282.443 321.353,519.376C326.739,803.344 169.379,914.813 169.379,914.813"
style="fill:none;stroke-width:250.46px;" />
</g>
<g transform="matrix(1.16116,0,0,1.16116,37.613,-78.5041)">
<circle cx="265.938" cy="512.127" r="63.433" />
</g>
<g transform="matrix(0.82347,0,0,0.918524,75.7038,24.0428)">
<path
d="M689.99,59.932L916.751,274.213L916.751,976.421L113.757,976.421L113.757,59.932L689.99,59.932Z"
style="fill:none;stroke-width:103.18px;" />
</g>
</svg>
<input id="input-audio-file" type="file" name="file" accept=".wav,.mp3,.mp4,.m4a,.ogg,.flac,.acc" />
<span id="audio-filename">choose audio file</span>
</label>
<svg id="svg-export" class="svg-transcript-function" viewBox="0 0 1000 1000" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g>
<g>
<rect x="413.476" y="121.852" width="171.185" height="347.544" />
<path d="M499.068,707.497l-239.781,-279.303l479.562,0l-239.781,279.303Z" />
</g>
<path d="M845.23,878.148l0,-107.286l-690.46,0l0,107.286l690.46,0Z" />
</g>
</svg>
<svg id="svg-clear" class="svg-transcript-function" viewBox="0 0 1000 1000" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<rect x="169.379" y="351.494" width="100" height="563.319" />
<rect x="543.54" y="351.494" width="100" height="563.319" />
<rect x="730.621" y="351.494" width="100" height="563.319" />
<rect x="356.46" y="351.494" width="100" height="563.319" />
<path d="M521.099,155.015l-8.552,-48.5l-98.481,17.365l8.552,48.5l98.481,-17.365Z" />
<path d="M169.379,814.813l0,100l661.242,0l0,-100l-661.242,0Z" />
<path d="M169.379,351.494l0,100l661.242,0l0,-100l-661.242,0Z" />
<path d="M830.621,191.454l-17.365,-98.48l-708.711,124.965l17.364,98.48l708.712,-124.965Z" />
</svg>
</div>
<textarea class="text-transcript" name="transcript" spellcheck="false"></textarea>
<div class="audio-container">
<audio id="audio" controls></audio>
</div>
</div>
<div class="left">
<svg class="logo" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720.000000 720.000000">
<g transform="translate(0.000000,720.000000) scale(0.100000,-0.100000)" fill="#" stroke="none">
<path d="M1487 6633 c-3 -10 -27 -229 -53 -488 -26 -258 -50 -473 -53 -477 -4
-4 -130 -15 -281 -25 l-275 -18 0 -320 0 -320 258 -3 257 -2 0 -923 c0 -559 4
-965 10 -1032 50 -529 276 -869 665 -1002 123 -42 291 -72 405 -73 l65 -1 55
-86 c69 -109 236 -279 345 -351 228 -151 444 -216 715 -216 166 0 260 14 400
60 328 109 615 367 756 679 l38 85 151 0 c581 0 1018 193 1252 552 59 90 102
189 135 308 20 74 23 108 23 265 0 157 -3 191 -23 265 -60 221 -202 411 -409
546 -180 116 -310 176 -706 325 -373 140 -515 219 -585 325 -52 77 -67 145
-53 228 34 201 189 313 458 332 233 17 503 -69 757 -240 80 -53 102 -64 112
-54 6 7 92 119 189 248 98 129 182 241 188 248 12 15 10 17 -138 117 -453 305
-998 406 -1510 281 -353 -87 -623 -284 -760 -556 -81 -161 -120 -338 -112
-510 19 -382 218 -646 661 -874 59 -30 229 -103 379 -162 423 -167 511 -212
622 -315 105 -98 142 -206 115 -334 -16 -79 -42 -128 -101 -190 -56 -59 -147
-108 -242 -130 -85 -20 -221 -29 -289 -21 l-56 7 -22 87 c-57 230 -171 424
-352 598 -241 232 -543 354 -878 354 -213 0 -391 -44 -583 -142 -129 -66 -231
-143 -337 -254 -163 -169 -254 -339 -323 -599 l-13 -50 -32 44 c-17 24 -41 69
-53 100 -46 123 -47 153 -52 1133 l-5 928 462 2 461 3 0 335 0 335 -462 3
-463 2 0 495 0 495 -354 0 c-329 0 -355 -1 -359 -17z" />
</g>
</svg>
<label class="setting-label">playback speed</label>
<input id="range-playback-speed" class="setting" type="range" name="playback-speed" min="-8" max="8"
value="0">
<label class="setting-label" for="rewind">auto rewind</label>
<input id="input-rewind" class="setting" name="rewind" type="number" value="5">
<label class="setting-label" for="mouse-play">right click play/pause</label>
<input id="cb-mouse-play" class="setting" name="mouse-play" type="checkbox">
<label class="setting-label">interviewer name</label>
<input id="input-interviewer" class="setting" type="text" name="interviewer" value="I">
<label class="setting-label">respondent name</label>
<input id="input-respondent" class="setting" type="text" name="respondent" value="R">
<label class=setting-label>insert speaker</label>
<input id="cb-auto-switch" type="checkbox" name="auto-switch" checked>
<label class="setting-label">insert timestamp</label>
<input id="cb-auto-timestamp" type="checkbox" name="auto-timestamp" checked>
<label hidden class=setting-label>auto snapshots</label>
<input hidden id="cb-auto-save" type="checkbox" name="auto-save" checked>
<label class="setting-label">previous session</label>
<div class="setting-text">
<button id="btn-restore-snapshot" class="button setting" type="button" disabled>restore</button>
<button id="btn-delete-snapshot" class="button setting" type="button" disabled>delete</button>
</div>
</div>
<div class="info">
<div class="info-section">
<b>data protection:</b><br>
All your data stays local (<a href="https://github.com/wiertz/tscribe/blob/master/README.md" target="_blank">read more</a>)!
</div>
<div class="info-section">
<b>controls:</b><br>
Use foot switch or:<br>
ctrl+space: start/pause<br>
F4: start/pause<br>
F3: rewind<br>
F5: forward<br>
</div>
<div class="info-section">
enter: timestamp & next speaker<br>
alt+enter: timestamp & same speaker<br>
shift+enter: linebreak (no timestamp, no speaker)
</div>
<div class="info-section">
<a href="https://github.com/wiertz/tscribe" target="_blank">t.scribe v 1.11</a> by Thilo Wiertz
</div>
</div>
</div>
</div>
<script src="./js/tscribe.js"></script>
</body>
</html>