-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
252 lines (246 loc) · 8.05 KB
/
index.html
File metadata and controls
252 lines (246 loc) · 8.05 KB
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<!--
Document Type Declaration: This document is written in HTML5.
-->
<html lang="en">
<!--
Root element of the HTML document, specifying the language as English.
-->
<head>
<!--
Meta tags providing metadata about the document.
-->
<meta charset="UTF-8">
<!--
Character encoding for the document, set to UTF-8 for internationalization.
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
Viewport settings for responsive design, setting the initial scale to 1.0.
-->
<title>Interactive Music Programming Interface</title>
<!--
Title of the page, displayed in the browser's title bar and search engine results.
-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<!--
Link to an external stylesheet, providing visual styling for the document.
-->
</head>
<body>
<!-- Navigation Bar -->
<nav class="main-nav">
<div class="nav-container">
<div class="nav-logo">
<a href="index.html">Music Programming</a>
</div>
<ul class="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="synth.html">Synthesizer</a></li>
<li><a href="oscillation.html">Audio Effects</a></li>
<li><a href="e-sitar.html">E-Sitar</a></li>
</ul>
</div>
</nav>
<!--
Container element for the animation, with an ID for targeting with CSS or JavaScript.
-->
<div id="animation-container"></div>
<main>
<!--
Main content section of the page, containing the project title and introduction.
-->
<h1>Interactive Music Programming Interface</h1>
<!--
Heading element displaying the project title.
-->
<p>An interactive web application that brings together music and programming, allowing you to experiment with sound synthesis, audio manipulation, and visual representations of sound waves.</p>
<!--
Paragraph element providing a brief introduction to the project.
-->
<!--
Features section, highlighting the key features of the project.
-->
<section>
<h2>Features</h2>
<!--
Heading element displaying the section title.
-->
<ul>
<!--
Unordered list element containing the feature items.
-->
<li><strong>Sound Synthesizer</strong>
<!--
List item element with a strong emphasis on the feature title.
-->
<ul>
<!--
Nested unordered list element containing the feature details.
-->
<li>Real-time frequency control (20Hz - 9000Hz)</li>
<!--
List item element describing the frequency control feature.
-->
<li>Multiple waveform options</li>
<!--
List item element describing the waveform options feature.
-->
<li>Customizable wave mixing</li>
<!--
List item element describing the wave mixing feature.
-->
<li>Interactive amplitude control</li>
<!--
List item element describing the amplitude control feature.
-->
</ul>
</li>
<li><strong>Audio Effect Processor</strong>
<!--
List item element with a strong emphasis on the feature title.
-->
<ul>
<!--
Nested unordered list element containing the feature details.
-->
<li>Audio file processing</li>
<!--
List item element describing the audio file processing feature.
-->
<li>Trigonometric modulation effects</li>
<!--
List item element describing the trigonometric modulation effects feature.
-->
<li>Real-time parameter adjustment</li>
<!--
List item element describing the real-time parameter adjustment feature.
-->
<li>Dynamic audio manipulation</li>
<!--
List item element describing the dynamic audio manipulation feature.
-->
</ul>
</li>
<li><strong>Visual Wave Display</strong>
<!--
List item element with a strong emphasis on the feature title.
-->
<ul>
<!--
Nested unordered list element containing the feature details.
-->
<li>Real-time waveform visualization</li>
<!--
List item element describing the real-time waveform visualization feature.
-->
<li>Interactive animations</li>
<!--
List item element describing the interactive animations feature.
-->
<li>Dynamic color schemes</li>
<!--
List item element describing the dynamic color schemes feature.
-->
</ul>
</li>
</ul>
</section>
<!--
Tools section, showcasing the available tools for the project.
-->
<section>
<h2>Available Tools</h2>
<!--
Heading element displaying the section title.
-->
<div class="tools-grid">
<!--
Container element for the tools grid, with a class for styling.
-->
<div class="tool-card">
<!--
Container element for a single tool card, with a class for styling.
-->
<h3>Sound Synthesis</h3>
<!--
Heading element displaying the tool title.
-->
<p>Create and manipulate digital sounds using various waveforms and frequencies.</p>
<!--
Paragraph element providing a brief description of the tool.
-->
</div>
<div class="tool-card">
<!--
Container element for a single tool card, with a class for styling.
-->
<h3>Audio Effects</h3>
<!--
Heading element displaying the tool title.
-->
<p>Process and modify audio files with different mathematical functions.</p>
<!--
Paragraph element providing a brief description of the tool.
-->
</div>
</div>
</section>
<!--
Getting Started section, providing instructions for new users.
-->
<section>
<h2>Getting Started</h2>
<!--
Heading element displaying the section title.
-->
<p>Begin by exploring the synthesizer to create basic sounds, then move on to the audio effects processor for more complex manipulations. All tools feature real-time visual feedback to help you understand the relationship between mathematics and sound.</p>
<!--
Paragraph element providing a brief introduction to getting started with the project.
-->
</section>
<!--
Technical Requirements section, outlining the necessary technical specifications.
-->
<section>
<h2>Technical Requirements</h2>
<!--
Heading element displaying the section title.
-->
<ul>
<!--
Unordered list element containing the technical requirements.
-->
<li>Modern web browser with Web Audio API support</li>
<!--
List item element describing the browser requirement.
-->
<li>JavaScript enabled</li>
<!--
List item element describing the JavaScript requirement.
-->
<li>Speakers or headphones</li>
<!--
List item element describing the audio output requirement.
-->
<li>Stable internet connection</li>
<!--
List item element describing the internet connection requirement.
-->
</ul>
</section>
</main>
<!--
Script tags for loading external JavaScript files.
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<!--
Script tag loading the p5.js library from a CDN.
-->
<script src="sketch.js"></script>
<!--
Script tag loading the custom sketch.js file.
-->
</body>
</html>