/
index.html
199 lines (164 loc) · 13.2 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title lang="en">Ovrdub - Record audio over a backing track.</title>
<!-- <title lang="fr">Ovrdub - S'enregistrer avec un playback.</title> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" id="langstyle" href='style_en.css'>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<h1>Ovr<span style="color:red">d</span>ub </h1>
<img border="0" alt="Logo Ovrdub" src="ovrdub_logo.svg" />
<p lang="en">Welcome to <a href='./' target='blank'>Ovrdub</a>, a simple tool to help you record over a backing/guide track.
<br>Remember to <strong>allow this page to use your microphone</strong> when asked by the popup.
<br><strong>Please use headphones</strong>, and remember to <strong>download your recordings</strong>.
</p>
<p lang="fr">Bienvenue sur <a href='./' target='blank'>Ovrdub</a>, un outil simple pour s'enregistrer avec une piste d'accompagnement ou "playback".
<br>Surtout, <strong>autorisez la page à utiliser votre micro</strong> quand le popup vous le demande.
<br>Merci d'<strong>utiliser un casque</strong>, et pensez à <strong>télécharger votre enregistrement</strong> pour l'envoyer au professeur.</p>
<!-- Paying hommage to creators of the projets used to build this one:
<h1>Audio Recording Demo With WebAudioRecorder.js</h1>
<p><small>Made by the <a href="https://addpipe.com" target="_blank">Pipe Video Recording Platform</a></small></p>
<p>This demo shows you how to use <a href="https://github.com/higuma/web-audio-recorder-js" target="_blank">WebAudioRecorder.js</a> - a JavaScript library written in 2015 by higuma - to record audio and encode to common formats (pcm, Vorbis, mp3) directly in the browser.</p>
<p>Check out the <a href="https://github.com/addpipe/simple-web-audio-recorder-demo" target="_blank">code on GitHub</a> and our <a href="https://addpipe.com/blog/using-webaudiorecorder-js-to-record-audio-on-your-website/" target="_blank">blog post on using WebAudioRecorder.js to Record MP3, Vorbis and WAV Audio</a>.</p>
-->
<div style="max-width: 28em;">
<div id="JSwarning">
<p lang="en"><strong>This page requires javascript to operate. Please activate javascript.</strong></p>
<p lang="fr"><strong>Merci de bien vouloir activer javascript</strong></p>
</div>
<!-- Configuration assistant -->
<div id="inputPlaybackURL" style="display:none">
<div lang="en">
<p>Here is the configuration assistant.
First you will need to put your backing track online and make it available via a direct link.
Next enter the URL of the sound file below to generate an Ovrdub link. </p>
<p>You can also try the <a href="./?pb=https://preidorg.github.io/overdub/son/arbeau-tenor.mp3" target='blank'>demo page</a>.</p>
</div>
<div lang="fr">
<p>Voici l'assistant de configuration d'Ovrdub.
Au préalable, votre piste d'accompagnement doit être hébergé et disponible en lien direct.
Vous pouvez par exemple les déposer sur un mur <a href="padlet.com/">padlet</a> et récupérer le lien de téléchargement, ou créer un compte à <a href="https://jukehost.co.uk">jukehost.co.uk</a> et les téléverser.
</p>
<p>Copiez-collez l'URL du fichier audio dans la case URL ci-dessous pour générer une URL Ovrdub.
</p>
<p>En attendant, vous pouvez essayer la <a href="./?pb=https://preidorg.github.io/overdub/son/arbeau-tenor.mp3" target='blank'>page de démonstration</a>.
Enfin, voici un <a href='https://www.youtube.com/watch?v=4O0gTO8hUvs&feature=youtu.be'>tutoriel vidéo</a>.</p>
</div>
<label for="userPlaybackURL">URL : </label>
<input type="url" id="userPlaybackURL" name="userPlaybackURL" oninput="getUserPlaybackURL()" placeholder="https://example.com/sound.mp3" style="width : 20em">
<br>
</div>
<div id=overdubURLdisplay style="display:none">
<p>
<span lang="en">Ovrdub link: </span>
<span lang="fr">Lien Ovrdub :</span>
<a id="overdubURL" target='blank'></a></p>
<p lang="en">Please test this link to see if your link is compatible with Ovrdub (only direct links will work).
then copy the link and share it with your musicians so that they can record over themselves.</p>
<p lang="fr">Merci de tester ce lien pour vérifier que Ovrdub arrive bien à lire votre fichier mp3.
Si tout va fonctionne, copiez le lien et partagez-le avec vos musiciens pour qu'ils puissent s'enregistrer.</p>
<p>
<span lang="en">This is the title of the backing track which will be shown to your users and automatically added to their download links: </span>
<span lang="fr">Voici le titre du playback qui sera ajouté automatiquement dans les liens de téléchargement de vos utilisateurs :</span>
<a id="userPlaybackTitle"></a></p>
<label for="userPbTitle" lang="en">Custom title : </label>
<label for="userPbTitle" lang="fr">Titre : </label>
<input type="text" id="userPbTitle" name="userPbTitle" oninput="getUserPlaybackURL()" placeholder="custom_name" style="width : 20em">
<p lang="en">If you wish to customise this title, please type a new text in the field above.</p>
<p lang="fr">Si ce texte ne vous satisfait pas, vous pouvez en mettre un autre dans le champ au-dessus.</p>
</div>
<div id='encodingTypeSelectDiv' style="display:none">
<p>Convert recorded audio to:</p>
<select id="encodingTypeSelect">
<option value="wav">Waveform Audio (.wav)</option>
<option value="mp3" selected="selected">MP3 (MPEG-1 Audio Layer III) (.mp3)</option>
<option value="ogg">Ogg Vorbis (.ogg)</option>
</select>
</div>
<!-- Main interface -->
<div id="mainInterface">
<a onclick="toggle_show_help()" lang="en">Read me</a>
<a onclick="toggle_show_help()" lang="fr">Lisez-moi</a>
<div id="od_help" style="display : none">
<div lang="en">
<p><strong>Welcome to Ovrdub a tool to help you record over a backing/guide track.</strong>
The name Ovrdub is derived from the techinque of <a href="https://en.wikipedia.org/wiki/Overdubbing">overdubbing</a>.
"Overdubbing is a technique used in audio recording where a passage has been pre-recorded, and then during replay, another part is recorded to go along with the original."</p>
<p> Please wear headphones so that the backing/guide track can't be heard on the recording.
You will probably find it more comfortable to listen to the backing track with only one ear, so that you can hear your voice or instrument with the other.</p>
<p>When you press play, you will hear the backing track and you can practice singing or playing along with it.
When you are ready to record, write your name/class in the input fields so it can be added to the filename, then press record.
<em>You must allow this page to use your microphone so that it can record you.</em></p>
<p>When you have finished recording press stop and wait for Ovrdub to convert your recording to mp3.
This may take some time depending on your device and the length of the recording.
You will then be able to listen to your recording.
You can repeat the recording process as many times as you like.</p>
<p>When you are satisfied with your recording you can right click on the download link to save it to your device.
You can then send this file to your teacher/conductor/director/collaborator.
<strong>Warning: if you close this window, any unsaved recordings will be lost.</strong></p>
</div>
<div lang="fr">
<p>
<strong>Bienvenue sur Ovrdub, un outil pour s'enregistrer avec une piste d'accompagnement (playback) dans les oreilles.</strong>
Le nom ovrdub est dérivé de la technique de "Overdubbing" ou <a href="https://fr.wikipedia.org/wiki/Re-recording">Re-recording</a> en français.
« Elle consiste à enregistrer des sons rajoutés à d’autres sons déjà enregistrés afin de les mélanger au moment du mixage. »
Ovrdub comporte un lecteur et un enregistreur qui se mettent en route simultanément. Ainsi il n’y a pas besoin de deux appareils, ni de logiciel particulier, simplement un navigateur web pour réaliser son enregistrement.
</p>
<p>
Il est nécessaire de porter un casque ou des écouteurs afin que la piste d'accompagnement ne s'entende pas sur l'enregistrement.
Vous trouverez problablement plus confortable d'écouter le playback avec une seule oreille pour pouvoir entendre votre propre voix ou instrument de l'autre.
</p>
<p>
Appuyez sur play pour entendre le playback et vous entrainer avec.
Quand vous êtes prêt.e à enregistrer, écrivez votre nom (et éventuellement votre classe) dans la case prévue pour qu'il soit ajouté au nom du fichier enregistré.
En suite, cliquez sur "record", puis <strong>autorisez votre navigateur à accéder au micro, sinon Ovrdub ne pourra pas vous enregistrer</strong>.
</p>
<p>
Quand vous avez fini d'enregistrer, cliquez sur stop, puis attendez qu'Ovrdub finisse de convertir votre enregistrement.
Celà peut prendre du temps selon l'appareil que vous utilisez et la longueur de l'enregistrement.
Votre enregistrement est maintenant prêt à écouter.
Vous pouvez recommencer l'enregistrement autant de fois que vous voulez.
</p>
<p>
Quand vous êtes satisfait d'un enregistrement, vous pouvez le télécharger grâce au lien et l'envoyer à votre chef/professeur/collaborateur.
<strong>Attention : si vous fermez cette page avant de sauvegarder vos enregistrements, ils seront perdus.</strong>
</p>
</div>
</div>
<p style="display:block">
<span lang="en">Backing track: </span>
<span lang="fr">Fichier playback : </span>
<a id="displayPlaybackURL" target="_blank"></a>
</p>
<label for="usersName" lang="en">Your name:</label>
<label for="usersName" lang="fr">Prénom :</label>
<input type="text" id="usersName" name="usersName">
<br>
<label for="usersClass" lang="en">Class: </label>
<label for="usersClass" lang="fr">Classe : </label>
<input type="text" id="usersClass" name="usersClass" style="width:4em" placeholder="6A">
<span lang="en">(optional)</span>
<span lang="fr">(non obligatoire)</span>
<div id="controls">
<button id="playButton">Play</button>
<button id="recordButton">Record</button>
<button id="stopButton" disabled>Stop</button>
</div>
<div id="formats"></div>
<pre>Log</pre>
<pre id="log"></pre>
<pre>Recordings</pre>
<ol id="recordingsList"></ol>
</div>
</div>
<!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
<script src="js/WebAudioRecorder.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>