-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (112 loc) · 4.39 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./assets/logo.webp">
<link rel="stylesheet" href="./css/styles.css">
<title>Advanced MIDI Generator</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/@magenta/[email protected]/es6/core.js,npm/focus-visible@5,npm/[email protected]"></script>
</head>
<body>
<div class="top-bar">
<img src="./assets/logo.webp" alt="MIDI Maker Logo" class="logo">
<h1 class="app-title">MIDI Maker</h1>
</div>
<div class="content">
<div class="app-container">
<div class="header">
<p>Follow these steps to create and download custom MIDI files effortlessly.</p>
</div>
<div class="section counters">
<div class="counter-item">
<a href="https://www.youtube.com/watch?v=2Fkc5WAuwj4" target="_blank" title="Watch How to Use MIDI Maker" class="youtube-link">
<img src="./assets/youtube_logo.jpg" alt="YouTube Logo" class="youtube-logo">
How To Use?!
</a>
</div>
<div class="counter-item">
🎵 Page Views: <span id="pageViewsCounter">0</span>
</div>
<div class="counter-item">
🎹 Total Templates Created: <span id="templateCounter">0</span>
</div>
<div class="counter-item">
🎶 MIDI Files Made: <span id="midiCounter">0</span>
</div>
</div>
<!-- Step 1: Define Your Query -->
<div class="section">
<h2>Step 1: Define Your Query</h2>
<label for="queryInput">Enter a description of the MIDI you want to create:</label>
<textarea id="queryInput" placeholder="Example: Create a 4-chord progression, calm and deep, for Afro House in the style of Black Coffee." rows="4"></textarea>
<button id="generateTemplateBtn">Generate Query Template</button>
<div id="outputContainer" class="output-container" style="display: none;">
<h3>Generated Template</h3>
<pre id="generatedTemplate"></pre>
<button id="sendToChatGPTBtn">Send to ChatGPT</button>
<button id="copyTemplateBtn" class="secondary-button">Copy Template</button>
</div>
</div>
<!-- Step 2: Fetch and Paste Notes -->
<div class="section">
<h2>Step 2: Paste Notes</h2>
<p>Copy output notes from the ChatGPT above:</p>
<textarea
id="noteInput"
placeholder="Example:
Note: C4 | Start: 0.0 | Duration: 1.0 | Velocity: 100
Note: E4 | Start: 0.5 | Duration: 1.0 | Velocity: 90
Note: G4 | Start: 1.0 | Duration: 1.0 | Velocity: 80
Note: A4 | Start: 1.5 | Duration: 1.0 | Velocity: 70
"
rows="10"></textarea>
</div>
<!-- Step 3: Generate MIDI -->
<div class="section">
<h2>Step 3: Generate Your MIDI File</h2>
<label for="tempoInput">Specify the tempo (BPM):</label>
<input type="number" id="tempoInput" value="120" min="20" max="300" />
<button id="generateMidiBtn">Generate MIDI File</button>
</div>
<div class="section">
<h2>Step 4: Preview and Download Your MIDI File</h2>
<div class="player-container">
<!-- Visualizer -->
<midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer>
<!-- MIDI Player -->
<midi-player
sound-font
visualizer="#myVisualizer">
</midi-player>
</div>
<!-- Download Button -->
<button id="downloadMidiBtn" style="display: none;">Download MIDI File</button>
</div>
</div>
<!-- Include JavaScript -->
<script src="./js/jsmidgen.js"></script>
<script type="module" src="./js/app.js"></script>
<script src="./js/midiPlayerDesign.js"></script>
</body>
<footer class="footer">
<p>Made with ❤️ by Or Sela</p>
<p>
<span>💬</span> For any requests, feedback, or questions, feel free to contact me!
<span>🙏</span> I’d love to hear from you and make it better! <span>🎶</span>
</p>
<p>
<a href="mailto:[email protected]" target="_blank">
📧 Email Me
</a> |
<a href="https://www.facebook.com/bigsela/" target="_blank">
🌐 Facebook
</a> |
<a href="https://www.instagram.com/im.or.sela/" target="_blank">
📸 Instagram
</a>
</p>
</footer>
</div>
</html>