CSS - StyleSheets are not active.
JavaScript has to be activated!
Looper
beta.20221203
feedback via discord
or
email
start
Play
Stop
Record
Load
Settings
Level
Merge
todo: change length (loop on expand) fix loopp options offer target lenght to cut to (multiple of other buffer length) proper/smart/auto-cut/trim recording option setting end=fraction/multiple of other loop start=detectSignal record silence level for signal floor value auto silence remover solo track play mode easy master track select mode set for each track how often they should loop, 0 = endless finish the current loop before changing playmode unless retriggered dont start recording while inmid playback, stoptrigger at end stops recording dont play other in the edit dialogue or play in sensful sync timestretching one button control (page down, arrow_right, space or other): press once: rec>play>overdub hold: play>undo>overdub press twice: stop two button control (B1/B2: page up/down, arrow left/right, space/backspace/esc, F1/F2 or other): B1: rec>play>overdub B2: play>undo>overdub B2 hold: stop buffer.onchange event listener
<form id="LooperInfoForm" onunload="looper.iconAnim( 1);" style="margin-left: 260px"> <h2>Looper</h2> Version beta.20210221<br/> Written by Florian Sax<br/> <a href="https://discord.gg/6c9QSCT" target="_blank">feedback via discord</a> or <a href="mailto:looper@properform.ch" target="_blank">email</a><br/> <br/> <h3>Key Bindings</h3> <span class="key">Ctrl</span> Toggle Record/Play<br/> <span class="key">Space</span> Record/Stop or Play/Stop<br/> <span class="key">←</span> Stop<br/> <span class="key">→</span> Play<br/> <span class="key">Pg↑</span> Stop<br/> <span class="key">Pg↓</span> Record/Stop<br/> <br/> <span class="key">↑</span> Select Track above or last Track<br/> <span onclick="looper.record();looper.dialog();"><span class="key">↓</span> Select Track below or Record</span><br/> <br/> <span class="key">Del</span> Delete selected Track<br/> <span class="key">M</span> Mute/Unmute selected Track<br/> <span class="key">Enter</span> Wave Editor for selected Track<br/> <br/> <span onclick="looper.dialog();"><span class="key">Esc</span> Close dialog</span><br/> <span class="key">F1</span> This dialog<br/> <span onclick="looper.dialog( 'settings');"><span class="key">F2</span> Settings</span><br/> <br/> <b>Wave Editor</b><br/> <span class="key">Ctrl</span> + <span class="key">C</span> Copy Selection to Ciplboard<br/> <span class="key">Ctrl</span> + <span class="key">X</span> Copy to Ciplboard and remove Selection<br/> <span class="key">Ctrl</span> + <span class="key">V</span> Paste Ciplboard at Selection<br/> <span class="key">Ctrl</span> + <span class="key">Z</span> Undo<br/> <span class="key">Ctrl</span> + <span class="key">Y</span> Redo<br/> <span class="key">Ctrl</span> + <span class="key">Shift</span> + <span class="key">Z</span> Redo<br/> <span class="key">Del</span> Remove Selection<br/> <span class="key">Shift</span> + <span class="key">Del</span> Crop to Selection<br/> </form> <a class="button" style="color: #AA0000;" onclick="looper.record();looper.dialog();"><i class="fa fa-circle"></i> Start recording</a><br/> <br/> <button onclick="looper.saveConf( 'startup', 1); looper.dialog();">OK</button>
<h2></h2> <form id="LooperSettingForm" onunload="if( window.buPla)buPla.stop();"> <br/> <h3><i class="fa fa-pencil"></i> Name</h3> <input name="projectName" /> <br/> <h3><i class="fa fa-refresh"></i> Loop at</h3> <input onchange="var v = this.value; looper.conf.loopAtSelection = v; v = looper.loopAtOptions.indexOf( v); looper.saveConf( 'loopAt', v); looper.play();" onfocus="this.value=''; showOptions( this, looper.loopAtOptions);" value="{loopAtSelection}" /> <br/> <br/> <h3><i class="fa fa-microphone"></i> Record</h3> <label><input type="checkbox" name="rec_autostart" /> autostart</label> <label><input type="checkbox" name="rec_autostop" /> autostop</label> <label><input type="checkbox" name="overdub" /> Overdub</label> <br/> Level <input name="level" style="width:50px;" type="range" step="0.05" min="0" max="1" /> <label><input type="checkbox" name="normalize" /> Normalize</label> <br/> <label>Offset <input name="offset" style="width:50px;" type="range" step="0.01" min="0" max="0.5" /></label> <br/> <br/> <h3><i class="fa fa-keyboard-o"></i> Keys/Buttons</h3> <div> <label>Play/Stop</label> <input> <input type="button" value="Set" /> </div> <div> <label>Record</label> <input> <input type="button" value="Set" /> </div> <div> <label>Toggle Part</label> <input> <input type="button" value="Set" /> </div> <div> <label>Undo</label> <input> <input type="button" value="Set" /> </div> <br/> <br/> <input type="button" onclick="looper.reset();" value="Clear Settings" /> </form>
<div class="progress"></div> <canvas></canvas> <span class="button revealer" style="float:right;"> <i class="fa fa-play-circle-o" onclick="looper.setPlay( this, 'once');"></i> <i class="fa fa-dot-circle" onclick="looper.setPlay( this, 'off');"></i> <i class="fa fa-pencil" onclick="looper.stop(); buPla.bufferDialog();"></i> <input type="checkbox" value="1" onChange="looper.muteTrack( this);" /> </span> <div class="canvasBox_sub"> <a class="button" onclick="uploadBuPla = buPla; this.nextSibling.click();"><i class="fa fa-folder-open-o"></i> </a><input type="file" accept="audio/*" style="visibility:hidden;width:0px;margin-left:-0px;padding:0;" capture onchange="uploadBuPla.handleFileInput( this);" /> <a class="button" onmousedown="JSAX.audio.buffer.download( buPla.buffer, this);" title="download"><i class="fa fa-floppy-o"></i></a> <br/> <a class="button" onclick="buPla.record();" style="color:darkred;"><i class="fa fa-microphone"></i></a> <a class="button" onclick="looper.stop();buPla.bufferDialog();" title="edit"><i class="fa fa-pencil"></i></a> <a class="button" onclick="buPla.applyBuffer( JSAX.audio.buffer.normalise( buPla.buffer));" title="normalise"><i class="fa fa-arrows-v"></i></a> <a class="button" onclick="looper.removeTrack();" title="remove"><i class="fa fa-trash"></i></a> </div>
<h2>Buffer Functions</h2> <form id="bufferFunctionForm" onunload="this.zoom( 1);buPla.prePlay_stop();"> <li class="menu"><a class="button"><i class="fa fa-file-audio-o"></i> Audio File</a> <ul> <li onclick="uploadBuPla = buPla; this.lastElementChild.click();" title="import" accesskey="o"><i class="fa fa-folder-open-o"></i> Import Audio File <input type="file" accept="audio/*" style="visibility:hidden;width:0px;height:0px;position:absolute;" capture onchange="uploadBuPla.handleFileInput( this);" /></li> <a onmousedown="JSAX.audio.buffer.download( buPla.buffer, this);" title="export"><i class="fa fa-floppy-o"></i> Save WAV file</a> </ul> </li> <li class="menu"><a class="button"><i class="fa fa-arrows-h"></i> Edit</a> <ul> <li onclick="buPla.form.apply( this.title);" title="zoom"><i class="fa fa-search-plus"></i> Zoom Selection <span class="key">🠕/🠗</span></li> <hr/> <li onclick="buPla.form.apply( this.title);" title="undo"><i class="fa fa-reply"></i> Undo <span class="key">Ctrl+Z</span></li> <li onclick="buPla.form.apply( this.title);" title="redo"><i class="fa fa-share"></i> Redo <span class="key">Ctrl+Y</span></li> <hr/> <li onclick="buPla.form.apply( this.title);" title="cut"><i class="fa fa-cut"></i> Cut <span class="key">Ctrl+X</span></li> <li onclick="buPla.form.apply( this.title);" title="copy"><i class="fa fa-files-o"></i> Copy <span class="key">Ctrl+C</span></li> <li onclick="buPla.form.apply( this.title);" title="paste"><i class="fa fa-paste"></i> Paste <span class="key">Ctrl+V</span></li> <li onclick="buPla.form.apply( this.title);" title="delete"><i class="fa fa-trash"></i> Delete <span class="key">Del</span></li> <li onclick="buPla.form.apply( this.title);" title="crop"><i class="fa fa-crop"></i> Crop <span class="key">⟻</span></li> <li onclick="buPla.form.apply( this.title);" title="trim"><i class="fa fa-crop"></i> Trim</li> <li onclick="buPla.form.apply( this.title);" title="duplicate"><i class="fa fa-files-o"></i> Duplicate <span class="key">Ctrl+D</span></li> <hr/> <li onclick="buPla.form.apply( this.title);" title="select"><i class="fa fa-reply"></i> Invert Selection <span class="key">Ctrl+A</span></li> <li onclick="buPla.form.apply( this.title, 'a');" title="select"><i class="fa fa-reply"></i> Select All <span class="key">Ctrl+A</span></li> <li onclick="buPla.form.apply( this.title, 'n');" title="select"><i class="fa fa-reply"></i> Select None <span class="key">Ctrl+A</span></li> </ul> </li> <li class="menu"><a class="button"><i class="fa fa-filter"></i> Filters</a> <ul> <li onclick="buPla.form.apply( 'filter','normalize');"><i class="fa fa-arrows-v"></i> Normalize</li> <li onclick="buPla.form.apply( 'filter','gain');"><i class="fa fa-arrows-v"></i> gain</li> <li onclick="buPla.form.apply( 'filter','limit');"><i class="fa fa-minus"></i> limit</li> <li onclick="buPla.form.apply( 'filter','reversePolarity');"><i class="fa fa-minus"></i> reversePolarity</li> <li onclick="buPla.form.apply( 'filter','backwards');"><i class="fa fa-caret-left"></i> Backwards</li> <li onclick="buPla.form.apply( 'filter','fadein');"><i class="fa fa-caret-left"></i> Fadein</li> <li onclick="buPla.form.apply( 'filter','fadeout');"><i class="fa fa-caret-right"></i> Fadeout</li> <li onclick="buPla.form.apply( 'filter','smooth ends');"><i class="fa fa-filter"></i> smooth ends</li> <li onclick="buPla.form.apply( 'filter','seamless end');"><i class="fa fa-filter"></i> seamless end</li> <li onclick="buPla.form.apply( 'filter','zero');"><i class="fa fa-minus"></i> zero</li> <li><a onclick="buPla.form.apply( 'filter','sine');"><i class="fa fa-circle-thin"></i> sine</a><ul> <li onclick="buPla.form.apply( 'filter','sine',{hz:220});"><i class="fa fa-circle-thin"></i> 220</li> <li onclick="buPla.form.apply( 'filter','sine',{hz:440});"><i class="fa fa-circle-thin"></i> 440</li> <li onclick="buPla.form.apply( 'filter','sine',{hz:880});"><i class="fa fa-circle-thin"></i> 880</li> </ul></li> <li><a onclick="buPla.form.apply( 'filter','metronome relative');"><i class="fa fa-magic"></i> metronome</a><ul> <li onclick="buPla.form.apply( 'filter','metronome relative',{beats:2});"><i class="fa fa-magic"></i> 2</li> <li onclick="buPla.form.apply( 'filter','metronome relative',{beats:3});"><i class="fa fa-magic"></i> 3</li> <li onclick="buPla.form.apply( 'filter','metronome relative',{beats:4});"><i class="fa fa-magic"></i> 4</li> <li onclick="buPla.form.apply( 'filter','metronome relative',{beats:5});"><i class="fa fa-magic"></i> 5</li> </ul></li> </ul> </li> <a class="button" onclick="buPla.record();" style="color:darkred;"><i class="fa fa-microphone"></i></a> <a class="button" onclick="uploadBuPla = buPla; this.nextSibling.click();"><i class="fa fa-folder-open-o"></i> </a><input type="file" accept="audio/*" style="visibility:hidden;width:0px;position:absolute;" capture onchange="uploadBuPla.handleFileInput( this);" /> <a class="button" onmousedown="JSAX.audio.buffer.download( buPla.buffer, this);" title="download"><i class="fa fa-floppy-o"></i></a> <br/> <span class="hidden_looper"> <input name="duration_select" onfocus="showOptions( this, looper.lengthOptions());" onchange="" style="width:60px;" value="" placeholder="trim to ..." /> <a class="button" onclick=" var l = this.previousElementSibling.value; l = l.split( ',')[0]; l = parseFloat( l) *AC.sampleRate; console.log( l); buPla.applyBuffer( JSAX.audio.buffer.substr( buPla.buffer, 0, l));" title="crop"><i class="fa fa-crop"></i></a> <br/> </span> <label> Play <input name="prePlay" type="checkbox" onchange="this.form.setSelection();" /><i></i></label> <a class="button" onclick="buPla.form.apply( this.title);" title="zoom"><i class="fa fa-search-plus"></i> Zoom</a> <b>Duration</b> <input name="duration" onchange="this.form.setSelection();" style="width:60px;" value="{duration}" />seconds <div id="canvasCopy"></div> <b>Selection</b> <input name="selection_start" onchange="this.form.setSelection();" style="width:60px;" /> <input name="selection_end" onchange="this.form.setSelection();" style="width:60px;" /> <a class="button hidden_looper" onclick="var b = buPla.form.bufferFragment; console.log( b); if( b)looper.createTrack( b);" title="add"><i class="fa fa-plus"></i></a> <a class="button" onclick="buPla.form.apply( this.title);" title="cut"><i class="fa fa-cut"></i></a> <a class="button" onclick="buPla.form.apply( this.title);" title="crop"><i class="fa fa-crop"></i></a> <a class="button" onclick="buPla.form.apply( this.title);" title="undo"><i class="fa fa-reply"></i></a> <a class="button" onclick="buPla.form.apply( this.title);" title="redo"><i class="fa fa-share"></i></a> <br/> <input name="add_ms" onchange=";" style="width:60px;" value="50" /> <a class="button" onclick="buPla.form.apply( this.title);" title="subtract"><i class="fa fa-minus"></i></a> <a class="button" onclick="buPla.form.apply( this.title);" title="add"><i class="fa fa-plus"></i></a> <br/> <a class="button" onclick="buPla.applyBuffer( JSAX.audio.buffer.normalise( buPla.buffer));" title="normalise"><i class="fa fa-arrows-v"></i></a> <br/> <br/> <code>function( v, i, length, @o){</code> <input type="options" placeholder="Functions" style="width:200px;" onkeyup=" showOptions( this, bufferFunctions); this.preValue = this.value; " onfocus="this.onkeyup();" onchange=" byId( 'bufferFunctionInput').value = this.data[0]; this.value = ''; " /> <textarea name="code" id="bufferFunctionInput" style="height: 108px; width: calc( 100% - 20px); margin-left: 20px; font-size:12px;line-height:14px;" onchange="var a = this.value;"> return v *0.5; </textarea> <code>}</code> <a class="button" onclick="buPla.form.apply( this.title)" title="logic"><i class="fa fa-caret-right"></i> execute</a> <div id="bufferFunctionOutput"></div> </form>
