01-09-2021, 12:20 PM
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Online Sequencer - Make music online</title>
<meta property="og:image" content="http://onlinesequencer.net/resources/logo.png" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="OnlineSequencer.net is an online music sequencer. Make tunes in your browser and share them with friends!" />
<meta property="og:title" content="Make music online" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Online Sequencer" />
<meta property="og:description" content="OnlineSequencer.net is an online music sequencer. Make tunes in your browser and share them with friends!" />
<meta property="fb:app_id" content="1512952002290893" />
<style id="css_vars">
.key, .key_sharp, .key div, .key_sharp div {
}
.measure {
}
</style>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/resources/c/5d3207a2fa0117fc169b2124b7dcb9bf.css" />
<link rel="preload" href="/app/sequencer.worker.js" as="script">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3037948-7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-3037948-7');
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://kit.fontawesome.com/2c41c9c672.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/resources/c/5cd021446ebeb5b9d660c22f23266a4c.js"></script>
<script type="text/javascript">
settings['uid'] = 0;
settings['username'] = "";
settings['logoutkey'] = null;
settings['post_key'] = "7d84432fa6ce798b044708e586464984";
</script>
</head>
<body>
<noscript><div class="sitemessage">This site requires JavaScript to be enabled in your browser settings to work properly.</div></noscript>
<div id="container">
<div id="header">
<div id="ad">
<script id="mNCC" language="javascript">
medianet_width = "468";
medianet_height = "60";
medianet_crid = "456024333";
medianet_versionId = "111299";
(function() {
var isSSL = 'https:' == document.location.protocol;
var mnSrc = (isSSL ? 'https:' : 'http:') + '//contextual.media.net/nmedianet.js?cid=8CU570J80' + (isSSL ? '&https=1' : '');
document.write('<scr' + 'ipt type="text/javascript" id="mNSC" src="' + mnSrc + '"></scr' + 'ipt>');
})();
</script>
</div>
<div id="nav">
<a id="logo" href="/">
<div class="icon"></div>
<div class="text">
<span class="title">Online Sequencer</span>
<span class="subtitle">Make music online</span>
</div>
</a>
<div id="header_right">
<ul>
<li><a href="/sequences">Sequences</a></li><li><a href="/memberlist">Members</a></li><li><a href="/import">Import MIDI</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></ul>
<div id="bar">
<div style="float:right">
<div id="user_guest" style="display: block">
<div id="login_fields">
<input type="text" id="username" name="username" placeholder="Username" />
<input type="password" id="password" name="password" placeholder="Password" />
</div>
<a id="login_button" class="linkbutton" href="javascript:;">Login</a>
<a id="registerbutton" class="linkbutton" href="/forum/member.php?action=register" target="_blank">Register</a>
</span>
</div>
<div id="user_member" style="display: none">
Welcome back <span id="member_username"><a href="/members/0"></a></span>! <a id="member_logout" class="linkbutton" href="javascript:;">Log out</a>
</div>
<div class="header_links">
<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>
<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>
</div>
</div>
<span id="sequence_info"></span>
</div>
</div>
</div>
</div>
<div id="main">
<div id="page" style="">
<div id="page_right" style="max-width:none;">
<style type="text/css">
#main {
bottom: 0;
}
</style>
<div id="middle">
<div id="middle_left">
<!--<div id="featured_list">
<div class="featured_content">
</div>
</div>-->
<div id="frame_wrapper">
<script type="text/javascript">
window.audioFormat = 'ogg';
window.isMobile = false;
loading = true;
window.onload = function()
{
create();
$('#loading_overlay').css('display', 'none');
var data = '';
loadInstrument(0);enterEditMode(); loadDataProto(data);
song.id = 0;
song.basedon = 0;
owner = 0;
container.scrollTop = container.scrollHeight/2-200;
};
</script>
<div id="loading_overlay"></div>
<div id="sequencer">
<div id="playbutton"></div>
<div id="loading_container">
Loading sounds...
<div id="loading_bar">
<div id="loading"></div>
</div>
</div>
<div id="share" style="display: none"><div class="btn" id="btn_close"> </div><span id="sharelink">Link to this sequence: </span></div>
<div id="instrument_options" style="display: none">
<div id="instrument_options_tabs">
<div id="instrument_options_tab_simple" class="selected">Simple</div>
<div id="instrument_options_tab_advanced">Advanced</div>
</div>
<div id="instrument_options_simple"></div>
<div id="instrument_options_advanced" style="display: none">
<div class="instrument_options_advanced_row">
<div id="instrument_options_advanced_chip"></div>
<div id="instrument_options_advanced_title">Instrument name</div>
<div id="instrument_options_advanced_lock" class="instrument_lock btn" onclick="lockInstrument(instrument, event)"><i id="instrument_options_advanced_lock_btn"class="fas fa-lock-open-alt"></i></div>
<div class="instrument_options_advanced_spacer"></div>
<div id="instrument_options_mute" class="button" onclick="muteInstrument(instrument)">Mute</div>
<div id="instrument_options_solo" class="button" onclick="soloInstrument(instrument)">Solo</div>
<div id="instrument_options_reset" class="button" onclick="resetSettings(instrument)">Reset</div>
</div>
<div class="instrument_options_advanced_row">
<div class="instrument_options_advanced_label">Volume</div>
<div class="slider_line">
<div class="slider_center"></div>
<input id="instrument_options_advanced_volume" class="slider" type="range" min="0" max="2" step="0.01" oninput="setInitialInstrumentVolume(instrument, this.value)">
</div>
<div id="instrument_options_advanced_delay" class="button" onclick="selectDelay(instrument)">Delay</div>
<div id="instrument_options_advanced_reverb" class="button" onclick="selectReverb(instrument)">Reverb</div>
</div>
<div class="instrument_options_advanced_row panning_row">
<div class="instrument_options_advanced_label">Panning</div>
<div class="slider_line">
<div class="slider_center"></div>
<input id="instrument_options_advanced_pan" class="slider" type="range" min="-1" max="1" step="0.01" oninput="setPan(instrument, this.value)">
</div>
</div>
<div id="instrument_options_advanced_eq">
<div class="button" onclick="selectEq(instrument)">Equalizer</div>
<div id="instrument_options_advanced_eq_sliders">
<div class="instrument_options_advanced_eq_row">
<div class="instrument_options_advanced_label">High</div>
<div class="slider_line with_warning">
<div class="slider_center"></div>
<input id="instrument_options_advanced_eq_high" class="slider" type="range" min="-48" max="48" step="1" oninput="setEqHigh(instrument, parseFloat(this.value))">
</div>
</div>
<div class="instrument_options_advanced_eq_row">
<div class="instrument_options_advanced_label">Mid</div>
<div class="slider_line with_warning">
<div class="slider_center"></div>
<input id="instrument_options_advanced_eq_mid" class="slider" type="range" min="-48" max="48" step="1" oninput="setEqMid(instrument, parseFloat(this.value))">
</div>
</div>
<div class="instrument_options_advanced_eq_row">
<div class="instrument_options_advanced_label">Low</div>
<div class="slider_line with_warning">
<div class="slider_center"></div>
<input id="instrument_options_advanced_eq_low" class="slider" type="range" min="-48" max="48" step="1" oninput="setEqLow(instrument, parseFloat(this.value))">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="marker_editor" style="display: none">
<div id="marker_editor_title_row">
<div id="marker_editor_title">Edit Markers</div>
<div class="btn" title="Close" onclick="markerEditorClose()"><i class="far fa-times"></i></div>
</div>
<div id="marker_editor_marker_list">
<div id="marker_editor_markers"></div>
<div id="marker_editor_add">
<div class="btn" id="btn_edit_markers_add" title="Add" onclick="markerEditorAdd()"><i class="far fa-plus"></i></div>
<div class="box_input" id="marker_type_input"><select id="marker_type"></select></div>
<div class="box_input" id="marker_instrument_input"><select id="marker_instrument" disabled></select></div>
</div>
</div>
</div>
<div id="titlebar">
<div class="left">
<div id="view_mode_play" class="play" title="Play">
<i id="view_mode_play_icon" class="fas fa-play"></i>
</div>
<div class="text">
Untitled </div>
<div class="btn_edit" title="Enter edit mode">
<i class="far fa-edit"></i>
</div>
<div class="btn_graphics" title="Toggle fast graphics">
<i class="far fa-tachometer-fast"></i>
</div>
</div>
<div class="right">
</div>
</div>
<div id="menubar_element">
<div id="menubar_menus"></div>
<div class="right">
</div>
</div>
<div id="toolbar_container" class="dragscroll">
<div id="toolbar_element" style="display: flex">
<div>
<div id="play_small" class="play" title="Play">
<i id="play_small_icon" class="fas fa-play"></i>
</div>
<div class="box_label">
<span>BPM</span> <div class="box_input">
<input type="text" id="bpm" size="3" maxlength="3" autocomplete="off" value="110" onchange="setInitialBPM(document.getElementById('bpm').value);"/>
</div>
</div>
<div class="box_label">
<span>Title</span> <div class="box_input" id="title_box_input">
<input type="text" id="title" size="32" maxlength="128" autocomplete="off" value="Untitled"/>
</div>
</div>
<div class="btn" id="mode_draw" title="Draw"><i class="far fa-edit"></i></div>
<div class="btn" id="mode_edit" title="Select"><i class="fas fa-mouse-pointer"></i></div>
<div class="btn" id="mode_erase" title="Erase"><i class="fas fa-eraser"></i></div>
<div class="spacer"></div>
<div id="instrument_select_box" class="box_label" style="position:relative"><span>Instrument</span>
<div class="box_input">
<select id="instrument_select"></select>
</div>
</div>
<div class="btn" id="btn_select_this" title="Highlight this one">
<i class="fas fa-music"></i>
</div>
<div class="btn" id="btn_instrument_options" title="Show options">
<i class="far fa-sliders-h"></i>
</div>
<div class="spacer"></div>
<div class="btn" id="btn_copy" data-clipboard-text="" title="Copy"><i class="fas fa-copy"></i></div>
<div class="btn" id="btn_cut" title="Cut"><i class="far fa-cut"></i></div>
<div class="btn" id="btn_paste" title="Paste"><i class="fas fa-paste"></i></div>
<div class="btn" id="btn_selectall" title="Select all"><i class="fas"></i></div>
<div class="spacer"></div>
<div class="btn" id="btn_zoomOut" title="Zoom out"><i class="far fa-search-minus"></i></div>
<div class="btn" id="btn_zoomIn" title="Zoom in"><i class="far fa-search-plus"></i></div>
<div class="spacer"></div>
<div class="btn" id="savelink" href="javascript:;" title="Save"><i class="fas fa-cloud-upload"></i></div>
<div class="btn" id="btn_save_options" title="Show options"><i class="fas fa-caret-down"></i></div>
<div class="spacer"></div>
<div class="btn" id="btn_help" title="Show help"><i class="fas fa-question-circle"></i></div>
<div class="btn" id="btn_more" title="More tools"><i class="far fa-ellipsis-v"></i></div>
</div>
<div style="display: inline-block; color: #adb0bd; line-height: 24px; text-align: right; flex: 1;">
Check out <a style="color: white; text-decoration: none;" target="_blank" href="https://sites.google.com/view/lucentguide/home">Lucent's Guide to Online Sequencer</a>
</div>
</div>
</div>
<div id="message_wrapper">
<span id="message_text"></span>
</div>
<style>
</style>
<div id="sequencer_timeline_wrapper">
<div id="sequencer_timeline_options">
<div id="timeline_option_measures" class="timeline_option_active"><i class="fas fa-ruler"></i></div>
<div id="timeline_option_time" class="timeline_option"><i class="fas fa-clock"></i></div>
</div>
<div id="sequencer_timeline">
<div id="sequencer_timeline_measures" oncontextmenu="return false;"></div>
<div id="sequencer_timeline_markers" oncontextmenu="return false;"></div>
</div>
</div>
<div id="sequencer_panel">
<div id="keyboard_wrapper_element">
<div id="keyboard_element"></div>
</div>
<div id="sequencer_panel_right">
<div id="sequencer_view">
</div>
<div id="playhead_wrapper">
</div>
<div id="sequencer_main" tabindex="0">
<div id="sequencer_inner">
<div id="selection_rect"></div>
<div id="wavesurfer_element" style="display:none"></div>
</div>
</div>
</div>
</div>
<div id="menus">
<div class="item">
<div class="box_label"><span>Grid</span>
<div class="box_input" id="grid_select_input">
<select id="grid_select">
<option value="0.25">1</option>
<option value="0.5">1/2</option>
<option value="0.75">1/3</option>
<option value="1" selected="selected">1/4</option>
<option value="1.5">1/6</option>
<option value="2">1/8</option>
<option value="3">1/12</option>
<option value="4">1/16</option>
</select>
</div>
</div>
</div>
<div class="item">
<div class="box_label"><span>Time signature</span>
<div class="box_input" id="time_sig_select_input">
<select id="time_sig_select">
<option value="2">2/4</option>
<option value="3">3/4</option>
<option value="4" selected="selected">4/4</option>
<option value="5">5/4</option>
</select>
</div>
</div>
</div>
<div class="item">
<div class="box_label"><span>Key (<a href="javascript:;" onclick="updateScale(song.notes);">Auto Detect</a>)</span>
<div class="box_input">
<select id="key_select"></select>
</div>
</div>
</div>
<div class="item">
<div class="box_label"><span>Auto Scroll</span>
<div class="box_input" id="scroll_select_input">
<select id="scroll_select">
<option value="0">Smooth</option>
<option value="1" selected="selected">Fast</option>
<option value="2">Off</option>
</select>
</div>
</div>
</div>
<div class="item">
<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.">
<a class="linkbutton" style="float: left" href="javascript:;" onclick="showAudioTrackSelect()">Add Audio Track</a>
</div>
<div id="audio_track_loading" style="display:none">Loading audio file...</div>
<div id="audio_track" style="display:none">
<input id="audio_track_file" type="file" accept="audio/*" class="button">
<div id="audio_track_remove">
<a class="linkbutton" href="javascript:;" onclick="$('#wavesurfer_element').toggle();">Show/hide waveform</a><a class="linkbutton" href="javascript:;" onclick="removeAudioTrack()">Remove</a>
</div>
</div>
</div>
</div>
<div id="bottom_left">
<div id="record_button" class="bottom_left_button"></div>
<div id="quantize_button" class="bottom_left_button"></div>
<div id="metronome_button" class="bottom_left_button"></div>
<div id="record_button_tooltip" class="tooltip">
Record keyboard and MIDI inputs.
</div>
<div id="quantize_button_tooltip" class="tooltip">
Snap recorded notes to the grid.
</div>
<div id="metronome_button_tooltip" class="tooltip">
Play a metronome. When recording, gives a 4 beat lead in.
</div>
</div>
</div>
<div id="bottom">
<div id="links">
<strong>OnlineSequencer.net</strong> is an online music sequencer. Make tunes in your browser and share them with friends!<br/>
Made by <a href="https://twitter.com/Jacob__" target="_blank">Jacob Morgan</a> and <a href="http://en.wikipedia.org/wiki/George_P._Burdell" target="_blank">George Burdell</a>
·
Hosting 1,725,383 sequences since 2013 · <a href="https://www.buymeacoffee.com/onlineseq" target="_blank">Buy me a coffee!</a>
</div>
<div id="volume">
<input id="volume_slider" type="range" min="0" max="2" step="0.01" value="1">
Volume
</div>
</div>
</div>
</div>
<div id="sidebar">
<div class="btn_side"><a href="/"><img src="/resources/add.png" width="16" height="16"><span>New Sequence</span></a></div>
<div class="btn_side" style="height:initial;">
<a id="sort_1_link" href="javascript:;" onclick="sort('sort_1')" style="font-weight:bold">Random</a>
<a id="sort_2_link" href="javascript:;" onclick="sort('sort_2')">Popular</a>
</div><div id="sort_1">
<div class="preview" title="Untitled">
<div class="image" style="background-image:url(/t/2/206002_t0_s2_r1_v1.gif)"></div>
<div class="info">39 notes</div>
<a href="/206002"></a>
</div>
<div class="preview" title="Untitled">
<div class="image" style="background-image:url(/t/321/310321_t0_s2_r1_v1.gif)"></div>
<div class="info">136 notes</div>
<a href="/310321"></a>
</div>
<div class="preview" title="men;s hair club brian damaged edition">
<div class="image" style="background-image:url(/t/345/321345_t0_s2_r1_v1.gif)"></div>
<div class="info">616 notes</div>
<a href="/321345"></a>
</div>
<div class="preview" title="Untitled">
<div class="image" style="background-image:url(/t/589/699589_t0_s2_r1_v1.gif)"></div>
<div class="info">459 notes</div>
<a href="/699589"></a>
</div>
<div class="preview" title="Untitled">
<div class="image" style="background-image:url(/t/937/951937_t0_s2_r1_v1.gif)"></div>
<div class="info">85 notes</div>
<a href="/951937"></a>
</div>
<div class="preview" title="Thing">
<div class="image" style="background-image:url(/t/65/1081065_t0_s2_r1_v1.gif)"></div>
<div class="info">49 notes</div>
<a href="/1081065"></a>
</div>
<div class="preview" title="Untitled">
<div class="image" style="background-image:url(/t/908/1209908_t0_s2_r1_v1.gif)"></div>
<div class="info">18 notes</div>
<a href="/1209908"></a>
</div>
<div class="preview" title="Cedric's Theme">
<div class="image" style="background-image:url(/t/136/1320136_t0_s2_r1_v1.gif)"></div>
<div class="info">348 notes</div>
<a href="/1320136"></a>
</div>
<div class="preview" title="Untitled">
<div class="image" style="background-image:url(/t/916/1340916_t0_s2_r1_v1.gif)"></div>
<div class="info">223 notes</div>
<a href="/1340916"></a>
</div>
<div class="preview" title="Hisagi.mid">
<div class="image" style="background-image:url(/t/743/1387743_t0_s2_r1_v1.gif)"></div>
<div class="info">78 notes</div>
<a href="/1387743"></a>
</div>
<div class="preview" title="EP3__Battle_Of_The_Heroes.mid">
<div class="image" style="background-image:url(/t/854/1547854_t0_s2_r1_v1.gif)"></div>
<div class="info">12,368 notes</div>
<a href="/1547854"></a>
</div>
<div class="preview" title="38 in not 20s">
<div class="image" style="background-image:url(/t/375/1616375_t0_s2_r1_v1.gif)"></div>
<div class="info">38 notes</div>
<a href="/1616375"></a>
</div></div>
<div id="sort_2" style="display:none">
<div class="preview" title="[JvP] Deja Vu">
<div class="image" style="background-image:url(/t/156/1002156_t0_s2_r38_v1.gif)"></div>
<div class="info">25,768 notes</div>
<a href="/1002156"></a>
</div>
<div class="preview" title="Polyphia - G.O.A.T.">
<div class="image" style="background-image:url(/t/881/1176881_t0_s2_r48_v1.gif)"></div>
<div class="info">5,608 notes</div>
<a href="/1176881"></a>
</div>
<div class="preview" title="A Lover's Devotion (original song)">
<div class="image" style="background-image:url(/t/902/1242902_t0_s2_r91_v1.gif)"></div>
<div class="info">9,096 notes</div>
<a href="/1242902"></a>
</div>
<div class="preview" title="Megalobrainiac (***** + Brainiac Maniac)">
<div class="image" style="background-image:url(/t/202/1561202_t0_s2_r228_v1.gif)"></div>
<div class="info">9,612 notes</div>
<a href="/1561202"></a>
</div>
<div class="preview" title="*****">
<div class="image" style="background-image:url(/t/502/1222502_t0_s2_r73_v1.gif)"></div>
<div class="info">3,174 notes</div>
<a href="/1222502"></a>
</div>
<div class="preview" title="Not Unlike Before (Editing)">
<div class="image" style="background-image:url(/t/971/673971_t0_s2_r80_v1.gif)"></div>
<div class="info">2,176 notes</div>
<a href="/673971"></a>
</div>
<div class="preview" title="Touhou 1 Sariel's Theme (PIANO) - Now, Until the Moment You Die">
<div class="image" style="background-image:url(/t/666/666_t0_s2_r16_v1.gif)"></div>
<div class="info">3,426 notes</div>
<a href="/666"></a>
</div>
<div class="preview" title="( ͡° ͜ʖ ͡°)">
<div class="image" style="background-image:url(/t/253/1041253_t0_s2_r132_v1.gif)"></div>
<div class="info">8,203 notes</div>
<a href="/1041253"></a>
</div>
<div class="preview" title="Don't Stop Me Now - Queen">
<div class="image" style="background-image:url(/t/202/457202_t0_s2_r9_v1.gif)"></div>
<div class="info">7,905 notes</div>
<a href="/457202"></a>
</div>
<div class="preview" title="Psychonic Line of Control / Illusion's Grasp Part 2">
<div class="image" style="background-image:url(/t/940/1162940_t0_s2_r100_v1.gif)"></div>
<div class="info">13,755 notes</div>
<a href="/1162940"></a>
</div>
<div class="preview" title="This rap beat is *****ING FIRE!!!">
<div class="image" style="background-image:url(/t/390/1420390_t0_s2_r24_v1.gif)"></div>
<div class="info">3,391 notes</div>
<a href="/1420390"></a>
</div>
<div class="preview" title="[JvP] Yoshi's Village - Mario & Luigi: Partners In Time">
<div class="image" style="background-image:url(/t/380/1056380_t0_s2_r30_v1.gif)"></div>
<div class="info">10,359 notes</div>
<a href="/1056380"></a>
</div></div><div id="like_button">
<iframe src="//www.facebook.com/plugins/like.php?href=http://onlinesequencer.net/&width=131&layout=button_count&action=like&show_faces=true&share=true&height=21&appId=502727419751398" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:131px; height:21px;" allowTransparency="true"></iframe>
</div> </div>
</div>
<div id="space"></div>
</div>
<div id="side_chat"></div>
<div class="clear"></div>
<div id="progressbar" style="display:none">
<p id="progress"></p>
</div>
<div id="stats">
<script type="text/javascript">
var sc_project=8586779;
var sc_invisible=1;
var sc_security="5041619c";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="click tracking"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/8586779/0/5041619c/1/"
alt="click tracking"></a></div></noscript>
</div>
</div>
</div>
</div>
<div id="chatplaceholder">
</div>
<br/><br/>
</body>
</html>