forked from Weilbyte/tiktok-tts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (122 loc) · 6.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script defer data-domain="weilbyte.github.io/tiktok-tts" src="https://plausible.io/js/plausible.js"></script>
<script src="static/script.js"></script>
<title>TikTok TTS</title>
<style>
#funny:hover {
opacity: 0;
transition: opacity 1s ease-out 100ms
}
#funny {
transition: opacity 1s ease-in 100ms
}
.bold {
font-weight:bold;
}
</style>
</head>
<body class="flex flex-col" style="background-color: #fbfbfb">
<div class="bg-stone-100 p-12 grow">
<img src="static/tiktok_logo.png" width="64px" height="64px" class="mx-auto"/>
<h1 class="text-6xl font-bold text-center">
TikTok TTS
</h1>
<p class="text-center pt-6">Generate the <span id="funny">funny</span> TikTok lady voice <sup>(& more)</sup> in your browser</p>
</div>
<div class="bg-slate-200 md:mt-11 p-11 md:mx-auto h-2/4 md:w-3/5 md:rounded">
<form onsubmit="event.preventDefault(); submitForm()">
<label for="text" hidden>Text to generate into speech</label>
<p class="rounded bg-slate-100 h-8 w-16 text-center leading-8 mb-2 float-right" id="charcount">999/999</p>
<textarea id="text" name="text" placeholder="The fungus among us." oninput="onTextareaInput()" class="h-full w-full rounded p-2 bg-slate-100" disabled></textarea><br/>
<label for="voice" hidden>Voice to use</label>
<select name="voice" id="voice" class="rounded p-1 bg-slate-100 mt-2 w-full sm:w-1/2" disabled>
<option selected disabled hidden value="none">Select a voice</option>
<option disabled class="bold">English US</option>
<option value="en_us_001">Female</option>
<option value="en_us_006">Male 1</option>
<option value="en_us_007">Male 2</option>
<option value="en_us_009">Male 3</option>
<option value="en_us_010">Male 4</option>
<option disabled></option>
<option disabled class="bold">English UK</option>
<option value="en_uk_001">Male 1</option>
<option value="en_uk_003">Male 2</option>
<option disabled></option>
<option disabled class="bold">English AU</option>
<option value="en_au_001">Female</option>
<option value="en_au_002">Male</option>
<option disabled></option>
<option disabled class="bold">French</option>
<option value="fr_001">Male 1</option>
<option value="fr_002">Male 2</option>
<option disabled></option>
<option disabled class="bold">German</option>
<option value="de_001">Female</option>
<option value="de_002">Male</option>
<option disabled></option>
<option disabled class="bold">Spanish</option>
<option value="es_002">Male</option>
<option disabled></option>
<option disabled class="bold">Spanish MX</option>
<option value="es_mx_002">Male</option>
<option disabled></option>
<option disabled class="bold">Portuguese BR</option>
<!-- <option value="br_001">Female 1</option> -->
<option value="br_003">Female 2</option>
<option value="br_004">Female 3</option>
<option value="br_005">Male</option>
<option disabled></option>
<option disabled class="bold">Indonesian</option>
<option value="id_001">Female</option>
<option disabled></option>
<option disabled class="bold">Japanese</option>
<option value="jp_001">Female 1</option>
<option value="jp_003">Female 2</option>
<option value="jp_005">Female 3</option>
<option value="jp_006">Male</option>
<option disabled></option>
<option disabled class="bold">Korean</option>
<option value="kr_002">Male 1</option>
<option value="kr_004">Male 2</option>
<option value="kr_003">Female</option>
<option disabled></option>
<option disabled class="bold">Characters</option>
<option value="en_us_ghostface">Ghostface (Scream)</option>
<option value="en_us_chewbacca">Chewbacca (Star Wars)</option>
<option value="en_us_c3po">C3PO (Star Wars)</option>
<option value="en_us_stitch">Stitch (Lilo & Stitch)</option>
<option value="en_us_stormtrooper">Stormtrooper (Star Wars)</option>
<option value="en_us_rocket">Rocket (Guardians of the Galaxy)</option>
<option disabled></option>
<option disabled class="bold">Singing</option>
<option value="en_female_f08_salut_damour">Alto</option>
<option value="en_male_m03_lobby">Tenor</option>
<option value="en_male_m03_sunshine_soon">Sunshine Soon</option>
<option value="en_female_f08_warmy_breeze">Warmy Breeze</option>
<option value="en_female_ht_f08_glorious">Glorious</option>
<option value="en_male_sing_funny_it_goes_up">It Goes Up</option>
<option value="en_male_m2_xhxs_m03_silly">Chipmunk</option>
<option value="en_female_ht_f08_wonderful_world">Dramatic</option>
</select>
<button class="rounded bg-slate-100 p-1 w-full sm:w-24 sm:float-right mt-2" id="submit" disabled>Generate</button>
</form>
</div>
<div class="bg-red-200 md:mt-6 p-6 pt-3 md:mx-auto h-2/4 md:w-2/4 md:rounded" id="error" style="display: none">
<h1 class="text-center font-bold text-xl">Error</h1>
<p class="text-center" id="errortext">There was an error.</p>
</div>
<div class="bg-green-200 md:mt-6 p-6 pt-3 md:mx-auto h-2/4 md:w-2/4 md:rounded" id="success" style="display: none">
<h1 class="text-center font-bold text-xl">Success</h1>
<p class="text-center" id="generatedtext"></p>
<audio controls class="mx-auto mt-2" id="audio" src="">
Umm, update your browser.
</audio>
</div>
</body>
</html>