-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbeta16.html
199 lines (173 loc) · 9.83 KB
/
beta16.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="16channelBetaSequencer/styles.css">
<link rel="stylesheet" type="text/css" href="16channelBetaSequencer/audioTrimSvelteComponent/bundle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="main-container">
<div id="drum-machine">
<h1>
<span class="button-label">Play</span>
<div class="button button-round tooltip">
<div class="button play-button" id="play"></div>
<span class="tooltiptext">Start the sequence.</span>
</div>
<span class="title">
Audional Sequencer <span class="bright-orange">₿</span>itcoin<span class="bright-orange">₿</span>eats<span class="small-text"> ₿eta</span>
</span>
<span class="button-label stop">Stop</span>
<div class="button button-round tooltip">
<div class="button stop-button" id="stop"></div>
<span class="tooltiptext">Stop the sequence.</span>
</div>
<div class="bpm-container tooltip">
BPM: <input type="range" min="60" max="180" value="105" step="1" id="bpm-slider" title="Adjust the Beats Per Minute">
<div class="bpm-display" id="bpm-display">105</div>
<span class="tooltiptext">Drag to adjust the BPM (Beats Per Minute) of the sequence.</span>
</div>
</h1>
<div class="subtext-container">
<p class="subtext centered-text">
Raw On-chain <span class="bright-orange">₿</span>itcoin Audionals: playing live, directly from the <span class="">₿</span>lockchain!
</p>
</div>
<main id="app" role="main">
<div class="channel-template" style="display: none;">
<div class="channel">
<button class="load-sample-button tooltip" title="Load New Audional">Load New Audional
<span class="tooltiptext">Use this button to load a new audional sample into the current channel.</span>
</button>
<!-- Open Audio Trimmer Button for each channel -->
<button class="open-audio-trimmer tooltip" style="background-color: blue; font-weight: bold;">
T
<span class="tooltiptext">Open Audio Trimmer for this channel.</span>
</button>
<button class="control-button clear-button tooltip">
<span class="letter">C</span>
<span class="tooltiptext">Clear the current channel's sequence.</span>
<div class="clear-confirm" style="display: none; position: absolute; background-color: rgba(0,0,0,0.7); color: white; padding: 5px; border-radius: 3px; z-index: 10;">
Click again to confirm clear
</div>
</button>
<button class="control-button mute-button tooltip">
<span class="letter">M</span>
<span class="tooltiptext">Mute or unmute the current channel.</span>
</button>
<button class="control-button solo-button tooltip">
<span class="letter">S</span>
<span class="tooltiptext">Solo the current channel.</span>
</button>
<div class="channel-container">
<div class="steps-container"></div>
<div class="controls-container">
<div class="channel-controls">
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="audio-trimmer-modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<div id="audio-trimmer-container"></div>
</div>
</div>
</main>
<div class="button-container">
<!-- Wrap "Save" and "Load" buttons with their associated elements in a container -->
<div class="button-container">
<button id="prev-sequence" class="tooltip">Previous Sequence
<span class="tooltiptext">Go to the previous sequence</span>
</button>
<span id="current-sequence-display" class="tooltip">Sequence 1
<span class="tooltiptext">Currently displayed sequence</span>
</span>
<button id="next-sequence" class="tooltip">Next Sequence
<span class="tooltiptext">Go to the next sequence</span>
</button>
<label for="continuous-play" class="tooltip">Continuous Play
<span class="tooltiptext">Toggle continuous play mode</span>
</label>
<input type="checkbox" id="continuous-play" class="tooltip">
<div id="quick-play-button" class="tooltip">
<span class="tooltiptext">Quick play button</span>
</div>
<!-- Added Copy and Paste buttons -->
<div class="dropdown">
<div class="dropdown-content">
<a href="#" id="copy-sequence-settings">Copy Sequence Steps</a>
<a href="#" id="copy-channel-1-settings">Copy Channel 1 Steps</a>
<a href="#" id="copy-channel-2-settings">Copy Channel 2 Steps</a>
<a href="#" id="copy-channel-3-settings">Copy Channel 3 Steps</a>
<a href="#" id="copy-channel-4-settings">Copy Channel 4 Steps</a>
<a href="#" id="copy-channel-5-settings">Copy Channel 5 Steps</a>
<a href="#" id="copy-channel-6-settings">Copy Channel 6 Steps</a>
<a href="#" id="copy-channel-7-settings">Copy Channel 7 Steps</a>
<a href="#" id="copy-channel-8-settings">Copy Channel 8 Steps</a>
<a href="#" id="copy-channel-9-settings">Copy Channel 9 Steps</a>
<a href="#" id="copy-channel-10-settings">Copy Channel 10 Steps</a>
<a href="#" id="copy-channel-11-settings">Copy Channel 11 Steps</a>
<a href="#" id="copy-channel-12-settings">Copy Channel 12 Steps</a>
<a href="#" id="copy-channel-13-settings">Copy Channel 13 Steps</a>
<a href="#" id="copy-channel-14-settings">Copy Channel 14 Steps</a>
<a href="#" id="copy-channel-15-settings">Copy Channel 15 Steps</a>
<a href="#" id="copy-channel-16-settings">Copy Channel 16 Steps</a>
</div>
<button class="dropbtn action-button tooltip">Copy
<span class="tooltiptext">Select what you'd like to copy.</span>
</button>
<button id="paste-button" class="action-button tooltip">Paste
<span class="tooltiptext">Paste the sequence settings from clipboard.</span>
</button>
<button id="save-button" class="tooltip">Save
<span class="tooltiptext">This button will save your sequence into JSON file for download so you can recall it later on.</span>
</button>
<input type="file" id="save-file-input" style="display: none">
<button id="load-button" class="tooltip">Load
<span class="tooltiptext">This button will load your audional composition JSON files, even while the sequencer is playing live.</span>
</button>
<div id="loadOptions" class="load-popup">
<button id="loadJson">Load from Json file</button>
<button id="loadInternalPreset">Load internal preset 1</button>
</div>
<input type="file" id="load-file-input" style="display: none" accept=".json">
</div>
<script src="16channelBetaSequencer/audioTrimSvelteComponent/LocalStorageUtils.js"></script>
<script src="16channelBetaSequencer/audioTrimSvelteComponent/audioTrimSettingsLocalStorage.js"></script>
<script src="16channelBetaSequencer/audioTrimSvelteComponent/bundle.js"></script>
<script src="16channelBetaSequencer/updateSequenceData.js"></script>
<script src="16channelBetaSequencer/quickplayButtons.js"></script> <!-- Newly added external script link -->
<script src="16channelBetaSequencer/copyAndPaste.js"></script>
<script src="16channelBetaSequencer/sequenceChannelSettings.js"></script>
<script src="16channelBetaSequencer/sequenceChannelSettings_Part2.js"></script>
<script src="16channelBetaSequencer/displayUpdatedValues.js"></script>
<script src="16channelBetaSequencer/eventListeners.js"></script>
<script src="16channelBetaSequencer/colourPicker.js"></script>
<script src="16channelBetaSequencer/timingMessages.js"></script>
<script src="16channelBetaSequencer/masterSettings.js"></script>
<script src="16channelBetaSequencer/channelSettings.js"></script>
<script src="16channelBetaSequencer/stepHandling.js"></script>
<script src="16channelBetaSequencer/stepSchedulers.js"></script>
<script src="16channelBetaSequencer/embeddedPreset.js"></script>
<script src="16channelBetaSequencer/audionalSampleLibrary.js"></script>
<script src="16channelBetaSequencer/audioUtils.js"></script>
<script src="16channelBetaSequencer/importExport.js"></script>
<script src="16channelBetaSequencer/index.js"></script>
<script>
// Define trimSettings globally
window.trimSettings = (function() {
let settings = {};
function update(newSettings) {
settings = { ...settings, ...newSettings };
}
function get(channelIndex) {
return settings[channelIndex] || { start: 0, end: 100 };
}
return { update, get };
})();
</script>
</body>
</html>