-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
430 lines (394 loc) · 24.9 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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lizen</title>
<meta name="description"
content="Why stare at the screen? Listen! Turn any content into quick podcasts. Online text to speech WebApp. Pick a Voice.">
<meta property="og:type" content="wesbite">
<meta property="og:url" content="https://vivek-nexus.github.io/lizen/">
<meta property="og:title" content="Lizen">
<meta property="og:description" content="Why stare at the screen? Lizen!">
<meta property="og:image" content="https://vivek-nexus.github.io/lizen/images/headphones.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="https://vivek-nexus.github.io/lizen/images/headphones.png" />
<link rel="manifest" href="https://vivek-nexus.github.io/lizen/manifest.json">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1VRR0WDTSK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1VRR0WDTSK');
</script>
</head>
<body>
<section id="hero" class="container my-5">
<div class="row">
<div class="col-12 col-lg-4 text-center text-lg-start mb-5">
<div>
<img class="headphones mb-5" src="https://vivek-nexus.github.io/lizen/images/headphones.png"
alt="headphones">
</div>
<div>
<h5>WHY STARE AT THE SCREEN?</h5>
<a href="/lizen/#app" class="text-decoration-none">
<h1>Lizen!</h1>
</a>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="mx-lg-5">
<h5 class="mb-4 text-center text-lg-start">HOW?</h5>
<div class="mx-auto mx-lg-0" style="width: max-content;">
<div class="how-to-cards p-2 p-lg-4 h-card-1 card-cta">
<span class="material-icons me-3">notes</span>
<span class="fs-6 fs-lg-4">Paste or fetch article text</span>
</div>
<div class="text-center">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="arrow-1"
d="M7.29289 19.7071C7.68342 20.0976 8.31658 20.0976 8.70711 19.7071L15.0711 13.3431C15.4616 12.9526 15.4616 12.3195 15.0711 11.9289C14.6805 11.5384 14.0474 11.5384 13.6569 11.9289L8 17.5858L2.34315 11.9289C1.95262 11.5384 1.31946 11.5384 0.928932 11.9289C0.538408 12.3195 0.538408 12.9526 0.928932 13.3431L7.29289 19.7071ZM7 0L7 19H9L9 0L7 0Z"
fill="black" />
</svg>
</div>
<div class="how-to-cards p-2 p-lg-4 h-card-2 card-cta">
<span class="material-icons me-3">speaker_notes</span>
<span class="fs-6 fs-lg-4">Pick a voice</span>
</div>
<div class="text-center">
<svg width="16" height="20" viewBox="0 0 16 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="arrow-2"
d="M7.29289 19.7071C7.68342 20.0976 8.31658 20.0976 8.70711 19.7071L15.0711 13.3431C15.4616 12.9526 15.4616 12.3195 15.0711 11.9289C14.6805 11.5384 14.0474 11.5384 13.6569 11.9289L8 17.5858L2.34315 11.9289C1.95262 11.5384 1.31946 11.5384 0.928932 11.9289C0.538408 12.3195 0.538408 12.9526 0.928932 13.3431L7.29289 19.7071ZM7 0L7 19H9L9 0L7 0Z"
fill="black" />
</svg>
</div>
<div class="how-to-cards p-2 p-lg-4 h-card-3 card-cta">
<button class="button-link-like p-0 d-flex align-items-center">
<span class="material-icons me-3">graphic_eq</span>
<span class="fs-6 fs-lg-4">Lizen like a podcast!</span>
</button>
</div>
<div class="text-end">
<button id="play-again" class="button-link-like"><span
class="material-icons">refresh</span></button>
</div>
<div class="d-lg-none text-center">
<button id="scroll-cta" class="button-link-like p-0"><span class="material-icons"
style="font-size: 3rem;">expand_more</span></button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container my-5 py-5" id="app">
<h2 class="mb-5 text-center text-lg-start">What will you lizen to, today?</h2>
<div class="row pb-5">
<div class="col-12 col-lg-4 mb-5">
<!-- Article link -->
<div class="form-floating input-group mb-0">
<input style="background-color: #2E2E2E99; border-color: #03DAC599; color: #FFFFFFDE;" type="url"
class="form-control" id="input-url" placeholder="https://article.com/sample-article">
<label style="color: #03DAC5;" for="floatingInput">Article link</label>
<button class="btn btn-outline-secondary" type="button" id="fetch-button">FETCH</button>
</div>
<!-- Modal -->
<div class="d-flex justify-content-end">
<button type="button" class="button-link-like" data-bs-toggle="modal"
data-bs-target="#url-not-working">NOT WORKING?</button>
</div>
<div class="text-center mb-2">OR</div>
<img class="mx-auto" id="fetch-animation" src="https://vivek-nexus.github.io/lizen/images/loading.svg" alt="loading" style="display: none;">
<!-- Article text -->
<div class="form-floating">
<textarea
style="background-color: #2E2E2E99; border-color: #03DAC599; color: #FFFFFFDE; height: 200px; line-height: 1.5rem;"
class="form-control" placeholder="Article full text" id="input-text">This is a sample text!
You can use this tool to listen to news or web pages instead of reading them, proof-read your articles, explore pronunciation or even just have fun!
On desktop devices, Google voices provided by Chrome browser are the best. On Android/iOS, good voices are installed by default, but may need tweaking in device settings.</textarea>
<label style="color: #03DAC5;" for="floatingTextarea2">Article full text</label>
</div>
<!-- CLEAR -->
<div class="d-flex justify-content-end mb-3">
<button id="reset-button" class="button-link-like">CLEAR</button>
</div>
<!-- PICK A VOICE -->
<select class="d-block" name="input-voice" id="input-voice" style="width: 100%;">
<option value="" data-voice-name="" data-voice-lang="">Pick a voice</option>
</select>
<!-- MORE SETTINGS -->
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="text-start my-auto">For best Google voices, use <img style="height: 20px;" src="https://vivek-nexus.github.io/lizen/images/chrome-logo.svg" alt="chrome-logo"></div>
<div class="text-end my-auto">
<button id="refresh-voices" class="button-link-like pb-0"><span class="material-icons">autorenew</span></button>
<button type="button" class="button-link-like ms-2 pb-0" data-bs-toggle="modal"
data-bs-target="#more-tts-settings"><span class="material-icons">settings</span></button>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
<button id="lizen" type="button" class="btn btn-primary me-2">LIZEN</button>
<button style="color: #03DAC5;" id="stop-button" type="button" class="button-link-like">STOP</button>
</div>
<div>
<button type="button" class="button-link-like" data-bs-toggle="modal"
data-bs-target="#help-tts-settings">HELP</button>
</div>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="player-container align-items-center mx-lg-5 p-lg-5">
<div class="mx-auto" style="font-size: 72px" id="eyes">
👀
</div>
<div id="playing-div" style="width: 100%;">
<!-- <div class="player-controls mb-4">
<div class="d-flex align-items-center justify-content-center px-4 pb-3">
<button id="prev-button" class="button-link-like"><span class="material-icons" style="font-size: 3rem;">skip_previous</span></button>
<button id="speak-button" class="button-link-like"><span class="material-icons" style="font-size: 4rem;">play_arrow</span></button>
<button id="resume-button" class="button-link-like"><span class="material-icons" style="font-size: 4rem;">play_arrow</span></button>
<button id="pause-button" class="button-link-like"><span class="material-icons" style="font-size: 4rem;">pause</span></button>
<button id="next-button" class="button-link-like"><span class="material-icons" style="font-size: 3rem;">skip_next</span></button>
</div>
<div class="floating-reset text-center"><button id="stop-button" class="button-link-like">RESET</button></div>
<div id="progress-bar" style="width:0%; padding: 0.1rem; background-color: #03DAC5;"></div>
</div> -->
<!-- <div class="form-check form-switch d-none d-lg-flex align-items-center mb-3">
<input style="background-color: #03DAC599;" class="form-check-input my-0 me-2"
type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Continue lizening in
background</label>
</div> -->
<div class="animation-wrapper justify-content-center mb-2" style="height: 30px;">
<div class="line1 speaking-animation"></div>
<div class="line2 speaking-animation"></div>
<div class="line3 speaking-animation"></div>
<div class="line4 speaking-animation"></div>
</div>
<div class="reading-now">
<div class="mb-3" style="font-weight: 600; color: rgba(255, 255, 255, 0.80);">READING NOW
</div>
<p id="reading-text" style="color: rgba(255, 255, 255, 0.50);">👀</p>
</div>
</div>
</div>
</div>
</div>
<!-- Not working? Modal -->
<div class="modal fade" id="url-not-working" tabindex="-1" aria-labelledby="url-not-working" aria-hidden="true">
<div class="modal-dialog text-dark">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Fetching Articles Help</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="font-weight-bold mb-3">If 'Fetch Article' is not working or returning unexpected
results, please copy paste the desired content from source page, into the text box directly.
</div>
<div class="fw-bold">Common reasons for this behaviour:</div>
<ol>
<li>My URL fetch service is down -_-</li>
<li>Shortened URLs or re-directing URLs.</li>
<li>Funny formatting of source website.</li>
</ol>
</div>
</div>
</div>
</div>
<!-- More TTS settings Modal -->
<div class="modal fade" id="more-tts-settings" tabindex="-1" aria-labelledby="more-tts-settings"
aria-hidden="true">
<div class="modal-dialog text-dark">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">More Settings</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>
<label for="input-rate">Rate</label>
<input type="range" min="0.5" max="2" value="1" step="0.1" id="input-rate">
</div>
<div>
<label for="input-pitch">Pitch</label>
<input type="range" min="0" max="2" value="1" step="0.1" id="input-pitch">
</div>
</div>
</div>
</div>
</div>
<!-- Help Modal -->
<div class="modal fade" id="help-tts-settings" tabindex="-1" aria-labelledby="help-tts-settings"
aria-hidden="true">
<div class="modal-dialog text-dark">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Help on Voices and Text to Speech</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="fw-bold">Some sentences are cut off in the middle.</div>
<div>Long sentences may not be supported by some Cloud Based Text to Speech Engines. Please skip
such sentences.</div>
<div class="fw-bold mt-3">My Voice Choice is not respected.</div>
<div>Some Text to Speech Engines(TTS) use the defeault voice set in device TTS settings for a
language. Please install and configure voices in your device settings. Please see links
below for indicative guides.</div>
<ul>
<li><a href="https://support.google.com/accessibility/android/answer/6006983?hl=en">Setting
up Text to Speech on Android</a></li>
<li><a
href="https://support.microsoft.com/en-us/office/how-to-download-text-to-speech-languages-for-windows-10-d5a6b612-b3ae-423f-afa5-4f6caf1ec5d3">Setting
up Text to Speech on Windows</a></li>
<li><a href="https://support.apple.com/en-in/guide/ipad/ipad9a247097/ipados">Setting up Text
to Speech on iPad / iPhone</a></li>
<li><a
href="https://etc.usf.edu/techease/4all/vision/how-can-i-use-text-to-speech-in-mac-os-x/">Setting
up Text to Speech on Mac</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- PWA Modal -->
<div class="modal fade" id="pwa" tabindex="-1" aria-labelledby="pwa" aria-hidden="true">
<div class="modal-dialog text-dark">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Install to home screen for easy access</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="fw-bold">Mobile devices (Android)</div>
<div>Open three dots menu (options) of the browser > Add to home screen</div>
<div class="fw-bold">Desktop devices</div>
<div>Open three dots menu (options) of the browser > More tools > Create shortcut</div>
</div>
</div>
</div>
</div>
</section>
<section class="container text-center">
Designed and developed by <a style="color: #FFFFFF99;" href="https://vivek-nexus.github.io">Vivek G</a>. Copyright 2021.<br>
Attribution: Music vector created by rawpixel.com - <a style="color: #FFFFFF99;" href="https://www.freepik.com/vectors/music">www.freepik.com</a>
</section>
<nav class="navbar fixed-bottom mb-3">
<div class="container">
<div class="player-controls">
<div class="d-flex align-items-center justify-content-center px-4 pb-3">
<button id="prev-button" class="button-link-like"><span class="material-icons"
style="font-size: 3rem; color: #03DAC5;">skip_previous</span></button>
<button id="speak-button" class="button-link-like"><span class="material-icons"
style="font-size: 4rem; color: #03DAC5;">play_arrow</span></button>
<button id="resume-button" class="button-link-like"><span class="material-icons"
style="font-size: 4rem; color: #03DAC5;">play_arrow</span></button>
<button id="pause-button" class="button-link-like"><span class="material-icons"
style="font-size: 4rem; color: #03DAC5;">pause</span></button>
<button id="next-button" class="button-link-like"><span class="material-icons"
style="font-size: 3rem; color: #03DAC5;">skip_next</span></button>
</div>
<div class="floating-reset text-center">
<button type="button" class="button-link-like" data-bs-toggle="modal"
data-bs-target="#pwa">INSTALL APP</button>
</div>
<div id="progress-bar" style="width:0%; padding: 0.1rem; background-color: #03DAC5;"></div>
</div>
</div>
</nav>
<!-- <section class="container mt-5 pt-5">
<h1 class="font-weight-bold text-center" style="color: #2200FF;">Love Podcastify?</h1>
<div class="text-center m-0 p-0 mini-cards" style="background: none;">
<div class="mt-2 d-flex justify-content-center">
<button class="button-link-like" data-toggle="modal" data-target="#help-a2hs">
<img style="display: inline-block;" src="images/icon-a2hs.svg" alt="">
<p class="font-weight-bold text-dark">Add Podcastify to Home Screen</p>
</button>
</div>
<div class="modal fade" id="help-a2hs" tabindex="-1" role="dialog" aria-labelledby="help-a2hs-label"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="help-a2hs-label">Adding Podcastify to Home Screen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="font-weight-bold">
<h2>Chrome</h2>
</div>
<div><img src="images/a2hs-chrome.jpeg" alt="chrome"
style="max-width: 90%; border: 1px solid black; border-radius: 5px;"></div>
<div class="font-weight-bold mt-5">
<h2>Mozilla Firefox</h2>
</div>
<div><img src="images/a2hs-firefox.jpeg" alt="Firefox"
style="max-width: 90%; border: 1px solid black; border-radius: 5px;"></div>
<div class="font-weight-bold mt-5">
<h2>Safari</h2><a
href="https://blog.expo.io/enabling-ios-splash-screens-for-progressive-web-apps-34f06f096e5c">(Image
Credits)</a>
</div>
<div><a href="https://miro.medium.com/max/1050/1*4yTqRXTD-GK2GOmqblGhxA.png"><img
src="images/a2hs-ios.png" alt="Safari"
style="max-width: 90%; border: 1px solid black; border-radius: 5px;"></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center m-0 p-0 mt-1 mini-cards" style="background: none;">
<a href="https://vivek-nexus.medium.com/podcast-ify-a-text-to-speech-case-study-45538ce904e3">
<img style="display: inline-block;" src="images/design-journey.svg.svg" alt="Like">
<p class="font-weight-bold text-dark">Read the Design Journey</p>
</a>
</div>
<div class="text-center m-0 p-0 mt-1 mini-cards" style="background: none;">
<a href="https://www.linkedin.com/posts/activity-6692270711857319936-KohB">
<img style="display: inline-block;" src="images/icon-like.svg" alt="Like">
<p class="font-weight-bold text-dark">Give me a Like!</p>
</a>
</div>
</section> -->
<!-- <footer>Designed and built by Vivek. Copyright 2020.<br />See the nerdy version of this page <a class="text-light"
href="https://vivek-nexus.github.io/tts.html">here</a>.</footer> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="tts.js"></script>
<script src="animate-js.js"></script>
<script src="nosleep.js"></script>
<script>
setTimeout(() => {
const newURL = "https://vivek-nexus.github.io/listen/"
const result = confirm("There's a new version of this tool. Would you like to use that?");
if (result) {
window.location.assign = newURL;
window.open(newURL, "_top")
}
}, 1000);
</script>
<script type="text/javascript">
window._mfq = window._mfq || [];
(function () {
var mf = document.createElement("script");
mf.type = "text/javascript"; mf.defer = true;
mf.src = "//cdn.mouseflow.com/projects/d650c614-2064-44cc-804a-54644c37dd52.js";
document.getElementsByTagName("head")[0].appendChild(mf);
})();
</script>
</body>
</html>