PageSourceSearch

https://onlinesequencer.net/

html onlinesequencer.net collected 2026-09-24 09:10:38 UTC 41,975 bytes, 788 lines download raw bytes

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html>
4<head>
5<title>Online Sequencer</title>
6<meta property="og:image" content="https://onlinesequencer.net/resources/logo3.png" />
7<meta property="og:title" content="Online Sequencer">
8<meta name="twitter:card" content="summary_large_image">
9<meta name="description" content="OnlineSequencer.net is an online music sequencer. Make tunes in your browser and share them with friends!" />
10<meta property="og:type" content="website" />
11<meta property="og:description" content="OnlineSequencer.net is an online music sequencer. Make tunes in your browser and share them with friends!" />
12<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
13<meta property="fb:app_id" content="1512952002290893" />
14<style id="css_vars">
15.key, .key_sharp, .key div, .key_sharp div {
16
17}
18.measure {
19
20}
21</style>
22<link rel="preload" href="//fonts.googleapis.com/css?family=PT+Sans:400,700" as="style" onload="this.onload=null;this.rel='stylesheet'">
23<link rel="stylesheet" href="/resources/c/5bd70412787846bdc70e03cf9fb35e39.css" />
24<link rel="preload" href="/app/sequencer.worker.js" as="script">
25<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 64 bytes, lines 25-26
25
26<script async src="https://www.googletagmanager.com/gtag/js?id=
26UA-3037948-7
vendor: 12 bytes, line 26
26"></script>
27<script>
28  
vendor: 134 bytes, lines 28-32
28window.dataLayer = window.dataLayer || [];
29  function gtag(){dataLayer.push(arguments);}
30  gtag('js', new Date());
31
32  gtag('config', '
32UA-3037948-7
vendor: 4 bytes, line 32
32');
33</script>
vendor: 1 bytes, line 33
33
34<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
34
35<link rel="preload" href="/resources/fontawesome.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
36<link rel="preload" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
37<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dexie.min.js" onload="if(typeof checkForUnsavedSequence == 'function') checkForUnsavedSequence();"></script>
vendor: 1 bytes, line 37
37
38<script defer src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
vendor: 1 bytes, line 38
38
39<script defer src="https://www.gstatic.com/charts/loader.js"></script>
vendor: 1 bytes, line 39
39
40<script type="text/javascript" src="/resources/c/32f86b8bea6f1af49491a3470c72fdb3.js"></script>
vendor: 1 bytes, line 40
40
41<script type="text/javascript">
42settings['uid'] = 0;
43settings['username'] = "";
44settings['logoutkey'] = null;
45settings['post_key'] = "efe885a9e5874c216b597a2bb55fe4ac";
46</script>
vendor: 1 bytes, line 46
46
47<script data-cfasync="false">
48  window.ramp = window.ramp || {};
49  window.ramp.que = window.ramp.que || [];
50</script>
50
51</head>
52<body id="page_view"><a href="https://onlinesequencer.net/cdn-cgi/content?id=wqRB1qwHiGYxpma.7YKdgE0PUJS7gLsJqIvECxcDo4M-1790241038.1680956-1.2.1.1-uKUXVfoNrVM_sPY7FJEFRG597YEM0jcG6RKqyfTOoimi8yOuO8jm62p.emhrUuK1" aria-hidden="true" rel="nofollow noopener" style="display: none !important; visibility: hidden !important"></a>
53<div id="container">
54<div id="header">
55
56<div id="nav">
57    <a id="logo" href="/">
58        <div class="icon"></div>
59        <div class="text">
60            <span class="title">Online Sequencer</span>
61            <span class="subtitle">Make music online</span>
62        </div>
63    </a>
64    <div id="header_right">
65    <ul>
66<li><a href="/sequences">Sequences</a></li><li><a href="/memberlist">Members</a></li><li><a class="chat_link" href="javascript:;" onclick="showChat();"><div class="link">Chat</div><div class="online"></div></a></li><li><a href="/forum/">Forum</a></li><li><a href="/wiki/" target="_blank">Wiki</a></li><li id="ad_container">
67    <div id="ad">
68        <!-- GAM 71161633/ONSE_onlinesequencer/header -->
69        <div data-fuse="header"></div>
70    </div>
71</li>
72</ul>
73<div id="bar">
74    <div style="float:right; position: relative;">
75        <div id="user_loading">
76        </div>
77        <div id="user_guest" style="display: block">
78            <div id="login_fields">
79                <input type="text" id="username" name="username" placeholder="Username" />
80                <input type="password" id="password" name="password" placeholder="Password" />
81            </div>
82            <a id="login_button" class="linkbutton" href="javascript:;">Login</a>
83            <form action="/forum/member.php" target="_blank" style="display: inline" method="post">
84                <input type="hidden" name="step" value="agreement">
85                <input type="hidden" name="action" value="register">
86                <input id="registerbutton" type="submit" class="button" name="agree" value="Register">
87            </form>
88            </span>
89        </div>
90        <div id="user_member" style="display: none">
91            Welcome back <span id="member_username"><a href="/members/0"></a></span>!
92                        
93            <a id="member_logout" class="linkbutton" href="javascript:;">Log out</a>
94        </div>
95    </div>
96    <span id="sequence_info"></span>
97    </div>
98</div>
99            </div>
100        </div>
101
102        <div id="main">
103                        <div id="page">
104
105                        
106            
107            <div id="page_content">
108                        <div id="page_right" style="max-width:none; background: none;">
109<style type="text/css">
110#main {
111    bottom: 0;
112}
113</style>
114
115<div id="frame_wrapper">
116    
116<script type="text/javascript">
117settings.user = {"shortcuts":"","disable_webgl":"false","remember_length":"true","remember_volume":"true","custom_cursor":"false"};
118window.audioFormat = 'ogg';
119loadingSounds = false;
120loadingSequence = false;
121sequenceDuration = -1;
122onPageLoad = async function()
123{
124    create();
125    loadDataProto('');
126    instMgr.ensureLoaded(instrument);enterEditMode();        $('#loading_overlay').css('display', 'none');
127    song.id = 0;
128    song.basedon = 0;
129    song.version = 0;
130    song.deleted = 0;
131    createSynth(kSynthBaseId);  // Create initial synthesizer
132    owner = 0;
133            checkForUnsavedSequence = function() {
134      var db = openBackupDatabase();
135      db.backup.toArray().then((result) => {
136          if (result.length == 1) {
137            hasBackup = true;
138            document.getElementById('sharelink').innerHTML = 'Found unsaved sequence, restore it? <a class="toolbar_button" href="javascript:;" onclick="loadBackup()">Restore</a> <a class="toolbar_button" href="javascript:;" onclick="clearBackup()">Clear</a>';
139            document.getElementById('share').style.display = 'block';
140          }
141          db.close();
142      });
143    }
144        container.scrollTop = container.scrollHeight/2-200;
145    dragScroll(document.querySelector('.info-sidebar-featured-list'));
146};
147</script>
147
148<div id="sequencer_main_row">
149<div id="sequencer">
150<div id="playbutton"></div>
151<div id="share" style="display: none"><i class="fas fa-times" id="btn_close"></i><span id="sharelink">Link to this sequence: </span></div>
152<div id="instrument_options" style="display: none">
153  <div id="instrument_options_tabs">
154    <div id="instrument_options_tab_simple" class="selected">Simple</div>
155    <div id="instrument_options_tab_advanced">Advanced</div>
156    <div id="instrument_options_tab_synth">Synthesizer</div>
157  </div>
158  <div id="instrument_options_simple"></div>
159  <div id="instrument_options_advanced" style="display: none">
160    <div class="instrument_options_advanced_row">
161      <div id="instrument_options_advanced_chip" title="Click to change color">
162        <input id="instrument_options_advanced_color" type="text" data-coloris>
163      </div>
164      <div id="instrument_options_advanced_title" title="Click to change name">Instrument name</div>
165      <input type="text" id="instrument_options_advanced_title_edit" class="hidden"/>
166      <div id="instrument_options_advanced_lock" class="instrument_lock btn" onclick="lockInstrumentButton(instrument, event)"><i id="instrument_options_advanced_lock_btn"class="fas fa-lock-open-alt"></i></div>
167      <div class="instrument_options_advanced_spacer"></div>
168      <div id="instrument_options_mute" class="button" onclick="muteInstrument(instrument)">Mute <i class="fa-solid fa-volume-xmark"></i></div>
169      <div id="instrument_options_solo" class="button" onclick="soloInstrument(instrument)">Solo <i class="fa-solid fa-microphone-stand"></i></div>
170    </div>
171    <div class="instrument_options_advanced_row">
172      <div id="instrument_options_copy" class="button" onclick="copyInstrumentSettings(instrument)">Copy</div>
173      <div id="instrument_options_load" class="button" onclick="pasteInstrumentSettings(instrument)">Load</div>
174      <div id="instrument_options_clone" class="button" onclick="cloneInstrument(instrument)">Clone</div>
175      <div id="instrument_options_delete" class="button" onclick="deleteClonedInstrument(instrument)">Delete</div>
176      <div id="instrument_options_stack" class="button" onclick="openStackSettings(instrument)"><i class="fa-solid fa-layer-group"></i> Stack...</div>
177      <div style="display:flex; justify-content:flex-end; flex:1;">
178        <div id="instrument_options_clear_solo" class="button" style="display:none;" onclick="clearSolo()">Clear Solo <i  class="fa-solid fa-x"></i></div>
179        <div id="instrument_options_reset" class="button" onclick="resetSettings(instrument)">Reset <i class="fa-solid fa-rotate-reverse"></i></div>
180      </div>
181    </div>
182    <div class="instrument_options_advanced_row">
183      <div class="instrument_options_advanced_label">Volume</div>
184      <div class="slider_line">
185        <div class="slider_center"></div>
186        <input id="instrument_options_advanced_volume" class="slider" type="range" min="0" max="2" step="0.01" oninput="setInitialInstrumentVolume(instrument, this.value)">
187      </div>
188      <div id="instrument_options_advanced_delay" class="button" onclick="selectDelay(instrument)">Delay</div>
189    </div>
190    <div class="instrument_options_advanced_row">
191      <div class="instrument_options_advanced_label">Panning</div>
192      <div class="slider_line">
193        <div class="slider_center"></div>
194        <input id="instrument_options_advanced_pan" class="slider" type="range" min="-1" max="1" step="0.01" oninput="setPan(instrument, this.value)">
195      </div>
196    </div>
197    <div class="instrument_options_advanced_row">
198      <div class="instrument_options_advanced_label">Detune</div>
199      <div class="slider_line">
200        <div class="slider_center"></div>
201        <input id="instrument_options_advanced_detune" class="slider detune_slider" type="range" min="-1200" max="1200" step="100" oninput="setDetune(instrument, this.value)">
202      </div>
203    </div>
204    <div class="instrument_options_advanced_row">
205      <div id="instrument_options_advanced_reverb" class="button" onclick="selectReverb(instrument)">Reverb</div>
206      <select id="instrument_options_advanced_reverb_select"></select>
207      <div id="instrument_options_advanced_reverb_volume_wrap" class="slider_line options-disabled">
208        <input id="instrument_options_advanced_reverb_volume" class="slider" type="range" min="0" max="1" step="0.01" value="1" oninput="setReverbVolume(instrument, this.value)">
209      </div>
210    </div>
211    <div class="instrument_options_advanced_row">
212      <div id="instrument_options_advanced_distort" class="button" onclick="selectDistort(instrument)">Distort</div>
213      <select id="instrument_options_advanced_distort_select"></select>
214      <div id="instrument_options_advanced_distort_volume_wrap" class="slider_line options-disabled">
215        <input id="instrument_options_advanced_distort_volume" class="slider" type="range" min="0" max="1" step="0.01" value="
2150" oninput="setDistortVolume(instrument, this.value)">
216      </div>
217    </div>
218    <div id="instrument_options_advanced_eq">
219      <div class="button" onclick="selectEq(instrument)">Equalizer</div>
220      <div id="instrument_options_advanced_eq_sliders">
221        <div class="instrument_options_advanced_eq_row">
222          <div class="instrument_options_advanced_label">High</div>
223          <div class="slider_line with_warning">
224            <div class="slider_center"></div>
225            <input id="instrument_options_advanced_eq_high" class="slider" type="range" min="-48" max="48" step="1" oninput="setEqHigh(instrument, parseFloat(this.value))">
226          </div>
227        </div>
228        <div class="instrument_options_advanced_eq_row">
229          <div class="instrument_options_advanced_label">Mid</div>
230          <div class="slider_line with_warning">
231            <div class="slider_center"></div>
232            <input id="instrument_options_advanced_eq_mid" class="slider" type="range" min="-48" max="48" step="1" oninput="setEqMid(instrument, parseFloat(this.value))">
233          </div>
234        </div>
235        <div class="instrument_options_advanced_eq_row">
236          <div class="instrument_options_advanced_label">Low</div>
237          <div class="slider_line with_warning">
238            <div class="slider_center"></div>
239            <input id="instrument_options_advanced_eq_low" class="slider" type="range" min="-48" max="48" step="1" oninput="setEqLow(instrument, parseFloat(this.value))">
240          </div>
241        </div>
242      </div>
243    </div>
244    <div class="instrument_options_advanced_row">
245      <div id="instrument_options_advanced_bitcrusher" class="button" onclick="selectBitcrusher(instrument)">Bitcrusher</div>
246      <div id="bitcrusher_options" class="options-disabled">
247        <select id="instrument_options_bitcrusher_depth">
248          <option value="1">1</option>
249          <option value="2">2</option>
250          <option value="3">3</option>
251          <option value="4">4</option>
252          <option value="5">5</option>
253          <option value="6">6</option>
254          <option value="7">7</option>
255          <option value="8">8</option>
256          <option value="9">9</option>
257          <option value="10">10</option>
258          <option value="11">11</option>
259          <option value="12" selected>12</option>
260          <option value="13">13</option>
261          <option value="14">14</option>
262          <option value="15">15</option>
263          <option value="16">16</option>
264        </select>
265        <div class="slider_line">
266          <input id="instrument_options_advanced_bitcrusher_level" class="slider" type="range" min="0" max="1" step="0.01" value="0.5" oninput="setBitcrusherLevel(instrument, this.value)">
267        </div>
268      </div>
269    </div>
270  </div>
271  <div id="instrument_options_synth" style="display: none">
272    <div class="instrument_options_synth_row">
273      <div id="instrument_options_synth_chip" class="instrument55"></div>
274      <div id="instrument_options_synth_title">Synthesizer</div>
275      <div class="instrument_options_synth_spacer"></div>
276    </div>
277    <div class="instrument_options_synth_row">
278      <svg width="64" height="64" viewBox="0 0 64 64"
279           xmlns="http://www.w3.org/2000/svg" id="instrument_options_synth_wave">
280        <g>
281          <rect x="0" y="0" width="64" height="64" fill="#333" stroke-width=".264583"/>
282        </g>
283        <path d="m 0 0v 64m-28-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m
284           4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m
285            4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m-64-64h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h
286             64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64" fill="none"
287              stroke="#4e4646" stroke-width=".2"/>
288        <!-- Sine by default -->
289        <path d="m0 32c16-32 32 0 32 0s16 32 32 0" fill="none" stroke="#fbab30"
290              stroke-linecap="round" stroke-width=".765" id="instrument_options_synth_wavepath" />
291      </svg>
292      <select id="instrument_options_synth_type">
293        <option value="sine">Sine</option>
294        <option value="square">Square</option>
295        <option value="sawtooth">Sawtooth</option>
296        <option value="triangle">Triangle</option>
297        <option value="noise">Noise</option>
298      </select>
299    </div>
300    <div class="instrument_options_synth_row">
301      <select id="instrument_options_synth_filter_type">
302        <option value="0">Low pass</option>
303        <option value="1">Band pass</option>
304        <option value="2">High pass</option>
305      </select>
306      <div class="slider_line">
307        <input id="instrument_options_synth_filter" class="slider" type="range" min="0" max="20000" step="1" oninput="setSynthFilter(instrument, parseFloat(this.value))">
308      </div>
309    </div>
310    <div class="instrument_options_synth_row">
311      <div class="instrument_options_synth_label instrument_options_synth_label_q">Resonance (Q)</div>
312      <div class="slider_line">
313        <input id="instrument_options_synth_filter_q" class="slider" type="range" min="0" max="20" step="1" oninput="setSynthFilterQ(instrument, parseFloat(this.value))">
314      </div>
315    </div>
316    <div class="instrument_options_synth_row">
317      <svg width="64" height="64" viewBox="0 0 64 64"
318           xmlns="http://www.w3.org/2000/svg" id="instrument_options_synth_lfo_graph">
319        <g>
320          <rect x="0" y="0" width="64" height="64" fill="#333" stroke-width=".264583"/>
321        </g>
322        <path d="m 0 0v 64m-28-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m
323           4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m
324            4-64v 64m 4-64v 64m 4-64v 64m 4-64v 64m-64-64h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h
325             64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64m-64 4h 64" fill="none"
326              stroke="#4e4646" stroke-width=".2"/>
327        <g id="synth_lfo_graph_lines"></g>
328        <path d="" fill="none" stroke="#15aedc"
329              stroke-linecap="round" stroke-width=".765" id="instrument_options_synth_lfopath" />
330      </svg>
331      <div class="instrument_options_synth_lfo_osc">
332        <button id="lfo_osc_sine" class="lfo_osc_option lfo_osc_selected" onclick="setLFOOsc(instrument, 'sine')">Sn</button>
333        <button id="lfo_osc_square" class="lfo_osc_option" onclick="setLFOOsc(instrument, 'square')">Sq</button>
334        <button id="lfo_osc_sawtooth" class="lfo_osc_option" onclick="setLFOOsc(instrument, 'sawtooth')">St</button>
335        <button id="lfo_osc_triangle" class="lfo_osc_option" onclick="setLFOOsc(instrument, 'triangle')">T</button>
336      </div>
337      <div class="instrument_options_synth_lfo">
338        <div class="instrument_options_synth_label instrument_options_synth_label_lfo">LFO</div>
339        <select id="instrument_options_lfo_target">
340          <option value="0">Volume</option>
341          <option value="1">Pitch</option>
342          <option value="2">Filter</option>
343        </select>
344        <div id="instrument_options_synth_lfo_e" class="button" onclick="selectLFO(instrument)">1/4</div>
345        <select id="instrument_options_synth_lfo_select">
346          <option value="CUSTOM">Custom...</option>
347          <option value="1/1">1</option>
348          <option value="1/2">1/2</option>
349          <option value="1/3">1/3</option>
350          <option value="1/4" selected>1/4</option>
351          <option value="1/6">1/6</option>
352          <option value="1/8">1/8</option>
353          <option value="1/12">1/12</option>
354          <option value="1/16">1/16</option>
355          <option value="1/32">1/32</option>
356        </select>
357        <div class="slider_line">
358          <input id="instrument_options_synth_lfo_intensity" class="slider" type="range" min="0" max="100" step="1" oninput="setLFOIntensity(instrument, parseFloat(this.value))">
359        </div>
360        <div class="synth_lfo_hz">
361          <input id="instrument_options_synth_lfo_hz" onchange="setLFORate(instrument, this.value, true)">
362        </div>
363      </div>
364    </div>
365    <div class="instrument_options_synth_row">
366      <div id="instrument_options_synth_adsr_e" class="button" onclick="selectADSR(instrument)">Envelope</div>
367      <svg width="160" height="72" viewBox="0 0 160 72"
368           xmlns="http://www.w3.org/2000/svg" id="instrument_options_synth_adsr_graph">
369        <g>
370          <rect x="0" y="0" width="160" height="72" fill="#333" stroke-width=".264583"/>
371          <rect x="0" y="0" width="120" height="72" fill="#3a3a3a" stroke-width="0"/>
372        </g>
373        <g id="synth_adsr_graph_lines"></g>
374        <g id="synth_adsr_graph_points"></g>
375        <path d="" fill="#a6d94822" stroke="#a6d948"
376              stroke-linecap="round" stroke-width=".765" id="instrument_options_synth_adsrpath" />
377      </svg>
378      <div id="instrument_options_synth_adsr" class="adsr_disabled">
379        <div class="slider_line_v">
380          <p>A </p><input id="instrument_options_synth_attack" class="slider_v" type="range" value="0" min="0" max="1" step="0.02" oninput="setAttack(instrument, parseFloat(this.value))">
381        </div>
382        <div class="slider_line_v">
383          <p>D </p><input id="instrument_options_synth_decay" class="slider_v" type="range" value="0" min="0" max="1" step="0.02" oninput="setDecay(instrument, parseFloat(this.value))">
384        </div>
385        <div class="slider_line_v">
386          <p>S </p><input id="instrument_options_synth_sustain" class="slider_v" type="range" value="0" min="0" max="1" step="0.02" oninput="setSustain(instrument, parseFloat(this.value))">
387        </div>
388        <div class="slider_line_v">
389          <p>R </p><input id="instrument_options_synth_release" class="slider_v" type="range" value="0" min="0" max="1" step="0.02" oninput="setRelease(instrument, parseFloat(this.value))">
390        </div>
391      </div>
392    </div>
393  </div>
394</div>
395<template id="template-marker-editor">
396  <div id="marker_editor_marker_list">
397    <div id="marker_editor_markers"></div>
398    <div id="marker_editor_add">
399      <div class="btn" id="btn_edit_markers_add" title="Add" onclick="markerEditorAdd()"><i class="far fa-plus"></i></div>
400      <div class="box_input" id="marker_type_input"><select id="marker_type"></select></div>
401      <div class="box_input" id="marker_instrument_input" style="visibility: hidden;"><div id="marker_instrument_wrapper"></div></div>
402    </div>
403  </div>
404</template>
405<template id="template-user-settings">
406  <div class="user_settings_content">
407      <div class="user_settings_row"><input id="user_setting_5" type="checkbox" onclick="updateUserSetting('5', 'disable_webgl', $('#user_setting_5').is(':checked') ? 'true' : 'false')"><label id="user_setting_5" for="user_setting_5">Disable WebGL (requires refresh)</label></div><div class="user_settings_row"><input id="user_setting_1" type="checkbox" checked onclick="updateUserSetting('1', 'remember_length', $('#user_setting_1').is(':checked') ? 'true' : 'false')"><label id="user_setting_1" for="user_setting_1">Remember last note length</label></div><div class="user_settings_row"><input id="user_setting_2" type="checkbox" checked onclick="updateUserSetting('2', 'remember_volume', $('#user_setting_2').is(':checked') ? 'true' : 'false')"><label id="user_setting_2" for="user_setting_2">Remember last note volume</label></div><div class="user_settings_row"><input id="user_setting_3" type="checkbox" onclick="updateUserSetting('3', 'custom_cursor', $('#user_setting_3').is(':checked') ? 'true' : 'false')"><label id="user_setting_3" for="user_setting_3">Show custom cursors</label></div>  </div>
408</template>
409<template id="template-stack-settings">
410  <div class="stack-settings-content">
411    <div class="stack-item-list"></div>
412    <div class="stack-item-add">
413      <div class="btn stack-item-add-btn" title="Add" onclick="addStackItem()"><i class="far fa-plus"></i></div>
414      <div class="box-input stack-item-instrument-input"></div>
415    </div>
416  </div>
417</template>
418<template id="template-stack-item">
419  <div class="stack-item">
420    <div class="stack-item-name"></div>
421    <div class="box_label">
422      <span>Offset</span>
423      <div class="box_input">
424        <select class="stack-item-offset">
425          <option value="48">+4</option>
426          <option value="36">+3</option>
427          <option value="24">+2</option>
428          <option value="12">+1</option>
429          <option value="0" selected>0</option>
430          <option value="-12">-1</option>
431          <option value="-24">-2</option>
432          <option value="-36">-3</option>
433          <option value="-48">-4</option>
434        </select>
435      </div>
436    </div>
437    <div class="box_label">
438      <span>Delay</span>
439      <div class="box_input">
440        <select class="stack-item-delay">
441          <option value="0">0</option>
442          <option value="4">1</option>
443          <option value="2">1/2</option>
444          <option value="1.333">1/3</option>
445          <option value="1">1/4</option>
446          <option value="0.666">1/6</option>
447          <option value="0.5">1/8</option>
448          <option value="0.333">1/12</option>
449          <option value="0.25">1/16</option>
450        </select>
451        <select class="stack-item-delay-multiplier">
452          <option value="1">x1</option>
453          <option value="2">x2</option>
454          <option value="3">x3</option>
455          <option value="4">x4</option>
456          <option value="5">x5</option>
457          <option value="6">x6</option>
458          <option value="7">x7</option>
459          <option value="8">x8</option>
460        </select>
461      </div>
462    </div>
463    <div class="button stack-item-delete" title="Delete">
464      <i class="far fa-times"></i>
465    </div>
466  </div>
467</template>
468<div id="top-bar-container">
469  <div id="titlebar">
470      <div class="left">
471          <div id="view_mode_play" class="play" title="Play" >
472              <i id="view_mode_play_icon" class="fas fa-play"></i>
473          </div>
474          <div class="text" >
475              Untitled          </div>
476          <div class="btn_edit preview_mode_btn" title="Enter edit mode" ><i class="far fa-edit"></i></div>
477          <div class="btn_graphics preview_mode_btn" title="Toggle fast graphics"><i class="far fa-tachometer-fast"></i></div>
478          <div class="spacer"></div>
479          <div class="btn_zoomout preview_mode_btn" title="Zoom out"><i class="far fa-search-minus"></i></div>
480          <div class="btn_zoomin preview_mode_btn" title="Zoom in"><i class="far fa-search-plus"></i></div>
481      </div>
482  </div>
483  <div id="toolbar_container" class="dragscroll">
484  <div class="dragscroll-wrapper">
485  <div id="toolbar_element" class="dragscroll-content" style="display: flex">
486      <div>
487          <div id="play_small" class="play" title="Play">
488              <i id="play_small_icon" class="fas fa-play"></i>
489          </div>
490          <div class="box_label">
491              <span>BPM</span> <div class="box_input">
492                  <input type="text" id="bpm" size="3" maxlength="3" autocomplete="off" data-lpignore="true" value="110" onchange="setInitialBPM(document.getElementById('bpm').value);" title="Use &uarr; and &darr; to change"/>
493                  </div>
494          </div>
495          <div class="box_label">
496              <span>Title</span> <div class="box_input" id="title_box_input">
497                  <input type="text" id="title" size="32" maxlength="128" autocomplete="off" data-lpignore="true" value="Untitled"/>
498                  </div>
499          </div>
500          <div id="mode_draw" class="os-dropdown">
501            <div class="btn os-dropdown-btn with-dropdown" title="Draw (right click for options)"><i class="far fa-edit"></i></div>
502            <ul class="os-dropdown-menu">
503              <li action="setMode('annotation')">Add annotations</li>
504            </ul>
505          </div>
506          <div class="btn" id="mode_edit" title="Select"><i class="fas fa-mouse-pointer"></i></div>
507          <div class="btn" id="mode_erase" title="Erase"><i class="fas fa-eraser"></i></div>
508          <div class="spacer"></div>
509          <div id="instrument_select_box" class="box_label" style="position:relative"><span>Instrument</span>
510              <div class="box_input">
511                  <div id="instrument_select_wrapper"></div>
512              </div>
513          </div>
514          <div id="select-this" class="os-dropdown">
515            <button class="os-dropdown-btn with-dropdown"><i class="fas fa-music" title="Highlight this one (right click for options)"></i></button>
516            <ul class="os-dropdown-menu">
517              <li action="selectNotes()">Select/deselect notes</li>
518              <li action="selectMarkers()">Select/deselect markers</li>
519            </ul>
520          </div>
521          <div class="btn" id="btn_instrument_options" title="Show options">
522              <i class="far fa-sliders-h"></i>
523          </div>
524          <div class="spacer"></div>
525          <div class="btn" id="btn_cut" title="Cut"><i class="far fa-cut"></i></div>
526          <div class="btn" id="btn_copy" title="Copy"><i class="fas fa-copy"></i></div>
527          <div class="btn" id="btn_paste" title="Paste"><i class="fas fa-paste"></i></div>
528          <div class="btn" id="btn_selectall" title="Select all"><i></i></div>
529          <div class="spacer"></div>
530          <div class="btn btn_zoomout" title="Zoom out"><i class="far fa-search-minus"></i></div>
531          <div class="btn btn_zoomin" title="Zoom in"><i class="far fa-search-plus"></i></div>
532          <div class="spacer"></div>
533          <div class="btn" id="savelink" href="javascript:;" title="Save"><i class="fas fa-cloud-upload"></i></div>
534          <div id="save-options" class="os-dropdown">
535            <button class="os-dropdown-btn"><i class="fas fa-caret-down" title="Show options"></i></button>
536            <ul class="os-dropdown-menu">
537              <li action="save(false)">Save a copy</li>
538              <li action="saveOffline()">Save offline</li>
539              <li action="saveAudio(true)">Export MP3</li>
540              <li action="saveAudio(false)">Export WAV</li>
541              <li action="exportMidi()">Export MIDI</li>
542              <li action="exportSheetMusic()">Open sheet music (Jampea)</li>
543            </ul>
544          </div>
545          <div class="spacer"></div>
546          <div class="btn" id="btn_help" title="Show help"><i class="fas fa-question-circle"></i></div>
547          <div class="btn" id="btn_full_screen"><i class="fas fa-expand-wide" title="Full screen"></i></div>
548          <div id="tools-menu" class="os-dropdown">
549            <button class="os-dropdown-btn"><i class="far fa-ellipsis-v" title="More tools"></i></button>
550            <ul class="os-dropdown-menu">
551                <li action="toolsUpload()">Import MIDI/Sequence File</li>
552                <li action="toolsFastGraphics()">Fast graphics</li>
553                <li action="toolsInvert()">Invert</li>
554                <li action="toolsChangeKey()">Minor ⇄ Major</li>
555                <li action="toolsReverse()">Reverse Selection</li>
556                <li action="toolsHumanize()">Humanize Selection</li>
557                <li action="toolsLegatomize()">Legatomize Selection</li>
558                <li action="toolsFadeIn()">Fade In Selection</li>
559                <li action="toolsFadeOut()">Fade Out Selection</li>
560                <li action="toolsStretchNotes()">Stretch Selection</li>
561            </ul>
562          </div>
563      </div>
564  </div>
565  <div class="dragscroll-left"></div><div class="dragscroll-right">
566  </div>
567  </div>
568  </div>
569  <div id="top-bar-right">
570    <div id="volume"><i class="fas fa-volume"></i><div class="slider_line"><input id="volume_slider" class="slider" type="range" min="0" max="2" step="0.01" value="1"></div></div>    
571  </div>
572</div>
573<div id="message_wrapper">
574    <span id="message_text"></span>
575</div>
576<input type="file" id="file_upload_input" style="display: none" onchange="loadFileFromInputDialog()">
577<style>
578</style>
579<div id="sequencer_timeline_wrapper">
580    <div id="sequencer_timeline_options">
581        <div class="left">
582            <div id="btn_user_settings" title="Sequencer settings" onclick="openUserSettings()"><i class="fas fa-cog"></i></div>
583        </div>
584        <div id="timeline_option_measures" class="timeline_option_active" title="Show measure number"><i class="fas fa-ruler"></i></div>
585        <div id="timeline_option_time" class="timeline_option" title="Show time"><i class="fas fa-clock"></i></div>
586    </div>
587    <div id="sequencer_timeline">
588        <div id="sequencer_timeline_measures" oncontextmenu="return false;"></div>
589        <div id="sequencer_timeline_markers" oncontextmenu="return false;"></div>
590    </div>
591</div>
592<div id="sequencer_panel">
593    <div id="keyboard_wrapper_element">
594        <div id="keyboard_element"></div>
595    </div>
596    <div id="sequencer_panel_right">
597        <div id="sequencer_view">
598        </div>
599        <div id="playhead_wrapper">
600        </div>
601        <div id="sequencer_main" tabindex="0">
602            <div id="sequencer_inner">
603                <div id="selection_rect"></div>
604                <div id="annotations">
605                </div>
606                <div id="wavesurfer_element" style="display:none"></div>
607                <div id="marker_bar" style="display:none"
608                    onmousedown="mouseDownMarkerBar(event)"
609                    oncontextmenu="return false;"></div>
610                <div id="marker_selection_rect" style="display:none"></div>
611            </div>
612        </div>
613        <div id="progress_bar_area"></div>
614    </div>
615    <div id="loading_overlay">
616      <h1 id="overlay-text">Loading...</h1>
617      <div id="loading-anim">
618          <div class="anim-note anim-note-1">C5</div>
619          <div class="anim-note anim-note-2">D5</div>
620          <div class="anim-note anim-note-3">B4</div>
621          <div class="anim-note anim-note-4">C5</div>
622      </div>
623    </div>
624</div>
625<div id="menus">
626    <div class="item">
627        <div class="box_label"><span>Grid</span>
628            <div class="box_input" id="grid_select_input">
629                <select id="grid_select">
630                    <option value="0.25">1</option>
631                    <option value="0.5">1/2</option>
632                    <option value="0.75">1/3</option>
633                    <option value="1" selected="selected">1/4</option>
634                    <option value="1.5">1/6</option>
635                    <option value="2">1/8</option>
636                    <option value="3">1/12</option>
637                    <option value="4">1/16</option>
638                </select>
639            </div>
640        </div>
641    </div>
642    <div class="item">
643        <div class="box_label"><span>Time signature</span>
644            <div class="box_input" id="time_sig_select_input">
645                <select id="time_sig_select">
646                    <option value="2">2/4</option>
647                    <option value="3">3/4</option>
648                    <option value="4" selected="selected">4/4</option>
649                    <option value="5">5/4</option>
650                </select>
651            </div>
652        </div>
653    </div>
654    <div class="item">
655        <div class="box_label"><span>Key (<a href="javascript:;" onclick="updateScale(song.notes);">Auto Detect</a>)</span>
656            <div class="box_input">
657                <select id="key_select"></select>
658            </div>
659        </div>
660    </div>
661    <div class="item">
662        <div class="box_label"><span>Auto Scroll</span>
663            <div class="box_input" id="scroll_select_input">
664                <select id="scroll_select">
665                    <option value="3">Follow</option>
666                    <option value="0">Smooth</option>
667                    <option value="1" selected="selected">Fast</option>
668                    <option value="2">Off</option>
669                </select>
670            </div>
671        </div>
672    </div>
673    <div class="item">
674        <div id="audio_track_link" title="You can play an audio file along with your sequence. It won't be saved, but can help you transcribe a song.">
675            <a class="linkbutton" style="float: left" href="javascript:;" onclick="showAudioTrackSelect()">Add Audio Track</a>
676        </div>
677        <div id="audio_track_loading" style="display:none">Loading audio file...</div>
678        <div id="audio_track" style="display:none">
679            <input id="audio_track_file" type="file" accept="audio/*" class="button">
680            <div id="audio_track_remove">
681                <a class="linkbutton" href="javascript:;" onclick="$('#wavesurfer_element').toggle();">Show/hide waveform</a><a class="linkbutton" href="javascript:;" onclick="removeAudioTrack()">Remove</a>
682            </div>
683        </div>
684    </div>
685</div>
686<div id="bottom_left">
687  <div id="midi_button" class="bottom_left_button" title="Connect a MIDI keyboard"><i class="fa-solid fa-piano-keyboard"></i></div>
688  <div id="record_button" class="bottom_left_button" title="Record keyboard and MIDI input
688s"></div>
689  <div id="quantize_button" class="bottom_left_button" title="Snap recorded notes to the grid"></div>
690  <div id="key_filter_button" class="bottom_left_button" title="Filter recorded notes using the key guide"></div>
691  <div id="metronome_button" class="bottom_left_button" title="Play a metronome. When recording, gives a 4 beat lead in"></div>
692</div>
693</div>
694<div id="sequencer_sidebar">
695  <div id="sequencer_sidebar_resize"></div>
696  <div id="sequencer_sidebar_title" class="title"><div id="sidebar_tab_list"></div><a href="javascript:sidebar.close()"><i class="far fa-times"></i></a></div>
697  <div id="sidebar_content"></div>
698</div>
699</div>
700<div id="bottom">
701    <div id="info">
702        <strong>OnlineSequencer.net</strong> is an online music sequencer. Make tunes in your browser and share them with friends!
703    </div>
704    <div id="links">
705        Made by <a href="https://twitter.com/Jacob__" target="_blank">Jacob Morgan</a> and <a href="https://en.wikipedia.org/wiki/George_P._Burdell" target="_blank">George Burdell</a>
706        &middot;
707        Hosting 5,336,180 sequences since 2013        &middot;
708        <a href="https://ko-fi.com/dylanfox" target="_blank">Buy us a ☕</a>        &middot;
709        <a href="/privacy" target="_blank">Privacy</a>
710        &middot;
711        <a href="https://discord.gg/FSTJuJd" target="_blank"><img src="/resources/discord.png" alt="Online Sequencer on Discord" title="Online Sequencer on Discord" width="20" height="20"/></a>
712        <a href="https://reddit.com/r/onlinesequencer" target="_blank"><img src="/resources/reddit.png" alt="Online Sequencer on Reddit" title="Online Sequencer on Reddit" width="20" height="20"/></a>
713    </div>
714</div>
715<div id="footer_ad_wrapper">
716    <div id="footer_ad">
717<!-- GAM 71161633/ONSE_onlinesequencer/sticky_footer -->
718<div data-fuse="sticky_footer"></div>
719    </div>
720    <div id="footer_ad_close" onclick="closeAd()">
721        <i class="fas fa-times"></i> Close ad
722    </div>
723</div>
724</div>
725<script type="text/javascript">
726    if(typeof onPageLoad === 'function') {
727        onPageLoad();
728    }
729</script>
729
730<div class="clear"></div>
731</div> <!-- End page_right -->
732<div id="stats">
733    
733<script type="text/javascript">
734    var sc_project=8586779; 
735    var sc_invisible=1; 
736    var sc_security="5041619c"; 
737    var scJsHost = (("https:" == document.location.protocol) ?
738    "https://secure." : "http://www.");
739    document.write("<sc"+"ript type='text/javascript' src='" +
740    scJsHost+
741    "statcounter.com/counter/counter.js'></"+"script>");
742    </script>
742
743    <noscript><div class="statcounter"><a title="click tracking"
744    href="http://statcounter.com/" target="_blank"><img
745    class="statcounter"
746    src="http://c.statcounter.com/8586779/0/5041619c/1/"
747    alt="click tracking"></a></div></noscript>
748</div>
749</div> <!-- End page_content -->
750</div> <!-- End page -->
751</div> <!-- End main -->
752<div id="os-popup-container"></div>
753<div id="os-modal-background"></div>
754<template id="template-dialog-alert">
755    <div class="os-dialog">
756        <div class="os-dialog-text"></div>
757        <div class="os-dialog-buttons">
758            <button class="os-primary">OK</button>
759        </div>
760    </div>
761</template>
762<template id="template-dialog-confirm">
763    <div class="os-dialog">
764        <div class="os-dialog-text"></div>
765        <div class="os-dialog-buttons">
766            <button class="os-dialog-ok os-primary">OK</button><button class="os-dialog-cancel">Cancel</button>
767        </div>
768    </div>
769</template>
770<template id="template-dialog-prompt">
771    <div class="os-dialog">
772        <div class="os-dialog-text"></div>
773        <textarea></textarea>
774        <div class="os-dialog-buttons">
775            <button class="os-dialog-ok os-primary">OK</button><button class="os-dialog-cancel">Cancel</button>
776        </div>
777    </div>
778</template>
779<script>
780    createPopupContainer();
781</script>
781
782</div> <!-- End container -->
783<script data-cfasync="false" async src="//cdn.intergient.com/1025702/76953/ramp.js"></script>
783<div id="chatplaceholder">
784</div>
785<br/><br/>
786<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"0f9bb0e42d2f41f5a812c484fc4c1eca","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 786
786
787<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a400a8388a96cdc7',t:'MTc5MDI0MTAzOA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
787</body>
788</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.