-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsamples.html
127 lines (108 loc) · 3.54 KB
/
samples.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
<!DOCTYPE html>
<html>
<head>
<title>Mel Spectrogram Samples</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #000;
color: #fff;
}
.header-image {
width: 500px;
height: 100px;
object-fit: cover;
}
.sample-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.sample-container img {
max-width: 200px;
margin-right: 20px;
}
.sample-description {
flex: 1;
}
audio {
margin-top: 10px;
}
h1, p, a {
color: #fff;
}
.header-description {
margin-bottom: 20px;
}
.author-info {
margin-bottom: 20px;
}
.author-info a {
color: #fff;
margin-right: 10px;
text-decoration: none;
}
.author-info a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<img class="header-image" src="https://github.com/markstent/sonic-diffusion/raw/main/sonicdiffusion_logo.png" alt="Header Image">
<div class="header-description">
<p>This page showcases sample Mel spectrogram images and their related audio files from the Sonic Diffusion project trained on melodic techno sound files. Feel free to explore the samples and listen to the audio files. For more details and source code, visit the <a href="https://github.com/markstent/sonic-diffusion">GitHub repository</a>.</p>
</div>
<div class="author-info">
<a href="mailto:mark@markstent.co.za">Email</a>
<a href="https://www.linkedin.com/in/markstent">LinkedIn</a>
<a href="https://twitter.com/mrkstnt">Twitter</a>
</div>
<div class="sample-container">
<img src="https://github.com/markstent/sonic-diffusion/blob/main/samples/images/1.png" alt="Sample 1">
<div class="sample-description">
<h2>Sample 1</h2>
<audio controls>
<source src="https://github.com/markstent/sonic-diffusion/blob/main/samples/audio/1.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div class="sample-container">
<img src="https://github.com/markstent/sonic-diffusion/blob/main/samples/images/1.png" alt="Sample 2">
<div class="sample-description">
<h2>Sample 2</h2>
<audio controls>
<source src="https://github.com/markstent/sonic-diffusion/blob/main/samples/audio/2.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div class="sample-container">
<img src="https://github.com/markstent/sonic-diffusion/blob/main/samples/images/3.png" alt="Sample 3">
<div class="sample-description">
<h2>Sample 2</h2>
<audio controls>
<source src="https://github.com/markstent/sonic-diffusion/blob/main/samples/audio/3.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div class="sample-container">
<img src="https://github.com/markstent/sonic-diffusion/blob/main/samples/images/3.png" alt="Sample 4">
<div class="sample-description">
<h2>Sample 4</h2>
<audio controls>
<source src="https://github.com/markstent/sonic-diffusion/blob/main/samples/audio/4.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div class="sample-container">
<img src="https://github.com/markstent/sonic-diffusion/blob/main/samples/images/3.png" alt="Sample 5">
<div class="sample-description">
<h2>Sample 5</h2>
<audio controls>
<source src="https://github.com/markstent/sonic-diffusion/blob/main/samples/audio/5.mp3" type="audio/mpeg">
</audio>
</div>
</div>
</body>
</html>