Web Audio API 循环与 SVG 动画同步

Question

I have a simple 4 second audio clip that clicks once per second. I have an SVG image with 4 circles. I'd like to be able to loop the audio indefinitely and have the circles show/hide every second in sync with the audio. So...

0 seconds, show just the red circle
1 second, show just the green circle
2 seconds, show just the yellow circle
3 seconds, show just the blue circle  (audio loops to the beggining, time is reset to 0) 
0 seconds, show just the red circle
etc...

Everything is working except for I don't know how to capture the timing of the loop. (See below in the javascript where it says "some event listener()"). Any ideas?

<button id='go'>Go</button>      
<button id='stop'>Stop</button>      
<br/><br/> 
<svg width='500' height='100'>
<rect width="250" height="100" style="fill:Tan;stroke-width:3;stroke:rgb(0,0,0)" />
  <g id='circle1'><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></g> 
  <g id='circle2'><circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="green" /></g> 
  <g id='circle3'><circle cx="150" cy="50" r="40" stroke="black" stroke-width="3" fill="yellow" /></g> 
  <g id='circle4'><circle cx="200" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" /></g> 
</svg>  

var actx = new (AudioContext || webkitAudioContext)(),
    src = "https://smantei.s3-us-west-2.amazonaws.com/Click.wav",
    audioData, srcNode;  

fetch(src, {mode: "cors"}).then(function(resp) {return resp.arrayBuffer()}).then(decode);

function decode(buffer) {
  actx.decodeAudioData(buffer, playLoop);
}

function playLoop(abuffer) {
  if (!audioData) audioData = abuffer;  
  srcNode = actx.createBufferSource();  
  srcNode.buffer = abuffer;             
  srcNode.connect(actx.destination);    
  srcNode.loop = true;                  
  srcNode.start();                      
}

document.querySelector("#go").onclick = function() {
  playLoop(audioData);  
};

document.querySelector("#stop").onclick = function() {
  srcNode.stop();
};

/*
some event listener() {
  if (time >= 0 && time < 1.0) {
    document.querySelector("#circle1").style.display = 'block';
    document.querySelector("#circle2").style.display = 'none';
    document.querySelector("#circle3").style.display = 'none';
    document.querySelector("#circle4").style.display = 'none';
  }
  if (time >= 1.0 && time < 2.0) {
    document.querySelector("#circle1").style.display = 'none';
    document.querySelector("#circle2").style.display = 'block';
    document.querySelector("#circle3").style.display = 'none';
    document.querySelector("#circle4").style.display = 'none';
  }
  if (time >= 2.0 && time < 3.0) {
    document.querySelector("#circle1").style.display = 'none';
    document.querySelector("#circle2").style.display = 'none';
    document.querySelector("#circle3").style.display = 'block';
    document.querySelector("#circle4").style.display = 'none';
  }
  if (time >= 3.0 && time < 4.0) {
    document.querySelector("#circle1").style.display = 'none';
    document.querySelector("#circle2").style.display = 'none';
    document.querySelector("#circle3").style.display = 'none';
    document.querySelector("#circle4").style.display = 'block';
  }  
}
*/

Answer 1

Because you are looping the audio clip, there are no events available to use. However, if you used 4 separate 1-sec clips, you can schedule each one to start every second. Then you would get an onended event from each clip that could be used to drive your SVG animation.

However, this means you'll have to do your own audio looping by constantly scheduling new clips every 4 sec. Be sure the schedule the next round before the current round ends and don't use the onended event to schedule the next clip. This will slowly drift over time, but maybe that is acceptable for you application.

A very rough sketch of how it might work. Completely untested, but I hope it gives the basic idea:

// Clip is the 4 sec audio clip.
// context is the audioContext
clip = new Array(4);
// Create 4 clips using the same buffer
for (let k = 0; k < clip.length; ++k) {
  clip[k] = new AudioBufferSourceNode(context, {buffer: clip};
  clip[0].connect(context.destiantion);
}

let now = context.currentTime;
// Play out each 1 sec part of the clip consecutively, playing out
// the whole buffer 1 sec at a time.
clip[0].start(now, 0, 1);
clip[1].start(now + 1, 1, 1);
clip[2].start(now + 2, 2, 1);
clip[3].start(now + 3, 3, 1);

clip[0].onended = () => {
  // SVG when first clip ends
};
clip[1].onended = () => {
  // SVG when second clip ends
};
clip[2].onended = () => {
  // SVG when third clip ends
};
clip[3].onended = () => {
  // SVG when fourth clip ends
};

This is the basic structure. You'll need to modify it to loop. So perhaps when the third clip ends, create new clip[0] to clip[2] again, with new start times, When the fourth clip ends, create a new clip[3]. Also be sure to add onended events for each of these new clips.

There are other ways, but this is relateively straightforward and makes the animation always stay in sync with the audio (with some lag due to the event handling).