Hugging Face's logo

Spaces:
Dmtlant
/
VocaloidTTS
Running

App Files Community
Dmtlant commited on
Commit
a5338b8
·
verified ·
1 Parent(s): 3648e8f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +154 -19
index.html CHANGED
@@ -1,19 +1,154 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Vocal Part Generator</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ margin: 0;
15
+ background-color: #f0f0f0;
16
+ }
17
+ .container {
18
+ background-color: white;
19
+ padding: 20px;
20
+ border-radius: 10px;
21
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
22
+ max-width: 600px;
23
+ width: 100%;
24
+ }
25
+ textarea, select, button {
26
+ width: 100%;
27
+ margin-bottom: 10px;
28
+ padding: 5px;
29
+ }
30
+ textarea {
31
+ height: 100px;
32
+ }
33
+ button {
34
+ background-color: #4CAF50;
35
+ color: white;
36
+ border: none;
37
+ padding: 10px;
38
+ cursor: pointer;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body>
43
+ <div class="container">
44
+ <h1>Vocal Part Generator</h1>
45
+ <textarea id="verse-lyrics" placeholder="Enter verse lyrics..."></textarea>
46
+ <textarea id="chorus-lyrics" placeholder="Enter chorus lyrics..."></textarea>
47
+ <select id="voice-select"></select>
48
+ <button id="generate-button">Generate Vocal Part</button>
49
+ <button id="play-button" disabled>Play</button>
50
+ <audio id="audio-output" controls style="width: 100%; margin-top: 10px;"></audio>
51
+ </div>
52
+
53
+ <script>
54
+ const verseLyrics = document.getElementById('verse-lyrics');
55
+ const chorusLyrics = document.getElementById('chorus-lyrics');
56
+ const voiceSelect = document.getElementById('voice-select');
57
+ const generateButton = document.getElementById('generate-button');
58
+ const playButton = document.getElementById('play-button');
59
+ const audioOutput = document.getElementById('audio-output');
60
+
61
+ let voices = [];
62
+ let audioContext;
63
+ let melody = [];
64
+
65
+ function loadVoices() {
66
+ voices = speechSynthesis.getVoices();
67
+ voiceSelect.innerHTML = '';
68
+ voices.forEach((voice, index) => {
69
+ const option = document.createElement('option');
70
+ option.value = index;
71
+ option.textContent = `${voice.name} (${voice.lang})`;
72
+ voiceSelect.appendChild(option);
73
+ });
74
+ }
75
+
76
+ function generateMelody() {
77
+ const notes = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88]; // C4 to B4
78
+ melody = [];
79
+ for (let i = 0; i < 16; i++) {
80
+ melody.push(notes[Math.floor(Math.random() * notes.length)]);
81
+ }
82
+ }
83
+
84
+ async function generateVocalPart() {
85
+ const verseText = verseLyrics.value;
86
+ const chorusText = chorusLyrics.value;
87
+ const voiceIndex = voiceSelect.value;
88
+
89
+ if (!verseText || !chorusText) {
90
+ alert('Please enter both verse and chorus lyrics.');
91
+ return;
92
+ }
93
+
94
+ generateMelody();
95
+ audioContext = new (window.AudioContext || window.webkitAudioContext)();
96
+
97
+ const verseUtterance = new SpeechSynthesisUtterance(verseText);
98
+ verseUtterance.voice = voices[voiceIndex];
99
+
100
+ const chorusUtterance = new SpeechSynthesisUtterance(chorusText);
101
+ chorusUtterance.voice = voices[voiceIndex];
102
+
103
+ // Генерируем аудио для куплета и припева
104
+ const verseAudio = await synthesizeAudio(verseUtterance);
105
+ const chorusAudio = await synthesizeAudio(chorusUtterance);
106
+
107
+ // Комбинируем куплет и припев
108
+ const fullAudio = combineAudio(verseAudio, chorusAudio);
109
+
110
+ // Создаем URL для аудио и устанавливаем его как источник для аудио-элемента
111
+ const audioUrl = URL.createObjectURL(fullAudio);
112
+ audioOutput.src = audioUrl;
113
+
114
+ playButton.disabled = false;
115
+ }
116
+
117
+ async function synthesizeAudio(utterance) {
118
+ return new Promise((resolve) => {
119
+ const audioChunks = [];
120
+ utterance.onboundary = (event) => {
121
+ const oscillator = audioContext.createOscillator();
122
+ oscillator.frequency.setValueAtTime(melody[event.charIndex % melody.length], audioContext.currentTime);
123
+ oscillator.connect(audioContext.destination);
124
+ oscillator.start();
125
+ oscillator.stop(audioContext.currentTime + 0.1);
126
+ };
127
+ utterance.onend = () => {
128
+ const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
129
+ resolve(audioBlob);
130
+ };
131
+ speechSynthesis.speak(utterance);
132
+ });
133
+ }
134
+
135
+ function combineAudio(verseAudio, chorusAudio) {
136
+ return new Blob([verseAudio, chorusAudio], { type: 'audio/wav' });
137
+ }
138
+
139
+ function playVocalPart() {
140
+ audioOutput.play();
141
+ }
142
+
143
+ // Загружаем голоса при их готовности
144
+ speechSynthesis.onvoiceschanged = loadVoices;
145
+
146
+ // Загружаем голоса немедленно, на случай если они уже доступны
147
+ loadVoices();
148
+
149
+ // Обработчики событий
150
+ generateButton.addEventListener('click', generateVocalPart);
151
+ playButton.addEventListener('click', playVocalPart);
152
+ </script>
153
+ </body>
154
+ </html>