-
Notifications
You must be signed in to change notification settings - Fork 0
/
help.html
144 lines (141 loc) · 10.6 KB
/
help.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
<!-- Transcribe Web App: help.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>
<link rel="stylesheet" type="text/css" href="assets/css/img-fix.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="script/utilities.js"></script>
<script src="script/waybackmachine.js"></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 />
<noscript>
<a style="font-size: 16px;" href="index.html">Go to app</a>
</noscript>
<a id="app-link" style="font-size: 16px; display: none;" href="index.html" onclick="backToApp();"></a>
</p>
</div>
<script>
var backToApp = function() {}
$(document).ready(function() {
// If referred to from other window, close this tab. Otherwise,
// launch a new tab.
var appLink = document.getElementById('app-link');
var appButton = document.getElementById('app-button');
appLink.style.display = 'block';
if (getUrlParameter('app_exists') == 'yep') {
backToApp = function() { window.top.close(); }
appLink.innerText = 'Back to app';
} else {
appLink.href = "index.html"
appLink.innerText = 'Go to app';
appButton.style.display = 'block';
}
});
</script>
<hr />
<noscript>This page does not need JavaScript to work, but the app does. Please enable it if you would like to use the app. The code can be found <a href="app.js" rel="nofollow">here</a>.<hr /></noscript>
<h2 id="overview">Overview</h2>
<p>Transcribe is a free cross-platform web app for slowing down and looping sections of an audio file. You can upload your own audio files or choose from many existing ones in the <a href="library.html">song library</a>.</p>
<div class="link-button-container">
<a href="index.html" id="app-button" class="link-button" style="display: none;"><strong>Go to app</strong></a>
</div>
<img src="assets/img/full-app-example-v1.png" alt="The application in use to transcribe a solo.">
<p>Here are a couple notes:</p>
<ul>
<li><p>If you have any questions not answered by this help page or want further clarification, <a href="https://github.com/ethanuppal/transcribe/issues/new">feel free to send me a question on the project page</a>.</p></li>
<li><p>If you're wondering how to transcribe, JazzAdvice.com is an excellent resource. <a href="https://www.jazzadvice.com/lessons/getting-started-with-transcription/">This post</a>, for example, has a wealth of information and links to many others.</p></li>
</ul>
<h2 id="uploading-files">Uploading Files</h2>
<p>To upload a file, simply click the button indicated at the top of the screen. When you upload a file, the app will generate a fresh workspace, so make sure to save your previous work or open the app in a new tab.</p>
<img src="assets/img/after-upload.png" alt="The workspace after a file has been uploaded.">
<p>The workspace includes the <a href="#using-the-player">player</a> and <a href="#adding-the-sections">the section editor</a>. This is a fancy colorful diagram I spent too long making:</p>
<img src="assets/img/workspace.png" alt="A diagram of the workspace.">
<h2 id="using-the-player">Using the Player</h2>
<p>There are three buttons in the audio player. The left arrow button goes to the beginning of the audio; the right arrow goes to the end; and the play button starts and stops it.</p>
<p>When in a section, the start- and end-jumping buttons will only go to the bounds specified. For example, if the starting location is at 1 minute and 30 seconds, pressing the start-jumping button will move the playhead to the 1 minute and 30 second mark.</p>
<h2 id="adding-the-sections">Adding the Sections</h2>
<p>The section editor menu has three buttons:</p>
<img src="assets/img/section-editor.png" alt="The section editor with the buttons to add, save, and load sections.">
<ul>
<li><p>The <strong>add a section</strong> button creates a new section at the bottom of the page.</p></li>
<li><p>The <strong>copy section code</strong> button copies a code that represents the sections you have made.</p></li>
<li>
<p>The <strong>paste section code</strong> button paste into the text box. The small <strong>load</strong> to the right will restore your progress based on what you pasted in.</p></li>
<li><p>The <strong>copy permanent link</strong> button copies a link you can use to access your progress later. This may be more convienient than copying the section code and pasting it later. <em>Note: the links may become very long for complex workspaces.</em></p></li>
</ul>
<h2>Modifying the Sections</h2>
<p>Using the section editor menu, you can create new sections. Once you have created a section, you can customize it.</p>
<img src="assets/img/example-section.png" alt="A blank section in the section editor.">
<ul>
<li>Enter the name of the section into the <strong>Section Name</strong> box.</li>
<li>Enter the start time of the section into the <strong>Start</strong> box, following a MM:SS (minute:second) timestamp format.</li>
<li>Enter the start time of the section into the <strong>End</strong> box, following a MM:SS timestamp format.</li>
<li>Enter the speed of the section into the <strong>Speed</strong> box. A speed of 1 indicates 100% and a speed of 0.5 indicates 50%.</li>
<li>Check or uncheck the <strong>Loop</strong> box to toggle whether the section will repeat from its start once it has finished playing.</li>
</ul>
<p>Press the trash button at the top-right of a section to <u>irreversibly</u> delete a section.</p>
<h2 id="saving-progress">Saving your Progress</h2>
<p>As long as you keep the tab open, the app will automatically save your progress. If you accidently close the tab, look in your browser history and click on the most recent link to the website. You can alo manually save your progress by copying the section code or a special link.</p>
<img src="assets/img/section-editor.png" alt="The section editor showing the buttons to add, save, and load sections.">
<p>Clicking the <strong>copy section code</strong> button copies a <a href="#advanced">"section code"</a> to your clipboard. This bizarre-looking string of letters is what encodes your progress.</p>
<p>This section code does NOT have your audio file, so you must keep that as well. I keep my audio files in a cloud provider like Google Drive.</p>
<h2 id="lol">The Website Looks Weird :(</h2>
<p>The color scheme of this website is abysmal, and I apologize in advance for that.</p>
<h2 id="advanced">Advanced</h2>
<p><strong>This section is only for advanced users.</strong></p>
<p>The sections are stored as a JSON object like so:</p>
<pre>
{
"filename" : Name of file,
"fileModified" : JS timestamp when file was last modified,
"lastID" : Number greater than or equal to any other section id,
"currentTime" : The position of the player,
"sections" : [
{
"id" : Unique id,
"name" : Name of section,
"start" : Start time in seconds,
"end" : End time in seconds,
"speed" : Speed where 1 means original,
"loop" : Boolean
}
]
}
</pre>
<p>You can reorder the way the sections appear in the app by reordering the corresponding JSON objects in the sections array. I aim to make this a more approachable feature soon.</p>
<hr />
<h4 id="privacy-policy">Privacy Policy</h4>
<p>Please see <a href="https://ethanuppal.github.io/privacy.html">ethanuppal.github.io/privacy.html</a>, but the TL;DR is that I collect no information about you.</p>
<p>The <a href="index.html">app</a> requires JavaScript, including <a href="app.js" rel="nofollow">app.js</a> file and inline scripts in the <a href="https://github.com/ethanuppal/transcribe/blob/main/index.html" rel="nofollow">index.html</a> file, to function. All JavaScript files can be viewed on the GitHub. This page will also run JavaScript in the form of <a href="https://github.com/ethanuppal/transcribe/blob/main/help.html" rel="nofollow">inline scripts</a>, but it does not need to do so to function.</p>
<h4 id='other-notes'>Other Notes</h4>
<ul>
<li>I host this website through <a href="https://pages.github.com" rel="nofollow">GitHub pages</a>.</li>
<li>I use <a href="https://fontawesome.com" rel="nofollow">Font Awesome</a> for icons.</li>
<li>The source code for this website can be found <a href="https://github.com/ethanuppal/transcribe" rel="nofollow">here</a>.</li>
</ul>
<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>