-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathusermanual.html
214 lines (201 loc) · 16.7 KB
/
usermanual.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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE HTML>
<html>
<head>
<title>Ben Morton (bm12g10) and Simon Bidwell (sab3g11) Web Development Coursework</title>
<link rel="stylesheet" href="css/reset.min.css" />
<link rel="stylesheet" href="css/muli.css" type="text/css" />
<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/manual_style.css" />
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="bower_components/requirejs/require.js"></script>
<script src="js/usermanual.js"></script>
</head>
<body>
<div class="header_wrap" id="introduction_jump">
<header>
<div class="container">
<h1>Editing User Manual</h1>
<div class="nav">
<a href="#introduction_jump" class="intro active">Introduction</a><a href="#tutorials_jump" class="tuts">Tutorials</a><a href="#stories_jump" class="stories">User Stories</a><a href="#about_jump" class="about">About</a>
</div>
</div>
</header>
</div>
<div id="wrapper">
<div id="introduction" class="container">
<h2>Introduction</h2>
<p>Editing is a HTML5 Audio editing tool. It allows for rapid prototyping and live play back of edited mp3 files, enabling the user to share and save their modified file.</p>
<p>This application is designed to be used by anyone with a HTML5-ready browser and this user manual is designed to be readable by someone with basic knowledge of computing, but with no prior knowledge of audio editing.</p>
<p>Editing has been created by Ben Morton and Simon Bidwell for the COMP6205 - Web Development module at the University of Southampton and is not intended as a replacement for an industry standard Editing tool such as Audacity, Editing is instead intended to be used for quick proof of concepts and sharing whilst on the move or without the neccessary audio editing software.</p>
<p>The first section of this user manual, Tutorials, will cover each of the basic functions of the Editing application (Upload, Trim, Silence, Fade in, Fade out, Slow down, Speed up, Share and Save), whilst the second section of the user manual, User Stories, will explain how these simple functions can be chained together to result in complex audio editing actions. Each point in both the Tutorials and User Stories sections has an accompanying audioless video to demonstrate the actions being described.</p>
</div>
<hr id="tutorials_jump" />
<div id="tutorials" class="container">
<h2>Tutorials</h2>
<p>The Editing web application features a number of functions. First and foremost Editing allows a user to Upload an MP3 audio file, and after an audio file has been uploaded, users can Trim, Fade in, Fade Out, Stretch, Share and Save the file.</p>
<div class="stories">
<div class="video" data-filename="videos/upload.mp4"></div>
<h3>1. Uploading an Audio File</h3>
<p>For Editing to work, an audio file has to be provided. To upload an audio file, click the on the text "upload file to edit" or the upload button in the header at the top of the page. After clicking to upload an audio file, a file selector will open. Using the file selector, navigate to and select the audio file to be edited and then click upload. Once the file upload is completed, the audio player on the homepage of Editing will display the waveform of your audio file ready for editing. Note: Editing only works with mp3 audio files.</p>
<div class="clear"></div>
<div class="video" data-filename="videos/trim.mp4"></div>
<h3>2. Trim</h3>
<p>A trim will cut any noise within the selected audio range, meaning that the selected range will be entirely deleted. To apply the trim function, first, click on the waveform to indicate a beginning timestamp for the trim. Next, press the trim button underneath the audio player to apply the trim function to the waveform beginning from the selected timestamp. Applying the trim function by pressing the button will add a segment to the waveform. The segment indicates the audio being trimmed and the segment handles can be dragged to change the length of the trim. </p>
<div class="clear"></div>
<div class="video" data-filename="videos/silence.mp4"></div>
<h3>3. Silence</h3>
<p>The Silence function will take a selected section of audio and mute the volume for that section. A silence is different from a trim because a trim will skip the trimmed section whereas a silence will play no sound for the silenced section. To apply a silence, click on the waveform where the silence should begin, press the silence button, and then adjust the length of the silence by dragging the silence segment handles.</p>
<div class="clear"></div>
<div class="video" data-filename="videos/fadein.mp4"></div>
<h3>4. Fade in</h3>
<p>A fade in gradually increases the volume level of an audio signal such that it reaches it's true volume level starting from silence at the beginning. With the Editing audio editor, Fade in's are always applied to the start of an audio file. To apply a Fade in function using Editing, press the Fade In button underneath the audio player; this will create a fade in segment on the waveform in the audio player. The segment handles can then be dragged to adjust the length of the fade in function. </p>
<div class="clear"></div>
<div class="video" data-filename="videos/fadeout.mp4"></div>
<h3>5. Fade out</h3>
<p>A fade out gradually decreases the volume level of an audio signal such that it is reduced to silence at it's end. With the Editing audio editor, Fade outs' are always applied to the end of an audio file. To apply a Fade out function using Editing, press the Fade out button underneath the audio player; this will create a fade out segment on the waveform in the audio player. The segment handles can then be dragged to adjust the length of the fade out function.</p>
<div class="clear"></div>
<div class="video" data-filename="videos/slowdown.mp4"></div>
<h3>6. Slow down</h3>
<p>A slow down changes the speed of a selected audio segment by a given multiplier to give the effect of a slower audio segment. To apply the slow down function, first, click on the waveform to indicate a beginning timestamp for the slow down. Next, press the slow down button underneath the audio player to apply the slow down function to the waveform beginning from the selected timestamp. Applying the slow down function by pressing the button will add a segment to the waveform. The segment indicates the audio being slowed and the segment handles can be dragged to change the length of the slow.</p>
<div class="clear"></div>
<div class="video" data-filename="videos/speedup.mp4"></div>
<h3>7. Speed up</h3>
<p>A speed up changes the speed of a selected audio segment by a given multiplier to give the effect of a faster audio segment. To apply a speed up function, click on the waveform where the speed up should begin, press the speed up button, and then adjust the length of the speed up by dragging the speed up segment handles.</p>
<div class="clear"></div>
<div class="video" data-filename="videos/share.mp4"></div>
<h3>8. Share</h3>
<p>After a file has been uploaded to Editing, it can be accessed on a unique url. This unique url can be used to share the audio file with other users. To get the unique url for the current audio file being used on Editing, click the Share button underneath the audio player and the unique url will be displayed so it can be copied to the clipboard.</p>
<div class="clear"></div>
<div class="video" data-filename="videos/download.mp4"></div>
<h3>9. Save</h3>
<p>Saving a file on Editing allows the user to download their edited audio file from the server. After a user is happy with their edited file, clicking the Save button beneath the audio player, will initiate a file transfer to download the audio file to the user's local file space.</p>
<div class="clear"></div>
</div>
</div>
<hr id="stories_jump" />
<div id="stories" class="container">
<h2>User Stories</h2>
<p>There are 5 User Stories we envisioned during the planning phase of Editing. Each of the proposed user stories have been implemented in the finished prototype. The user stories and how to enact them can be seen below. </p>
<div class="stories">
<div class="video" data-filename="videos/storyone.mp4"></div>
<h3>1. Sharing an Audio File</h3>
<p>A user has an audio file that they wish to share with their friends. They come to our website and upload the file. After uploading, they will be presented with the audio waveform which they can play to ensure their audio has uploaded correctly. They can then generate a URL which can be shared with their friends.</p>
<div class="howto">
<h4>How to:</h4>
<ul>
<li>1. Open the file selector by clicking "upload file to edit" or the upload button in the header at the top of the page</li>
<li>2. Select the audio file to edit using the file selector</li>
<li>3. Upload the audio file to edit</li>
<li>4. View the waveform on the audio player to ensure the upload has finished</li>
<li>5. Play the audio using the audio player by clicking the play button to ensure the audio has uploaded correctly</li>
<li>6. Generate a URL to share by clicking the Share button underneath the audio player.</li>
</ul>
</div>
<div class="clear"></div>
<div class="video" data-filename="videos/storytwo.mp4"></div>
<h3>2. Trim and download</h3>
<p>A user has an audio file with large amounts of silence before and after their desired audio. Instead of downloading some audio editing software, they can upload the file to our website, trim the silence from either end and then download the newly trimmed file to use in future.</p>
<div class="howto">
<h4>How to:</h4>
<ul>
<li>1. Open the file selector by clicking "upload file to edit" or the upload button in the header at the top of the page</li>
<li>2. Select the audio file to edit using the file selector</li>
<li>3. Upload the audio file to edit</li>
<li>4. After the audio has uploaded, click on the beginning on the waveform to indicate the beginning of a trim segment</li>
<li>5. Click the trim button to generate a trim segment</li>
<li>6. Drag the trim segment handle to the end of the silent section of audio</li>
<li>7. Click the beginning of the next section of silence</li>
<li>8. Click the trim button to generate a trim segment</li>
<li>9. Drag the trim segment handle to the end of the silent section of audio</li>
<li>10. Press the save button to start downloading the newly edited audio file.</li>
</ul>
</div>
<div class="clear"></div>
<div class="video" data-filename="videos/storythree.mp4"></div>
<h3>3. Smooth Transition</h3>
<p>A user has a piece of music that they wish to use in the middle of a video and need a smooth transition. They upload the file to our website, apply fades on the beginning and end to allow for a smooth transition, and then download the music with fades to use in their project.</p>
<div class="howto">
<h4>How to:</h4>
<ul>
<li>1. Open the file selector by clicking "upload file to edit" or the upload button in the header at the top of the page</li>
<li>2. Select the audio file to edit using the file selector</li>
<li>3. Upload the audio file to edit</li>
<li>4. Press the Fade in button to generate a fade in segment for the beginning of the audio file</li>
<li>5. Adjust the length of the Fade in function using the segment handles</li>
<li>6. Press the Fade out button to generate a fade out segment for the end of the audio file</li>
<li>7. Adjust the length of the Fade out function using the segment handles</li>
<li>8. Press the save button to download the edited audio file.</li>
</ul>
</div>
<div class="clear"></div>
<div class="video" data-filename="videos/storyfour.mp4"></div>
<h3>4. Playing with stretch</h3>
<p>A group of students are bored in labs and have recorded a series of vocals. They upload the files to our website and play with the stretch functionality to see what they sound like slowed down and sped up.</p>
<div class="howto">
<h4>How to:</h4>
<ul>
<li>1. Open the file selector by clicking "upload file to edit" or the upload button in the header at the top of the page</li>
<li>2. Select the audio file to edit using the file selector</li>
<li>3. Upload the audio file to edit</li>
<li>4. Click on the waveform to select where to begin the speed up function</li>
<li>5. Press the speed up button to add the speed up function</li>
<li>6. Adjust the length of the speed up segment by dragging the segment handles</li>
<li>7. Click on the waveform to select where to begin the slow down function</li>
<li>8. Press the slow down button to add the slow down function</li>
<li>9. Adjust the length of the slow down segment by dragging the segment handles</li>
<li>10. Press play to see what they sound like slowed down and sped up.</li>
</ul>
</div>
<div class="clear"></div>
<div class="video" data-filename="videos/storyfive.mp4"></div>
<h3>5. Rapid proof of concept</h3>
<p>An amatuer audio editor has a piece of audio they need to edit quickly to provide a proof of concept, but are away from their main computer and don't have any software available to them. They can upload the file to our website, make any changes that they require and then download the file to demonstrate to their client.</p>
<div class="howto">
<h4>How to:</h4>
<ul>
<li>1. Open the file selector by clicking "upload file to edit" or the upload button in the header at the top of the page</li>
<li>2. Select the audio file to edit using the file selector</li>
<li>3. Upload the audio file to edit</li>
<li>4. Edit the audio file, following the tutorials section on the Editing website, to make the changes required</li>
<li>5. Play the file to ensure the changes fit the requirements</li>
<li>6. Download the file by pressing the save button.</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<hr id="about_jump" />
<div id="about" class="container">
<h2>About</h2>
<p>Editing is a HTML5 web application created by <a href="mailto:[email protected]">Ben Morton</a> and <a href="mailto:[email protected]">Simon Bidwell</a> for COMP6205: Web Development. The tool makes use of javascript, php and HTML5 Audio to create an audio editing application with sharing, saving and live playback.</p>
<p>Due to its responsive design that adapts to the users viewpoint and intuitive user interface, Editing can be used on a wide variety of devices. After uploading an audio file, users can trim, fade in, fade out, stretch, share and export their file, regardless of their access device, allowing for quick and easy audio editing in an easily accessible, web application. </p>
<div class="name">
<div class="photo ben"></div>
<p>Ben is a 4th year Computer Science MEng student, currently studying at the University of Southampton. He is a keen software developer with large amounts of experience in various languages, as well as having a large interest in media, working with the Students' Union in audio and video mixing and editing. Ben has taken on many part time jobs working as a Web Developer and has also worked in server administration, being entrusted with setting up various types of servers.</p>
</div><div class="name">
<div class="photo simon"></div>
<p>Simon is a 4th year Computer Science MENg student with a passion for web design, programming and sports, studying at The University of Southampton. Two years ago Simon interned as a Research Assistant for the Electronics and Computer Science Department at The University of Southampton, and in the summer of 2014 he was a Summer Student for the LHCb project at CERN, Geneva, working specifically on the DIRAC Grid Computing Solution.</p>
</div>
</div>
</div>
<footer>
<div class="container">
<h3>COMP6205 - Web Development</h3>
<div class="nav">
<h4>Navigation</h4>
<a href="#header_wrap">Introduction</a><br />
<a href="#tutorials_jump">Tutorials</a><br />
<a href="#stories_jump">User Stories</a><br />
<a href="#about_jump">About</a><br />
</div>
<div class="contact">
<h4>Contact</h4>
<a href="mailto:[email protected]">Ben Morton</a><br />
<a href="mailto:[email protected]">Simon Bidwell</a>
</div>
</div>
</footer>
</body>
</html>