Поскольку вы зацикливаете аудиоклип, нет доступных для использования событий. Однако, если вы использовали 4 отдельных 1-se c клипа, вы можете запланировать запуск каждого из них каждую секунду. Затем вы получите извлеченное событие из каждого клипа, который можно использовать для управления вашей SVG-анимацией.
Однако это означает, что вам придется выполнять свой собственный цикл аудио, постоянно планируя новые клипы каждые 4 се * 1012. *. Будьте уверены, что график следующего раунда до окончания текущего раунда и не используйте onended событие, чтобы запланировать следующий клип. Это будет постепенно дрейфовать со временем, но, возможно, это приемлемо для вашего приложения.
Очень грубый набросок того, как это может работать. Полностью не проверено, но я надеюсь, что это дает основную идею c:
// 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
};
Это базовая c структура. Вам нужно изменить его на l oop. Таким образом, возможно, когда третий клип заканчивается, создайте новый клип [0], чтобы снова клип [2], с новым временем начала, Когда четвертый клип закончится, создайте новый клип [3]. Также обязательно добавьте добавленные события для каждого из этих новых клипов.
Существуют и другие способы, но это довольно просто и делает анимацию всегда синхронизированной со звуком c (с некоторой задержкой из-за обработка событий).