Online Audio Looper

How to Create Seamless Audio Loops: Zero Crossings, Crossfades, and BPM Alignment

A loop that clicks at the join point is unusable. A loop that drifts out of sync with a track destroys the feel of a production. These are the two failure modes that trip up most musicians when they try to create loops manually, and both have well-understood technical solutions. This tool applies those solutions in your browser using the Web Audio API and direct Float32Array manipulation on the decoded audio buffer, with no server involvement.

Why Loop Points Click and How Zero Crossings Fix It

When you cut audio at a point where the waveform is not at zero amplitude, you create a discontinuity. The playback position jumps instantly from a non-zero sample value at the end of the previous cycle to the first sample of the new cycle. The DAC (digital-to-analog converter) in your interface or speaker driver has to reproduce that instant jump, which manifests as a broadband click, typically in the 3-6 kHz range where it is most audible. The energy of that click is proportional to the amplitude at the cut point.

Zero crossing snap eliminates this by finding the nearest point in the waveform where the signal passes through zero amplitude before repeating the loop. The algorithm searches a window of samples around your chosen loop point (this tool uses a window of ±10 ms by default) and finds the sample index where the waveform crosses from positive to negative or negative to positive. Setting your loop point at that crossing means the end of the cycle and the start of the next cycle both begin at zero, so there is no discontinuity and no click.

This approach works reliably for most sustained tones, pads, and percussion. The Web Audio specification documents the AudioBufferSourceNode.loopStart and AudioBufferSourceNode.loopEnd properties, which accept time values in seconds. Setting .loop = true on the node tells the browser to handle the seamless wrap natively during playback. The browser's audio rendering thread performs the looping at the sample level, so there is no audible gap from JavaScript scheduling latency.

When Crossfade Is Necessary

Zero crossing snap covers the majority of looping scenarios. It does not cover all of them. If the audio material has heavy reverb or a trailing decay at the loop point, the spectrum of the signal at the zero crossing may still differ enough from the start of the loop to produce a subtle glitch. This is common in orchestral samples, electric guitar with spring reverb, or any signal where the room tail is still audible after the note has nominally ended.

Crossfade addresses this by blending the tail of one loop cycle into the head of the next over a short window. This tool implements a linear crossfade at export time: the last N milliseconds of the region are faded out while the first N milliseconds are simultaneously faded in. The two are summed sample by sample. The result is a smooth transition even when the spectral content at the join point is not identical on both sides. Most sample library developers use crossfades of 5 to 30 ms for sustained instruments. Values above 50 ms start to affect the perceived attack of the loop start, which is why this tool caps the slider at 50 ms. For clean percussive loops with a fast transient at the start, keep crossfade at zero and rely solely on zero-crossing snap.

The crossfade in this tool only applies to the exported WAV. The browser's native loop preview via AudioBufferSourceNode uses the zero-crossing-snapped points directly. If you hear a slight click in the preview but not in the exported file, that is expected behavior and the export is correct.

BPM Grid Alignment and Musical Loop Length

A loop that is musically the right length is as important as a loop that is technically seamless. If your loop is 2.003 seconds when it should be exactly 2.000 seconds for a 120 BPM track (one bar in 4/4 at 120 BPM), it will drift noticeably within a few cycles. At 120 BPM, one bar is exactly 2 seconds: four beats at 0.5 seconds each. Two bars is 4 seconds. Four bars is 8 seconds.

The BPM grid overlay draws vertical bar markers on the waveform so you can see where musically correct boundaries fall relative to your audio. The quick-snap buttons let you lock the loop end point to an exact musical duration from your current loop start: 1 beat, 2 beats, 1 bar, 2 bars, 4 bars, or 8 bars. Combined with zero-crossing snap, this gives you a loop that is both click-free and musically precise.

For audio without a strict tempo (ambient textures, sound design, vocal pads), BPM alignment is not relevant. Use visual inspection of the waveform and your ear to find natural start and end points. For drum loops and rhythmic material, always use the BPM grid. A 1-sample error in loop length at 120 BPM at 44.1 kHz produces a drift of approximately 0.023 ms per cycle, which accumulates to about 23 ms per 1,000 cycles. At 4 cycles per bar, that is a perceptible drift after roughly 250 bars of looped playback.

The Export Repeat Multiplier

Many workflows need a looped region exported as a single continuous file rather than a single cycle. A sample library may need a 4-bar loop delivered as 8 or 16 bars so the file has enough audio for the listener to evaluate the loop quality in context. A stem package for a sync placement might require 30 or 60 seconds of looped audio to cover the full cue duration.

The repeat multiplier writes the loop region into a new AudioBuffer N times end-to-end, applies the crossfade at each join point if enabled, and encodes the result as a single 16-bit PCM WAV. The output file is named with an _xN suffix so you can identify the repeat count in your file browser. Using the Audio Trimmer afterward, you can fine-trim the resulting file if you need a specific duration like exactly 30 seconds.

How the Waveform Rendering Works

The waveform is drawn on an HTML canvas element using raw peak data extracted from the decoded Float32Array. The algorithm divides the sample buffer into buckets equal to twice the canvas pixel width, computes the minimum and maximum sample amplitude in each bucket, and draws a vertical line segment for each pixel column. This is the standard downsampled peak waveform approach used by every professional DAW. It accurately represents the amplitude envelope at any zoom level without aliasing or averaging artifacts that would obscure transients.

Zoom levels from 1x to 32x are available. At 32x on a 44.1 kHz file, each pixel column represents approximately 1.4 ms of audio. This is fine enough to visually identify individual zero crossings in most frequency ranges. The waveform scrolls horizontally at zoom levels above 1x using the mouse wheel or trackpad scroll gesture. This approach is implemented entirely in client-side JavaScript using the Canvas 2D API without any external rendering library.

Using the Looper Alongside Other Tools

Before creating a loop, use the Key and BPM Finder to detect the exact tempo of your audio file so you can enter an accurate BPM for grid snapping. If you need to trim or adjust the source file first, the Audio Trimmer lets you isolate a section before bringing it into the looper. For pitch-shifted loops (transposing a loop to a different key without changing tempo), use the Pitch Shifter on your exported loop WAV. The LUFS Loudness Meter can then verify the integrated loudness and true peak of your exported loop before it goes into a sample pack or library.

The AES (Audio Engineering Society) has published guidelines on loop point creation for sample library developers in their AES56 standard on audio loop file formats. The underlying principle is consistent: a seamless loop requires both a correct start-end amplitude match (zero crossing) and a correct spectral match at the join. This tool addresses the amplitude problem automatically and the spectral mismatch through crossfade. For long sustained notes where spectral evolution (e.g., vibrato, filter sweep) creates a mismatch even with crossfade, the correct approach is to find a loop point where the spectral state at the loop end closely resembles the spectral state a few cycles earlier, which is a manual process of listening and refinement.

For a deeper look at how streaming platforms handle audio encoding and why loop quality matters for stems and sync placements, see the AES56 standard documentation on audio loop file formats, and the Web Audio API specification on looping AudioBufferSourceNode for technical detail on how the browser handles the loop point at the sample level.