-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmusic.html
executable file
·215 lines (190 loc) · 16.8 KB
/
music.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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<head>
<title>Eric Holzer - Music</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="images/E_logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css?v=1.0.1">
<script src="js/main.js?v=1.0.1" defer></script>
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="project.html">Programming</a></li>
<li><a href="music.html" class="current-page">Music</a></li>
<li><a href="about.html">About</a></li>
</ul>
<img class="burger-menu" src="images/burger_menu_icon.png" alt="burger menu">
</nav>
<div id="core-content">
<div>
<h1>My music ♫</h1>
<p>Here are some music projects I worked on as a <span class="music">Media Music Composer</span>.</p>
<p>If you need music or sound design for your projects, hit me up on <a href="mailto:[email protected]" target="_blank">[email protected]</a>!</p>
<hr>
<h3>Demo Reel</h3>
<div class="responsive-iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9g_TWwcnvNU?si=VRqMEM0rDzN_B8li" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<hr>
<p>Click on a music genre to show tracks.</p>
<!-- <aside>
<h3>Music genres</h3>
<ul class="music-table-of-content">
<li><a href="#vgm">Video Game Music</a></li>
<li><a href="#animations">Music for Animations</a></li>
<li><a href="#lofi">Lo-fi - beats to study/relax to</a></li>
<li><a href="#ambient">Ambient Music</a></li>
<li><a href="#piano">Piano Works</a></li>
<li><a href="#electronic">Electronic Music</a></li>
<li><a href="#experimental">Experimental Music</a></li>
<li><a href="#trap">Trap Beats</a></li>
<li><a href="#short-films">Music for Short Films</a></li>
<li><a href="#jazz">Jazz Fusion</a></li>
</ul>
</aside>
<hr> -->
<h3 class="genre" id="vgm">→ Video Game Music</h3>
<div class="genre-div" id="vgm-div">
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1114719145&color=%23ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/8bit-battle-music-sampler" title="8Bit Battle Music SAMPLER" target="_blank" style="color: #888888; text-decoration: none;">8Bit Battle Music SAMPLER</a></div>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1289476894&color=%23ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/coolwave" title="coolwave" target="_blank" style="color: #888888; text-decoration: none;">coolwave</a></div>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1631235843&color=%23ffbd00&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/crispy-cheese-ost-gimme-that-cheese-back" title="Crispy Cheese OST - Gimme That Cheese Back!" target="_blank" style="color: #888888; text-decoration: none;">Crispy Cheese OST - Gimme That Cheese Back!</a></div>
<div class="audio-container">
<p>Freez & Hide OST - GOAAAL!!</p>
<audio controls>
<source src="music/GOAAAL!! - EGJ 22 Soundtrack.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
</div>
<h3 class="genre" id="animations">→ Music for Animations</h3>
<div class="genre-div" id="animations-div">
<div class="responsive-iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/3OsPPBC1YYo?si=M1P_KY5qLauMbucv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p class="credit">Animation by <a class="insta-link" href="https://www.instagram.com/onabszy/">@onabszy</a></p>
<div class="responsive-iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/11MTk-TOFlI?si=yThqn1Hcu4QlSooz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p class="credit">Animation by <a class="insta-link" href="https://www.instagram.com/onabszy/">@onabszy</a></p>
<video controls>
<source src="music/La Foret Enchantee.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p class="credit">Rescore from the film <span class="italic">Princess Mononoke</span></p>
</div>
<h3 class="genre" id="lofi">→ Lo-fi - beats to study/relax to</h3>
<div id="lofi-div" class="genre-div">
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/album/1kMYqto9FqKW5398dsM5sB?utm_source=generator&theme=0" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<div class="responsive-iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/eG5uJQ34Q_g?si=gCcwSjk6ojavnl9l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<h3 class="genre" id="ambient">→ Ambient Music</h3>
<div id="ambient-div" class="genre-div">
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1232224237&color=%235a6b60&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/lost-civilization" title="Lost Civilization" target="_blank" style="color: #888888; text-decoration: none;">Lost Civilization</a></div>
<div class="responsive-iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/P8jSNKNv0Tw?si=efi6BK4JQ0qV_6Sm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p class="credit">Made from sounds recorded in my kitchen.</p>
<div class="audio-container">
<p>Distant Desert</p>
<audio controls>
<source src="music/Distant Desert.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
<div class="audio-container">
<p>Horror Ambiance</p>
<audio controls>
<source src="music/In The Abyss.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<h3 class="genre" id="piano">→ Piano Works</h3>
<div id="piano-div" class="genre-div">
<div class="audio-container">
<p>Fork In The Water</p>
<audio controls>
<source src="music/Fork In The Water.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
<div class="audio-container">
<p>Entre Noir et Blanc</p>
<audio controls>
<source src="music/Entre Noir et Blanc.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
<div class="audio-container">
<p>Mellow Meadow</p>
<audio controls>
<source src="music/Mellow Meadow.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="audio-container">
<p>Quiet Silence</p>
<audio controls>
<source src="music/Quiet Silence.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<h3 class="genre" id="electronic">→ Electronic Music</h3>
<div id="electronic-div" class="genre-div">
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1444768294&color=%23d04480&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/terminal" title="_terminal" target="_blank" style="color: #888888; text-decoration: none;">_terminal</a></div>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1244263171&color=%23808484&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/just-lemme-sleep-ludum-dare-50-ost" title="Just Lemme Sleep - Ludum Dare 50 OST" target="_blank" style="color: #888888; text-decoration: none;">Just Lemme Sleep - Ludum Dare 50 OST</a></div>
</div>
<h3 class="genre" id="experimental">→ Experimental Music</h3>
<div id="experimental-div" class="genre-div">
<video controls>
<source src="music/mild cacophony.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p class="credit">Experimental sound design</p>
</div>
<h3 class="genre" id="trap">→ Trap Beats</h3>
<div id="trap-div" class="genre-div">
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1305336493&color=%23171817&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/rosa" title="Rosa" target="_blank" style="color: #888888; text-decoration: none;">Rosa</a></div>
<div class="audio-container">
<p>Trap for ads</p>
<audio controls>
<source src="music/Ad Music - Trap.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="audio-container">
<p>Samurai Trap</p>
<audio controls>
<source src="music/samurai trap.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
<h3 class="genre" id="short-films">→ Music for Short Films</h3>
<div id="short-films-div" class="genre-div">
<div class="responsive-iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YfoKsGt_o_8?si=6hDMD1Y5Oiq2p6wt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<h3 class="genre" id="jazz">→ Jazz Fusion</h3>
<div id="jazz-div" class="genre-div">
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1328636950&color=%23ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/choplechop" title="ChopLéChop" target="_blank" style="color: #888888; text-decoration: none;">ChopLéChop</a></div>
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1631406204&color=%235b8597&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #888888;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/user-806531614" title="erzloh" target="_blank" style="color: #888888; text-decoration: none;">erzloh</a> · <a href="https://soundcloud.com/user-806531614/choplechop-menu-ost" title="ChopLéChop Menu OST" target="_blank" style="color: #888888; text-decoration: none;">ChopLéChop Menu OST</a></div>
</div>
<hr>
</div>
<footer>
© <span id="footer--year"></span> Eric Holzer. Made with love :D
</footer>
</body>
</html>