Webm аудио блоб в файл Wav Js

Вопрос или проблема

const url = URL.createObjectURL(recording);
const anchor = document.createElement("a");
var filename="audio.webm";
anchor.download =filename;
anchor.href = url;
anchor.click();
window.URL.revokeObjectURL(url);

const arrayBuffer = await new Response(recording).arrayBuffer();
const blob = new Blob([arrayBuffer], { type: "audio/wav" });

Ответ или решение

Преобразование аудиофайла в формате WebM в WAV может быть непростой задачей, особенно если вы работаете без дополнительных пакетов и библиотек. Однако это возможно с использованием встроенных возможностей JavaScript и веб API. Давайте разберемся, как это сделать шаг за шагом.

1. Получение и обработка блоба WebM

Как вы уже упомянули, у вас есть блоб WebM, полученный из записи аудиопотока. Вам необходимо извлечь данные из этого блоба и конвертировать их в WAV. Для начала мы создадим аудиоконтекст.

2. Создание аудиоконтекста

Аудиоконтекст предоставляет интерфейс для работы с аудиоданными. Вот как его создать:

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

3. Декодирование аудиоданных

Теперь вам нужно декодировать WebM, чтобы получить PCM-данные, которые могут быть преобразованы в WAV:

const arrayBuffer = await new Response(recording).arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

4. Преобразование в WAV

Теперь, когда у вас есть audioBuffer, вам нужно преобразовать его в формат WAV. Для этого мы создадим функцию:

function audioBufferToWav(ab) {
    const numChannels = ab.numberOfChannels;
    const sampleRate = ab.sampleRate;
    const format = 1; // PCM
    const bitDepth = 16;

    const bytesPerSample = bitDepth / 8;
    const blockAlign = numChannels * bytesPerSample;
    const byteLength = ab.length * bytesPerSample;

    const buffer = new ArrayBuffer(44 + byteLength);
    const view = new DataView(buffer);

    // Записываем WAV заголовок
    let offset = 0;

    const writeString = (str) => {
        for (let i = 0; i < str.length; i++) {
            view.setUint8(offset + i, str.charCodeAt(i));
        }
        offset += str.length;
    };

    writeString('RIFF');
    view.setUint32(offset, 36 + byteLength, true);
    offset += 4;
    writeString('WAVE');
    writeString('fmt ');
    view.setUint32(offset, 16, true); // Subchunk1Size
    offset += 4;
    view.setUint16(offset, format, true);
    offset += 2;
    view.setUint16(offset, numChannels, true);
    offset += 2;
    view.setUint32(offset, sampleRate, true);
    offset += 4;
    view.setUint32(offset, sampleRate * blockAlign, true);
    offset += 4;
    view.setUint16(offset, blockAlign, true);
    offset += 2;
    view.setUint16(offset, bitDepth, true);
    offset += 2;
    writeString('data');
    view.setUint32(offset, byteLength, true);
    offset += 4;

    // Записываем аудиоданные
    for (let channel = 0; channel < numChannels; channel++) {
        const channelData = ab.getChannelData(channel);
        for (let i = 0; i < channelData.length; i++) {
            view.setInt16(offset, channelData[i] * 0x7FFF, true);
            offset += 2;
        }
    }

    return new Blob([buffer], { type: 'audio/wav' });
}

5. Сохранение WAV файла

После того как мы получили блоб WAV, мы можем его сохранить данными следующим образом:

const wavBlob = audioBufferToWav(audioBuffer);
const wavUrl = URL.createObjectURL(wavBlob);
const anchor = document.createElement("a");
anchor.download = "audio.wav"; // Укажите имя файла
anchor.href = wavUrl;
anchor.click();
URL.revokeObjectURL(wavUrl);

Заключение

Теперь вы можете успешно преобразовывать аудиофайлы в формате WebM в WAV без необходимости использования npm пакетов. Этот процесс включает в себя создание аудиоконтекста, декодирование данных и преобразование их в нужный формат. Надеюсь, это руководство окажется полезным и поможет вам успешно реализовать вашу задачу.

Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать!