-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtools.html
150 lines (143 loc) · 9.84 KB
/
tools.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Production Tools</title>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://www.youtube.com"> -->
<script src="typing-animation.js"></script> <!-- Add the typing animation script -->
<style>
.flicker-container {
animation: flicker 2.5s linear infinite;
animation-play-state: running;
}
@keyframes flicker {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.9;
}
}
.stop-flicker {
animation-play-state: paused;
opacity: 1; /* Set opacity to 1 when animation is paused */
}
</style>
</head>
<body>
<script src="typing-animation.js"></script> <!-- Add the typing animation script -->
<header class="header-container">
<div class="container">
<div class="typed-out" id="typing-title">Production Tools</div>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tools.html">Production Tools</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<style>
/* Adjust the border size and center the content */
.content {
border: 1px solid limegreen;
border-radius: 5px;
/* padding: 20px;*/
margin: 80px auto; /* Center the content horizontally */
max-width: 1340px; /* Adjust the max width as needed */
}
</style>
<div class="scroll-content">
<div class="content">
<div class="flicker-container">
<section class="matrix-section">
<div class="matrix-left-column">
<div class="matrix-intro">
<h2>Neural Drum Synth</h2>
<p>This project utilises a machine learning technique known as a generative adversarial network (GAN), trained on a dataset of drum samples that includes kicks, snares, and cymbals.</p>
</div>
<!-- <div class="matrix-screenshot">
<img src="nds_screenshot.png" alt="GUI Screenshot">
</div> -->
<br>
<br>
<iframe width="560" height="560" src="https://www.youtube.com/embed/NCvqfNqLIMg?si=Kgl1UGJWV7a3rusl" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<div class="matrix-intro">
<p>Follow <a href="https://github.com/jake-drysdale/neuraldrumsynth_gui" style="color: red;">this link</a> for the GitHub repository containing code, dependencies, pre-trained model weights, and an installation guide.</p>
</div>
</div>
<div class="matrix-right-column">
<div class="matrix-text">
<h2>GUI Features</h2>
<ul>
<li><strong>Drum type selection:</strong><br>Choose between kick, snare, and cymbal sounds. This is achieved by training the generative model with class labels during its development.</li>
<li><strong>Drum space:</strong><br>An interactive 2D pad allows you to explore drum sounds. Similar sounds are closer together on the pad. This arrangement is created using a dimensionality reduction technique called UMAP applied to the latent distribution.</li>
<li><strong>Morphing parameters:</strong><br>Fine-tune and create variations in the drum sounds using a set of synthesizer parameters. These parameters are identified through Principal Component Analysis (PCA) to find directions in the latent space.</li>
<li><strong>Layer select:</strong><br>Further refine the sound by selecting which layers of the network will be influenced by Drum space and Morphing parameters. Each layer affects different aspects of the sound, and you can control them independently.</li>
<li><strong>Amplitude:</strong><br>Adjust the overall volume level of the generated sound.</li>
<li><strong>Pitch:</strong><br>Alter the pitches of the drum sounds, changing the playback rate, plotting, and saving accordingly.</li>
<li><strong>Noise:</strong><br>Add subtle variations to each generated sound. At maximum, it mimics analog synthesizers, providing uniqueness in each generation. When minimized, the generations become more consistent.</li>
<li><strong>Random seed:</strong><br>Generate a random drum sound that you can manipulate using the Morphing parameters. This samples the latent space randomly.</li>
<li><strong>Blend Seed:</strong><br>Blend between the random seed and the UMAP space. This allows you to smoothly transition between a completely random sound and one guided by the UMAP vector.</li>
<li><strong>Play:</strong><br>Play back the generated audio.</li>
<li><strong>Save:</strong><br>Save the audio to a designated folder for your future use.</li>
</ul>
</div>
</div>
</section>
</div>
</div>
<div class="content">
<div class="flicker-container">
<section class="matrix-section">
<div class="matrix-left-column">
<div class="matrix-intro">
<h2>Neural Snare Synth</h2>
<p>This project utilises a machine learning technique known as a generative adversarial network (GAN) trained on the <a href="https://www.aes.org/e-lib/browse.cfm?elib=20912" style="color: red;">SDDS dataset</a>, a colletion of snare drums recorded with varied velocity snare strikes using 53 microphones, 10 tonally distinct snare drums and several common dampening methods. </p>
</div>
<iframe width="560" height="560" src="https://www.youtube.com/embed/8uNC-EYMgc8?si=7FzufQhuOXD8lzL_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
<div class="matrix-intro">
<p>Follow <a href="https://github.com/jake-drysdale/neuralsnaresynth_gui" style="color: red;">this link</a> for the GitHub repository containing code, dependencies, pre-trained model weights, and an installation guide.</p>
</div>
</div>
<div class="matrix-right-column">
<div class="matrix-text">
<h2>GUI Features</h2>
<ul>
<li><strong>Snare model:</strong><br>Choose between 10 tonally distinct snare drums.</li>
<li><strong>Dampening:</strong><br>Select between 5 different types of snare dampening. Dampening shortens decay time, producing a perceptually tighter, more controlled sound.</li>
<li><strong>Mixer:</strong><br>Enables amplitude control over 5 different microphone positions: overhead (OH), top (TP), bottom (BTM), room (RM), and shell (SH) miking. A snare is generated for each microphone position and these sliders determine their presence. Master (MAS) controls the overall amplitude mix.</li>
<li><strong>Morphing parameters:</strong><br>Fine-tune and create variations in the drum sounds using a set of synthesizer parameters. These parameters are identified through Principal Component Analysis (PCA) to find directions in the latent space.</li>
<li><strong>Noise:</strong><br>Add subtle variations to each generated sound. At maximum, it mimics analog synthesizers, providing uniqueness in each generation. When minimized, the generations become more consistent.</li>
<li><strong>Random seed:</strong><br>Generate a random drum sound that you can manipulate using the Morphing parameters. This samples the latent space randomly.</li>
<li><strong>Play:</strong><br>Play back the generated audio.</li>
<li><strong>Save:</strong><br>Save the audio to a designated folder for your future use.</li>
</ul>
</div>
</div>
</section>
</div>
</div>
</div>
<footer>
<p>© 2023 Jake Drysdale.</p>
</footer>
<!-- <script>
setTimeout(() => {
document.querySelectorAll('.flicker-container').forEach((element) => {
element.classList.add('stop-flicker');
});
}, 5000); // 3000 milliseconds = 3 seconds
</script> -->
<div class="dark-green-overlay"></div>
<div class="overlay"></div>
</body>
</html>