Воспроизведение MP3 Stream в JavaScript ⇐ Html

[Anonymous]

У меня есть конечная точка поста, которая возвращает поток MP3, и я хочу сыграть его в JavaScript, используя API Native Browser Fetch. Цель состоит в том, чтобы реализовать решение поперечного браузера, но до сих пор ничего не работает в Firefox. Поскольку мне нужно использовать конечную точку после, использование нового аудио (URL) не является вариантом. Чтобы это было проще в воспроизведении, я буду использовать конечную точку GET для случайной радиостанции, которая транслирует MP3, но проблема остается прежней.
То, что я пробовал:
Использование MediaSource :
:

const playMP3Stream = async () => {
const audio = new Audio();
const mediaSource = new MediaSource();
audio.src = URL.createObjectURL(mediaSource);

mediaSource.onsourceopen = async () => {
const sourceBuffer = mediaSource.addSourceBuffer("audio/mpeg");

const response = await fetch("http://sc6.radiocaroline.net:8040/mp3");

if (!response.ok) {
return;
}

const reader = response.body?.getReader();

if (!reader) return;

while (mediaSource.readyState === "open") {
const { value, done } = await reader.read();

if (done) {
mediaSource.endOfStream();
break;
}
sourceBuffer.appendBuffer(value);
}
};

await audio.play();
};

Использование AudioContext :

Код: Выделить всё

const playMP3Stream = async () => {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

const response = await fetch('http://sc6.radiocaroline.net:8040/mp3');
const reader = response.body.getReader();

let streamBuffer = new Uint8Array();
let startTime = audioContext.currentTime;

async function processChunk() {
const { done, value } = await reader.read();

if (done) {
return;
}

try {
const newBuffer = new Uint8Array(streamBuffer.length + value.length);
newBuffer.set(streamBuffer);
newBuffer.set(value, streamBuffer.length);
streamBuffer = newBuffer;

if (streamBuffer.length > 10000) {
const audioBuffer = await audioContext.decodeAudioData(
streamBuffer.buffer,
);
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start(startTime);
startTime += audioBuffer.duration;

streamBuffer = new Uint8Array();
}
} catch (error) {
console.error('Error decoding audio chunk:', error);
}

processChunk();
}

processChunk();
}
< /code>
MediaSource

хорошо работает в браузерах Chromium, но, к сожалению, тип «Audio/Mpeg» MIME не поддерживается в Firefox. Подход AudioContext работает в некоторой степени, но между кусками есть пробелы, и он все еще функционирует только в браузерах Chromium. Я не уверен, что это особенно сложно, или я просто борюсь с реализацией, но я не могу понять, как играть в MP3 -аудиоудий в Firefox.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... javascript