Baseline Widely available
The loop
property of the AudioBufferSourceNode
interface is a Boolean indicating if the audio asset must be replayed when the end of the AudioBuffer
is reached.
The loop
property's default value is false
.
A Boolean which is true
if looping is enabled; otherwise, the value is false
.
When looping is enabled, the sound begins playing at the time specified as the start point when start()
is called. When the time specified by the loopEnd
property is reached, playback continues at the time specified by loopStart
loop
In this example, when the user presses "Play", we load an audio track, decode it, and put it into an AudioBufferSourceNode
.
The example then sets the loop
property to true
, so the track loops, and plays the track.
The user can set the loopStart
and loopEnd
properties using range controls.
Note: You can run the full example live (or view 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;
});
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4