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 ↑ and ↓ 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 · 707 Hosting 5,336,180 sequences since 2013 · 708 <a href="https://ko-fi.com/dylanfox" target="_blank">Buy us a â</a> · 709 <a href="/privacy" target="_blank">Privacy</a> 710 · 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.