-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
137 lines (127 loc) · 10.4 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<head>
<title>LoFi Generator</title>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<meta name='description' content='Lofi Generator LSTM'>
<meta charset="UTF-8">
<link rel='shortcut icon' href='./assets/lofi.jpg' type='image/jpg'>
<script src='https://cdn.jsdelivr.net/npm/tone@14.7.39/build/Tone.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
<link rel='stylesheet' type='text/css' href='styles.css' />
</head>
<body id="background" class="bg-wind fixed top-0 left-0 z-0 w-screen h-95v bg-cover">
<div id='main-screen' class="fixed top-0 left-0 z-1 w-screen h-screen">
<div class="flex flex-col justify-center items-center h-full">
<div class="max-w-xl p-6 backdrop-blur-md bg-white/30 border border-gray-200 rounded-lg shadow">
<form id='natureSounds'>
<h3 class="form-heading enabled mb-4 font-bold text-black">SOUND EFFECTS</h3>
<div class="flex flex-wrap">
<div class="flex items-center me-4">
<input type="radio" value='wind' name='natureSounds' onchange="setNatureSounds('wind')" checked class="form-input w-4 h-4 text-red-600 bg-gray-100 border-gray-300">
<label for="red-radio" class="ms-2 text-md font-medium text-black">Wind</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='rain' name='natureSounds' onchange="setNatureSounds('rain')" class="form-input w-4 h-4 text-purple-600 bg-gray-100 border-gray-300">
<label for="purple-radio" class="ms-2 text-md font-medium text-black">Rain</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='river' name='natureSounds' onchange="setNatureSounds('river')" class="form-input w-4 h-4 text-purple-600 bg-gray-100 border-gray-300">
<label for="purple-radio" class="ms-2 text-md font-medium text-black">River</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='fireplace' name='natureSounds' onchange="setNatureSounds('fireplace')" class="form-input w-4 h-4 text-green-600 bg-gray-100 border-gray-300">
<label for="green-radio" class="ms-2 text-md font-medium text-black">Fireplace</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='night' name='natureSounds' onchange="setNatureSounds('night')" class="form-input w-4 h-4 text-green-600 bg-gray-100 border-gray-300">
<label for="green-radio" class="ms-2 text-md font-medium text-black">Midnight</label>
</div>
</div>
</form>
<form id='drums' class="mt-4">
<h3 class="form-heading enabled mb-4 font-bold text-black">DRUMS</h3>
<div class="flex flex-wrap">
<div class="flex items-center me-4">
<input type="radio" value='waterdrop' name="drums" onchange="setDrums('waterdrop')" checked class="form-input w-4 h-4 bg-gray-100 border-gray-300">
<label for="red-radio" class="ms-2 text-md font-medium text-black">Waterdrop</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='traploop' name="drums" onchange="setDrums('traploop')" class="form-input w-4 h-4 bg-gray-100 border-gray-300">
<label for="green-radio" class="ms-2 text-md font-medium text-black">Trap Loop</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='cricket' name="drums" onchange="setDrums('cricket')" class="form-input w-4 h-4 bg-gray-100 border-gray-300">
<label for="purple-radio" class="ms-2 text-md font-medium text-black">Crickets</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='heartbeat' name="drums" onchange="setDrums('heartbeat')" class="form-input w-4 h-4 bg-gray-100 border-gray-300">
<label for="purple-radio" class="ms-2 text-md font-medium text-black">HeartBeat</label>
</div>
</div>
</form>
<form id='talking' class="mt-4">
<h3 class="form-heading enabled mb-4 text-md font-bold text-black">MOVIE DIALOGUES</h3>
<div class="flex flex-wrap">
<div class="flex items-center me-4">
<input type="radio" value='chaos' name='talking' onchange="setTalking('chaos')" checked class="form-input w-4 h-4 text-red-600 bg-gray-100 border-gray-300">
<label for="red-radio" class="ms-2 text-md font-medium justify-normal text-black">"What are we? A team? No, no, no, we're a chemical mixture that makes chaos. We're, we're a time bomb" - The Hulk</label>
</div>
<div class="flex items-center me-4 my-2">
<input type="radio" value='whatareyou' name='talking' onchange="setTalking('whatareyou')" class="form-input w-3 h-3 text-green-600 bg-gray-100 border-gray-300">
<label for="green-radio" class="ms-2 text-md font-medium text-black">"Genius, billionaire, playboy, philanthropist." - Ironman</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='adopted' name='talking' onchange="setTalking('adopted')" class="form-input w-4 h-4 text-purple-600 bg-gray-100 border-gray-300">
<label for="purple-radio" class="ms-2 text-md font-medium text-black">"I don't think we should be focusing on Loki. That guy's brain is a bag full of cats. You can smell crazy on him." - Thor</label>
</div>
</div>
</form>
<div id='buttons-wrapper' class="my-5">
<button id='choose' type="button" onclick='enableChord()' class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 mr-2 focus:ring-2 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2">Choose a Song</button>
<button id='use-ai' type="button" onclick='enableAI()' class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-2 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2">Leverage LSTM</button>
</div>
<form id="lstm-track" class="hidden mb-5">
<div class="flex flex-wrap">
<div class="flex items-center me-4">
<input type="radio" value="epochs_400" name="lstm" onchange="setLSTM('epochs_400')" checked class="form-input w-4 h-4">
<label for="purple-radio" class="ms-2 text-md font-medium text-black">400 Epochs (Recommended)</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value="epochs_250" name="lstm" onchange="setLSTM('epochs_250')" class="form-input w-4 h-4">
<label for="green-radio" class="ms-2 text-md font-medium text-black">300 Epochs</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value="epochs_200" name="lstm" onchange="setLSTM('epochs_200')" class="form-input w-4 h-4">
<label for="red-radio" class="ms-2 text-md font-medium text-black">200 Epochs</label>
</div>
</div>
</form>
<form id="chords" class="hidden mb-5">
<div class="flex flex-wrap">
<div class="flex items-center me-4">
<input type="radio" value='ylangYlang' name='chords' onchange="setChords('ylangYlang')" checked class="form-input w-4 h-4">
<label for="red-radio" class="ms-2 text-md font-medium text-black">ylangYlang</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='raining' name='chords' onchange="setChords('raining')" class="form-input w-4 h-4">
<label for="green-radio" class="ms-2 text-md font-medium text-black">Raining</label>
</div>
<div class="flex items-center me-4">
<input type="radio" value='seeYouAgain' name='chords' onchange="setChords('seeYouAgain')" class="form-input w-4 h-4">
<label for="purple-radio" class="ms-2 text-md font-medium text-black">see you again</label>
</div>
</div>
</form>
<div id='buttons-wrapper'>
<button id='start' type="button" class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-2 focus:ring-purple-300 mr-2 font-medium rounded-lg text-sm px-5 py-2.5 mb-2">▷ Play</button>
<button id='stop' type="button" class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-2 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2">▢ Stop</button>
</div>
<a href="https://melodykoh.vercel.app/blog/lofi-generator-lstm" class="font-medium mt-2 text-black underline hover:text-gray-900">How I made this webplayer →</a><br>
</div>
</div>
<div id='canvas' class="fixed bottom-0 bg-gray-900"></div>
</div>
</body>
<script src='./script.js'></script>
</html>