Audio player - multiple tracks synchronized

[christopherdude]

Is there a way that you can make your audio player component "sync" with other audio players? In other words, if I have 3 separate .wav files and they're all the same length, I'd like to play them all at the same time, sync'd to each other (or a word clock in a perfect world). Is that something that could be on the radar, OR is it something that can be done today with this great component?

[fgilde]

This is already possible. And The MudExAudioPlayer inherits from Auralizer (also my package). Here you can see how to connect multiple sources

Please have a Look here : https://auralizeblazor.azurewebsites.net/connect

[christopherdude]

I see that the sources "can" play at the same time, but is there a way to always keep them in sync? For example, if I had drums on one track, and bass guitar on the other track, would I be able to "ensure" that they're sync'd and play them together at the same time in that fashion? This is a wonderful library, by the way, thank you.

[fgilde]

Thank you. I love to hear that.
Ok understand what you want. This isn't possible with my library but in general with Js.

Something like this maybe (pseudo code)

function syncElements(audioElements) {
  let isSyncing = false;
  
  audioElements.forEach(audio => {
    audio.addEventListener('play', () => {
      if (isSyncing) return;
      isSyncing = true;
      const currentTime = audio.currentTime;
      audioElements.forEach(other => {
        if (other !== audio) {
          other.currentTime = currentTime;
          if (other.paused) {
            other.play().catch(err => console.error(err));
          }
        }
      });
      isSyncing = false;
    });
    
    audio.addEventListener('pause', () => {
      if (isSyncing) return;
      isSyncing = true;
      audioElements.forEach(other => {
        if (other !== audio && !other.paused) {
          other.pause();
        }
      });
      isSyncing = false;
    });
    
    audio.addEventListener('seeked', () => {
      if (isSyncing) return;
      isSyncing = true;
      const currentTime = audio.currentTime;
      audioElements.forEach(other => {
        if (other !== audio) {
          other.currentTime = currentTime;
        }
      });
      isSyncing = false;
    });
  });
}

But I think syncing is not the solution you want, because than you can get problems with different length etc...

I think what you want is an own audioContext with your audio's in it.
Than you can connect the stream, or the context or and audioElement with the stream to auralizer.
(Also pseudo code, but should work like this)

const audioElements = [...document.querySelectorAll('audio')];
const audioContext = new AudioContext();
const destination = audioContext.createMediaStreamDestination();

audioElements.forEach(audio => {
  const sourceNode = audioContext.createMediaElementSource(audio);
  sourceNode.connect(destination);
  sourceNode.connect(audioContext.destination);
});

// Combined super stream
const mergedStream = destination.stream;

// Temp audioEl
const mergedAudioElement = document.createElement('audio');
mergedAudioElement.srcObject = mergedStream;
mergedAudioElement.controls = true; 
document.body.appendChild(mergedAudioElement);

Then you can use the temp audio el to connect to Auralizer.

In generall my component can directly work with multiple streams and differentAudio Contexts nut only on js side at this moment.

Thi for example also uses a temporary stream
https://auralizeblazor.azurewebsites.net/multiple

But I didnt have a forwarded API in c# ATM. Maybe I should at it. Not sure.

[christopherdude]

You said, "But I think syncing is not the solution you want, because than you can get problems with different length etc...", but to clarify, YES - all of the mp3 files are exactly the same length. Does that change anything?