AudioBufferSourceNode: loopEnd property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheloopEnd property of theAudioBufferSourceNodeinterface specifies is a floating point number specifying, in seconds, at what offsetinto playing theAudioBuffer playback should loop back to the timeindicated by theloopStart property.This is only used if theloop property istrue.

Value

A floating-point number indicating the offset, in seconds, into the audio buffer atwhich each loop will loop return to the beginning of the loop (that is, the current playtime gets reset toAudioBufferSourceNode.loopStart). This property isonly used if theloop property istrue.

The default value is 0.

Examples

Setting`loopEnd`

In this example, when the user presses "Play", we load an audio track, decode it, and put it into anAudioBufferSourceNode.

The example then sets theloop property totrue, so the track loops, and plays the track.

The user can set theloopStart andloopEnd properties usingrange controls.

Note:You canrun the full example live (orview the source.)

let audioCtx;let buffer;let source;const play = document.getElementById("play");const stop = document.getElementById("stop");const loopstartControl = document.getElementById("loopstart-control");const loopstartValue = document.getElementById("loopstart-value");const loopendControl = document.getElementById("loopend-control");const loopendValue = document.getElementById("loopend-value");async function loadAudio() {  try {    // Load an audio file    const response = await fetch("rnb-lofi-melody-loop.wav");    // Decode it    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());    const max = Math.floor(buffer.duration);    loopstartControl.setAttribute("max", max);    loopendControl.setAttribute("max", max);  } catch (err) {    console.error(`Unable to fetch the audio file. Error: ${err.message}`);  }}play.addEventListener("click", async () => {  if (!audioCtx) {    audioCtx = new AudioContext();    await loadAudio();  }  source = audioCtx.createBufferSource();  source.buffer = buffer;  source.connect(audioCtx.destination);  source.loop = true;  source.loopStart = loopstartControl.value;  source.loopEnd = loopendControl.value;  source.start();  play.disabled = true;  stop.disabled = false;  loopstartControl.disabled = false;  loopendControl.disabled = false;});stop.addEventListener("click", () => {  source.stop();  play.disabled = false;  stop.disabled = true;  loopstartControl.disabled = true;  loopendControl.disabled = true;});loopstartControl.addEventListener("input", () => {  source.loopStart = loopstartControl.value;  loopstartValue.textContent = loopstartControl.value;});loopendControl.addEventListener("input", () => {  source.loopEnd = loopendControl.value;  loopendValue.textContent = loopendControl.value;});