-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
209 lines (209 loc) · 8.37 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
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phomeme</title>
<meta name="description" content="Simple sentence mixing tool.">
<meta name="keywords" content="Diphone, Mashup, Meme, Phoneme, Remix, Sentence, Speech, Transcript, Triphone, Vocal, Voice, YTP, YouTube Poop">
<meta property="og:title" content="Phomeme">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mysterypancake.github.io/Phomeme">
<meta property="og:site_name" content="Phomeme">
<meta property="og:description" content="Simple sentence mixing tool.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="scripts/AuditionSession.js"></script>
<script src="scripts/SpeechToSpeech.js"></script>
<script src="scripts/TextToSpeech.js"></script>
<script src="scripts/Triphone.js"></script>
<script src="scripts/Convert.js"></script>
<script src="scripts/Main.js"></script>
</head>
<body>
<h1>Phomeme</h1>
<form id="form" onsubmit="return phomeme();">
<h3>Source</h3>
<select id="preset" onchange="updatePresets(this);">
<option selected value="custom">Custom</option>
<option value="rosen">Michael Rosen</option>
<option value="donkeykong">Donkey Kong</option>
<option disabled value="disillusion">Captain Disillusion - COMING SOON</option>
<option disabled value="kaplan">Jeff Kaplan - COMING SOON</option>
</select>
<div id="custom" class="preset">
<input multiple required type="file" id="inputAudio" accept="audio/*,application/json,.json,.TextGrid" onchange="checkJson(this);">
<input type="image" alt="Microphone" id="inputMic" src="icons/microphone.png" width="24" height="24" onclick="return microphone(this);">
<audio controls id="inputPlayer"></audio>
<code contenteditable="true" id="inputScript" data-placeholder="Type the transcript of the input here"></code>
</div>
<div id="rosen" class="preset">
<div>
<input checked type="checkbox" id="rosen1">
<label for="rosen1">Series 1 (2008)</label>
</div>
<div>
<input disabled type="checkbox" id="rosen2">
<label for="rosen2">Series 2 (2011) - COMING SOON</label>
</div>
<div>
<input disabled type="checkbox" id="rosen3">
<label for="rosen3">Series 3 (2016) - COMING SOON</label>
</div>
<div>
<input disabled type="checkbox" id="rosen4">
<label for="rosen4">Series 4 (2016) - COMING SOON</label>
</div>
</div>
<div id="disillusion" class="preset">
<div>
<input disabled type="checkbox" id="disillusion1">
<label for="disillusion1">Debunks - COMING SOON</label>
</div>
<div>
<input disabled type="checkbox" id="disillusion2">
<label for="disillusion2">Quick D - COMING SOON</label>
</div>
<div>
<input disabled type="checkbox" id="disillusion3">
<label for="disillusion3">Tutorials - COMING SOON</label>
</div>
</div>
<h3>Destination</h3>
<input multiple type="file" id="outputAudio" accept="audio/*,application/json,.json,.TextGrid,text/plain,.txt" onchange="checkJson(this);">
<input type="image" alt="Microphone" id="outputMic" src="icons/microphone.png" width="24" height="24" onclick="return microphone(this);">
<audio controls id="outputPlayer"></audio>
<code contenteditable="true" id="outputScript" data-placeholder="Type the transcript of the output here"></code>
<input type="submit" value="Submit">
</form>
<div id="result">
<h2 id="title">Result</h2>
<div id="spinner"></div>
<p id="waiting">Waiting for the first response. Please be patient, this can take ages...</p>
<div id="options">
<div>
<input checked type="checkbox" id="matchWords" onchange="updateDownloads();">
<label for="matchWords">Match words</label>
</div>
<div>
<input checked type="checkbox" id="matchGeneral" onchange="updateDownloads();">
<label for="matchGeneral">Generalize phoneme symbols</label>
</div>
<div>
<input checked type="checkbox" id="matchOneForward" onchange="updateDownloads();">
<label for="matchOneForward">Match at least one forward</label>
</div>
<div>
<input checked type="checkbox" id="matchOneBackward" onchange="updateDownloads();">
<label for="matchOneBackward">Match at least one backward</label>
</div>
<div>
<input type="checkbox" id="ignoreWordGaps" onchange="updateDownloads();">
<label for="ignoreWordGaps">Ignore word gaps while matching phonemes</label>
</div>
<div>
<input type="checkbox" id="matchPunctuation" onchange="updateDownloads();">
<label for="matchPunctuation">Match punctuation (todo)</label>
</div>
<div>
<label for="contextDepth">Context depth</label>
<input type="number" id="contextDepth" min="1" value="100" step="1" onchange="updateDownloads();">
</div>
<h3>Influence</h3>
<div>
<label for="sortMethod">Sort method</label>
<select id="sortMethod" onchange="updateMethodLabel(this);">
<option selected value="duration">Closest duration</option>
<option value="longest">Longest duration</option>
<option value="shortest">Shortest duration</option>
<option value="first">Earliest start time</option>
<option value="last">Latest start time</option>
</select>
</div>
<div>
<label for="methodWeight" id="methodLabel">Sort by closest duration</label>
<input type="range" id="methodWeight" min="0" step="0.1" max="1" value="1" oninput="setWeight(this);">
<span id="methodWeightLabel">100%</span>
</div>
<div>
<label for="contextWeight">Sort by closest context</label>
<input type="range" id="contextWeight" min="0" step="0.1" max="1" value="1" oninput="setWeight(this);">
<span id="contextWeightLabel">100%</span>
</div>
<div>
<label for="pitchWeight">Sort by closest pitch (todo)</label>
<input type="range" id="pitchWeight" min="0" step="0.1" max="1" value="0" oninput="setWeight(this);">
<span id="pitchWeightLabel">0%</span>
</div>
<div>
<label for="volumeWeight">Sort by closest volume (todo)</label>
<input type="range" id="volumeWeight" min="0" step="0.1" max="1" value="0" oninput="setWeight(this);">
<span id="volumeWeightLabel">0%</span>
</div>
<h3>Correction</h3>
<div>
<input checked type="checkbox" id="transferPitch" onchange="updateDownloads();">
<label for="transferPitch">Transfer pitch</label>
</div>
<div>
<input checked type="checkbox" id="transferVolume" onchange="updateDownloads();">
<label for="transferVolume">Transfer volume</label>
</div>
<div>
<input checked type="checkbox" id="transferDuration" onchange="updateDownloads();">
<label for="transferDuration">Transfer duration</label>
</div>
<h3>Session</h3>
<div>
<label for="sampleRate">Sample rate</label>
<input type="number" id="sampleRate" min="1" value="44100" step="1000" onchange="updateDownloads();">
</div>
<div>
<label for="overlapStart">Start overlap</label>
<input type="number" id="overlapStart" value="0" step="0.01" onchange="updateDownloads();">
</div>
<div>
<label for="overlapEnd">End overlap</label>
<input type="number" id="overlapEnd" value="0.025" step="0.01" onchange="updateDownloads();">
</div>
<h3>Downloads</h3>
<div>
<a id="session">
<img src="icons/audition.png" alt="Adobe Audition Icon" height="64" width="64">
<span>Download for Adobe Audition</span>
</a>
</div>
<div>
<a download href="convertaudition.jsx">
<img src="icons/aftereffects.png" alt="Adobe After Effects Icon" height="64" width="64">
<span>Convert for Adobe After Effects</span>
</a>
</div>
<h3>Extras</h3>
<div>
<a id="input">
<img src="icons/json.png" alt="JSON Icon" height="64" width="64">
<span>Source JSON</span>
</a>
</div>
<div>
<a id="output">
<img src="icons/json.png" alt="JSON Icon" height="64" width="64">
<span>Destination JSON</span>
</a>
</div>
<div>
<a id="source">
<img src="icons/audio.png" alt="Audio Icon" height="64" width="64">
<span>Source audio</span>
</a>
</div>
<div>
<a id="destination">
<img src="icons/audio.png" alt="Audio Icon" height="64" width="64">
<span>Destination audio</span>
</a>
</div>
</div>
</div>
</body>
</html>