How can I play an audio file at specified times in JavaScript AudioContext ?
const context = new AudioContext();
const source = context.createBufferSource();
const audioBuffer = await fetch('./Sound.wav')
.then(res => res.arrayBuffer())
.then(ArrayBuffer => context.decodeAudioData(ArrayBuffer));
source.buffer = audioBuffer;
source.connect(context.destination);
source.start(1,3,5,7,20,30,40); // I want to play many times this file at these seconds. (Sound.wav length is 1second)
The AudioBufferSourceNode#start() method accepts optionals offset and duration parameters in seconds as its second and third params (the first one being the usual when to start playing).
However you can start such a node only once (even though you can make it loop). So you will have to create a new node every time you want to start playing your audio file. But don't worry, these nodes have an extremely small footprint and won't eat your memory.
(async () => {
const url = "https://upload.wikimedia.org/wikipedia/en/transcoded/d/dc/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg.mp3";
const context = new AudioContext();
const audioBuffer = await fetch(url)
.then(res => res.arrayBuffer())
.then(buffer => context.decodeAudioData(buffer));
const play = (startTime, duration) => {
const source = context.createBufferSource();
source.buffer = audioBuffer;
source.connect(context.destination);
source.start(context.currentTime, startTime, duration);
};
[1, 3, 5, 10, 15, 18].forEach((startTime) => {
const btn = document.createElement("button");
btn.onclick = (evt) => play(startTime, 1);
btn.textContent = "start at " + startTime + "s";
document.body.append(btn);
});
})().catch(console.error)body {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}