AudioWorkletProcessor, воспроизводящий потоковое аудио, зашифрованное звучание

Оба ваших подхода (а и б) не сработают.

Недостающее звено — это разница в тактовой частоте между вашим сервером и вашим клиентом. Это фундаментальная проблема для любого сценария прямой трансляции.

Предположим, что часы вашего клиента идут немного быстрее: Клиент воспроизводит звук слишком быстро, заканчиваются семплы => вы слышите пробел.

Предположим, что часы вашего клиента идут немного медленнее: Клиент воспроизводит звук слишком медленно => в конечном итоге вам придется удалить весь буфер и услышать пробел.

Чтобы решить эту проблему, вам необходимо создать входной буфер на стороне клиента. Первоначально ваш клиент должен дождаться, пока буфер заполнится на 50%, а затем начать воспроизведение. Если кажется, что буфер почти пуст ==> вам придется замедлить скорость воспроизведения. Если похоже, что буфер достигает 100%, вам придется увеличить скорость воспроизведения. Обычно скорость воспроизведения меняется очень незначительно, поскольку вы просто компенсируете разницу в тактовой частоте.

Вы можете реализовать все это самостоятельно. Или вы можете использовать фреймворк, который сделает это за вас. Например WebRTC: https://webrtc.org/getting-started/peer-connections

Каждый кадр MP3 начинается с 12 бит, равных единице. Если вы обрежете MP3 именно по этим границам, можно будет декодировать части с помощью decodeAudioData(), поскольку они сами по себе представляют собой действительный файл.

Проблема в том, что любой из этих кадров может содержать данные, которые уже принадлежат следующему кадру. При обрезке MP3 по границе кадра эта информация теряется, поскольку decodeAudioData() не отслеживает предыдущие вызовы. Вам нужно будет сохранить небольшое перекрытие при декодировании частей, чтобы дважды декодировать кадры на границе. Аудиоданные, созданные этими дубликатами кадров, затем необходимо удалить из AudioBuffer, созданных decodeAudioData(), при их сшивании.

Представьте, что у вас есть переменная с именем arrayBuffer, которая содержит содержимое MP3. Затем вы можете собрать все его кадры следующим образом:

const uint8Array = new Uint8Array(arrayBuffer);
const frames = [];

for (let i = 0; i < uint8Array.length - 1; i += 1) {
  if (uint8Array[i] === 0xff && (uint8Array[i + 1] & 0xf0) === 0xf0) {
    frames.push(i);
  }
}

Затем вы можете перебирать кадры, чтобы декодировать их в группах с перекрытием.

const offlineAudioContext = new OfflineAudioContext({
  length: 1,
  // This should be the sampleRate of the MP3.
  sampleRate: 44100
});

const cache = [0, 0];
const channelDatas = [];
const framesPerInterval = 50;

let begin = 0;
let end = 0;

for (let i = 0; i < frames.length - framesPerInterval; i += framesPerInterval) {
  const audioBuffer = await offlineAudioContext.decodeAudioData(
    arrayBuffer.slice(
      frames[Math.max(0, i - framesPerInterval)],
      frames[i + framesPerInterval]
    )
  );

  const intervalLength = audioBuffer.length - cache[1];

  begin = end - cache[0];
  end = cache[1] + Math.round(intervalLength / 2);

  // This needs to be done for every channel.
  channelDatas.push(audioBuffer.getChannelData(0).slice(begin, end));

  cache[0] = cache[1];
  cache[1] = intervalLength;
}

В итоге channelDatas должно содержать образцы без каких-либо пробелов.

Но вы также можете использовать AudioDecoder для декодирования звука. Это API с отслеживанием состояния для декодирования аудиофайлов по частям. На данный момент он доступен только в Chrome, но над его реализацией в Firefox и Safari уже работают.