-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (64 loc) · 2.6 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
<!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">
<img src="./misc/logo.svg" alt="textsynth logo" width="200" height="200">
<h2>
Generate synthesizer sounds from text prompts with a simple evolutionary algorithm.
</h2>
<a href="https://github.com/erl-j/textsynth/">Github link</a>
<p>
</p>
<p>
Start with randomly initialized synthesizer sounds. Each iteration, the current synthesizer sounds are evaluated
on how well they match the text prompt. The best sounds are then combined and mutated to generate new sounds for
the next iteration. 200 generations w/ 50 samples takes about ~20s on a 3090 (not tested on CPU).
</p>
</head>
<body>
<!-- Placeholder for audio examples -->
<div id="audioContainer"></div>
<script>
const prompts = [
"kick drum",
"rain",
"bird",
"piano",
"hihat",
"whistling",
"bass",
"808 bass",
"human scream",
]
// Reference to the container div
const audioContainer = document.getElementById('audioContainer');
stages = ["evolution", "final"]
stage_captions = ["Evolution, best per generation (200 generations)", "Final population"]
// Loop through each audio file and create the necessary HTML elements
prompts.forEach(file => {
const promptElement = document.createElement('h2');
promptElement.textContent = "Prompt:" + file
audioContainer.appendChild(promptElement);
stages.forEach((stage, stage_idx) => {
// Create title element
const stageTitleElement = document.createElement('h3');
stageTitleElement.textContent = stage_captions[stage_idx];
audioContainer.appendChild(stageTitleElement);
// Create audio element
const audioElement = document.createElement('audio');
audioElement.controls = true;
// Create source element
const sourceElement = document.createElement('source');
sourceElement.src = "./demos/" + file + "_" + stage + ".wav";
sourceElement.type = "audio/wav";
// Append elements
audioElement.appendChild(sourceElement);
audioContainer.appendChild(audioElement);
})
});
</script>
</body>
</body>
</html>