-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
112 lines (109 loc) · 4.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transcribe</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="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="assets/main.css">
</head>
<body>
<svg class="svg-library">
<symbol id="logo" viewBox="0 0 300 300">
<path d="M30 210V90m0 0c0-33.1 26.9-60 60-60m60 60c0-33.1-26.9-60-60-60m60 180V90m0 120c0 33.1 26.9 60 60 60s60-26.9 60-60m0 0V90" fill="none" stroke="#4e9dca" stroke-width="31" stroke-linecap="round" stroke-miterlimit="10"/>
</symbol>
<symbol id="loader" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="0" width="4" height="7" fill="#4e9dca">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0s" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="10" y="0" width="4" height="7" fill="#4e9dca">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0.2s" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="20" y="0" width="4" height="7" fill="#4e9dca">
<animateTransform attributeType="xml"
attributeName="transform" type="scale"
values="1,1; 1,3; 1,1"
begin="0.4s" dur="0.6s" repeatCount="indefinite" />
</rect>
</symbol>
</svg>
<div id="holder">
<div class="holder-message default">
<h1><svg><use xlink:href="#logo" /></svg>Hi.</h1>
<p>
Drop an audio file here to begin transcribing it.
</p>
<p>
Can be mp3, m4a, wav, flac, and probably some other formats too.
</p>
<p>
<a href="https://github.com/espy/transcribe">This project is on GitHub</a>.
</p>
</div>
<div class="holder-message hover">
<h1>Yes.</h1>
<p>
Very nice. Please let go.
</p>
</div>
</div>
<section id="audio-area">
<h1>
<svg><use xlink:href="#logo" /></svg>
<span id="filename"></span> — <span id="time">00:00:00</span>
<div id="wavform-size-toggle" class="is-large">
<span class="make-small">Small waveform</span>
<span class="make-large">Big waveform</span>
</div>
</h1>
<div id="waveform-display">
<div id="loading-message">
<svg><use xlink:href="#loader" /></svg>
<span>Generating the waveform</span>
<svg><use xlink:href="#loader" /></svg>
</div>
</div>
<div id="waveform-timeline"></div>
<div id="controls">
<button id="play-pause">Play</button>
<button id="remove-loop">Remove loop</button>
<section class="speed-control">
<label>Playback speed</label>
<input id="playback-rate" type="range" min="0.5" max="2" step="0.1" value="1"/>
<div class="speed-indicators">
<label>0.5×</label>
<label>1×</label>
<label>2×</label>
</div>
</section>
</div>
</section>
<section id="text-area">
<textarea name="transcript" id="transcript" cols="30" rows="10">
Welcome to transcribe.
This is how it works:
- Press the escape key to play and pause.
- Click and drag on the waveform to create a loop.
- Type your transcription in this area.
- Your transcription of each file is always saved on this device.
Happy transcribing!
</textarea>
</section>
<script src="https://unpkg.com/wavesurfer.js@2.2.0"></script>
<script src="https://unpkg.com/wavesurfer.js@2.2.0/dist/plugin/wavesurfer.timeline.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js@2.2.0/dist/plugin/wavesurfer.regions.min.js"></script>
<script src="js/lodash.min.js"></script>
<script src="assets/main.js"></script>
</body>
</html>