¿Cómo puedo reproducir un archivo de audio en momentos específicos en 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)El método AudioBufferSourceNode#start() acepta parámetros opcionales de desplazamiento y duración en segundos como su segundo y tercer parámetro (siendo el primero el habitual cuando se empieza a reproducir).
Sin embargo, puede iniciar dicho nodo solo una vez (aunque puede hacer que se repita). Por lo tanto, deberá crear un nuevo nodo cada vez que desee comenzar a reproducir su archivo de audio. Pero no se preocupe, estos nodos ocupan un espacio extremadamente pequeño y no se comerán su memoria.
(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; }