AudioBufferSourceNode: loop-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die loop-Eigenschaft des AudioBufferSourceNode-Interfaces ist ein Boolean, der angibt, ob das Audio-Asset erneut abgespielt werden muss, wenn das Ende des AudioBuffer erreicht ist.
Der Standardwert der loop-Eigenschaft ist false.
Wert
Ein Boolean, der true ist, wenn das Looping aktiviert ist; andernfalls ist der Wert false.
Wenn das Looping aktiviert ist, beginnt der Ton zu dem Zeitpunkt zu spielen, der als Startpunkt angegeben wurde, als start() aufgerufen wurde. Wenn die durch die loopEnd-Eigenschaft angegebene Zeit erreicht ist, setzt die Wiedergabe am durch loopStart angegebenen Zeitpunkt fort.
Beispiele
loop setzen
In diesem Beispiel, wenn der Nutzer "Play" drückt, laden wir einen Audio-Track, dekodieren ihn und legen ihn in einen AudioBufferSourceNode.
Das Beispiel setzt dann die loop-Eigenschaft auf true, sodass der Track in Schleife läuft und spielt den Track ab.
Der Nutzer kann die loopStart- und loopEnd-Eigenschaften mit Range-Control-Elementen einstellen.
Hinweis: Sie können das vollständige Beispiel live ausführen (oder den Quellcode anzeigen.)
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;
});
Spezifikationen
| Specification |
|---|
| Web Audio API # dom-audiobuffersourcenode-loop |
Browser-Kompatibilität
Loading…