-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (121 loc) · 7.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><<API TTS>></title>
<link rel="stylesheet" href="11labs.css">
</head>
<body class="bg-gray-200">
<div class="max-w-[960px] w-full mx-auto py-10 grid place-content-center relative">
<input type="text" list="apis" name="api" id="api" onchange="enableTextArea(event)" placeholder="cole sua api" class="mx-auto w-[98%] p-4 text-center border border-gray-300 mb-5 duration-300 relative z-0">
<datalist id="apis">
<option value="f7333e903edf9a082fef5585c547e03b"></option>
<option value="2167e436442c988625c4a5cd6548befc"></option>
</datalist>
<textarea cols="200" rows="25" placeholder="digite em inglês..." onclick="alert()" readonly
class="bg-gray-100 rounded-lg border border-gray-300 p-5 outline-none focus-within:border-gray-500 active:border-gray-500 duration-150 disabled z-10 relative">
</textarea>
<sub class="absolute bottom-0 right-0 text-green-600">...</sub>
</div>
<audio controls title="digite a api..." class="hidden scale-0 opacity-0 pointer-events-none">
<a href="" download></a>
</audio>
<div class="fixed bottom-0 left-0 w-full bg-gray-100 flex player items-center gap-3 py-2 justify-center z-10 shadow-[-10px_0_30px_#88888866]">
<div class="w-[40px] text-2xl text-black p-2 play duration-100 transition-all">⯈</div>
<div class="w-[40px] text-2xl text-black p-2 pause hidden font-black stroke-black tracking-tighter duration-100 transition-all">❚❚</div>
<div class="w-[90%] relative">
<progress value="0" max="100" class="w-full translate-y-[2px] duration-100 transition-all"></progress>
</div>
<div class="w-[70px]">
<time class="duration-100 transition-all inline-block">0:00 </time>
<span class="text-gray-400 hover:text-gray-700 duration-100 indent-3 inline-block cursor-pointer" onclick="anchor.click()"> 🡇</span>
</div>
</div>
<dialog class="hidden absolute top-0 left-0 bg-[#00000066] w-full h-full place-items-center z-50">
<div class="absolute top-1/2 -translate-y-2/4 h-[120px] w-[400px] rounded-lg z-50 text-center grid place-items-center bg-white p-5">
<button onclick="removeDialog(event)" class="absolute top-0 right-1 text-gray-700 text-[1rem] ">X</button>
<p>Digite a API antes...</p>
<small class="text-gray-700">Não tem chave API, clique crie uma conta na <br>
<a href="https://elevenlabs.io/" class="underline text-blue-700" target="_blank">elevenLabs</a> e cole no campo.
</small>
</div>
</dialog>
<script>
const audio = document.querySelector('audio');
const anchor = document.querySelector('a');
const triggerInfo = new Event('change')
function enableTextArea(e){
document.querySelector('textarea').removeAttribute('readonly')
document.querySelector('textarea').classList.remove('disabled');
e.target.style.translate = '0 5rem';
e.target.blur()
}
const fetchURLs = ['user/subscription','text-to-speech/pNInz6obpgDQGcFmaJgB']
document.querySelector('input').addEventListener('blur',function(event){
document.querySelector('textarea').onchange = (e) =>{
const texto = e.target.value;
const info = {method: 'GET', headers: {"Accept": "audio/mpeg","Content-Type": "application/json","xi-api-key": event.target.value }}
const settings = {
method: 'POST',
headers: {"Accept": "audio/mpeg", "Content-Type": "application/json", "xi-api-key": event.target.value},
body: JSON.stringify({
"text": texto,
"model_id": "eleven_multilingual_v1",
"voice_settings": {
"stability": 0.5,
"similarity_boost": 0.5
}
})
}
fetchURLs.forEach(url =>{
fetch(`https://api.elevenlabs.io/v1/${url}`, url.includes('subscription') ? info : settings)
.then(response => !url.includes('subscription') ? response.blob() : response.text())
.then(blob => {
if(url.includes('subscription')){
const userInfo = JSON.parse(blob)
document.querySelector('sub').innerHTML = `você tem ${userInfo.character_limit - userInfo.character_count} caracteres restantes (incluindo espaços)`
document.querySelector('sub').style.color = userInfo.character_limit - userInfo.character_count < 3000 ? 'red' : 'text-green-600'
}else if(texto.length > 0 ){
audio.src = URL.createObjectURL(blob);
anchor.href = URL.createObjectURL(blob);
audio.currentTime = 0;
setTimeout(()=>{
document.querySelector('time').innerHTML = (document.querySelector('audio').duration / 100).toFixed(2).replace('.',':')
},200)
document.querySelector('audio').currentTime >= document.querySelector('audio').duration ?
( document.querySelector('.play').classList.toggle('hidden'),document.querySelector('.pause').classList.toggle('hidden')) : null
document.querySelector('.play').addEventListener('click',function(){
this.classList.add('hidden')
document.querySelector('.pause').classList.remove('hidden')
document.querySelector('audio').play();
})
document.querySelector('.pause').addEventListener('click',function(){
this.classList.add('hidden')
document.querySelector('.play').classList.remove('hidden')
document.querySelector('audio').pause();
})
document.querySelector('audio').addEventListener('timeupdate',function(){
document.querySelector('progress').value = (this.currentTime / this.duration) * 100
})
}
})
})
}
})
function alert(){
document.querySelector('textarea').classList.contains('disabled') ?
(
document.querySelector('dialog').setAttribute('open',''),
document.querySelector('dialog').classList.remove('hidden'),
document.querySelector('dialog').classList.add('grid')
) : null
}
function removeDialog(e){
e.target.parentElement.parentElement.removeAttribute('open');
e.target.parentElement.parentElement.classList.add('hidden');
}
window.onkeydown = (e) =>{ e.code == 'Escape' ? document.querySelector('button').click() : null }
</script>
</body>
</html>