-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (109 loc) · 5.96 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
<!-- Transcribe Web App: index.html -->
<!-- Copyright (C) 2022 Ethan Uppal. All rights reserved. -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A free cross-platform web app for slowing down and looping sections of music.">
<title>Transcribe Web App</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css"></link>
<script src="https://kit.fontawesome.com/556eaabc59.js" crossorigin="anonymous"></script>
<script src="lib/jquery-3.6.0.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="script/utilities.js"></script>
<script src="app.js"></script>
<script src="script/waybackmachine"></script>
</head>
<body>
<div id="container">
<div id="header">
<a href="index.html" class="row not-link">
<i class="fa-solid fa-music" style="margin-right: 10px;"></i>
<h1>Transcribe</h1>
</a>
<p>
A simple web application to aid in transcribing music.
<br />
<a
style="font-size: 16px;"
href="/transcribe/help.html?app_exists=yep"
rel="nofollow"
target="_blank"
style="target-new: tab;">How to use (Open in new tab)</a>
</p>
</div>
<hr />
<div>
<noscript>
<p>Oops! This page requires JavaScript to work. The <a href="help.html?app_exists=yep" target="_blank" rel="nofollow">help page</a> does <em>not</em> need JavaScript to work.</p>
<p style="font-weight: bold;">What? Why? :(</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics" rel="nofollow">JavaScript</a> is a coding language for browsers that allows websites to be interactive, but sometimes is used against users to <a href="https://www.wikipedia.org/wiki/Web_tracking" rel="nofollow">track and profile</a> them. This website does none of those things: the code is <a href="app.js" rel="nofollow">publicly avaliable</a> and no tracking is done.</p>
</noscript>
<div id="upload-div" style="display: none;">
<p><span id="upload-div-msg">Please upload an audio file or <a href="library.html">choose a song from the song library</a> to begin.</span> <a id="control-jumper" href="#section-lists-editor" style="display: none;">Jump to menu</a></p>
<input type="file" accept="audio/*,.mp4,.mp3" id="file-uploader">
</div>
<script>
$('#upload-div')[0].style.display = 'block';
</script>
</div>
<div id="workspace" style="display: none;">
<div id="player" class="row">
<audio id="audio" style="display: none;">
<source src="" id="audio-src" />
</audio>
<button id="backward-skip-button" class="icon-button" onclick="backwardSkip();">
<i class="fa-solid fa-backward-step"></i>
</button>
<button id="play-button" class="icon-button">
<i id="play-button-i" class="fa-solid fa-play"></i>
</button>
<button id="forward-skip-button" class="icon-button" onclick="forwardSkip();">
<i class="fa-solid fa-forward-step"></i>
</button>
<p id="current-timestamp" class="timestamp"></p>
<input
type="range"
min="0"
max="0"
value="0"
id="audio-slider"
class="slider">
<p id="audio-length" class="timestamp"></p>
</div>
<div id="section-list">
</div>
<div id="section-lists-editor" class="align-vertically">
<div><button id="add-button" class="icon-button" onclick="addSongSection();">
<i class="fa-solid fa-plus"></i>
Add a section
</button></div>
<div><button id="copy-button" class="icon-button" onclick="copySections();">
<i class="fa-solid fa-copy"></i>
Copy section code
</button></div>
<div><div class="row">
<button for="paste-sections" class="icon-button" style="cursor: default;" onClick="pasteIntoBox();">
<i class="fa-solid fa-paste"></i>
Paste section code
</button>
<input type="text" id="input-sections" name="paste-sections">
<button id="load-pasted-sections-button" onclick="pasteSections();">Load</button>
</div></div>
<div><button id="link-button" class="icon-button" onclick="copyPermaLink();">
<i class="fa-solid fa-copy"></i>
Copy permanent link
</button></div>
</div>
</div>
<hr />
<div id="footer">
<div class="normal">
<p>Please report any bugs <a href="https://github.com/ethanuppal/transcribe/issues/new?labels=bug" rel="nofollow">here</a>, and <a href="/">check out my other projects</a>!</p>
</div>
<p>Copyright (C) 2022 Ethan Uppal. All rights reserved.</p>
</div>
</div>
</body>
</html>