Запись TypeScript и воспроизведение необработанного звука в формате pcm

Я новичок в TypeScript и всей среде JavaScript в целом. У меня есть небольшой проект, который требует создания приложения браузера с TypeScript (у меня еще нет кода).

Мне нужно записать необработанный звук PCM с микрофона браузера, зарегистрировать его и воспроизвести тот же звук PCM через динамики браузера.

Я изучал возможность использования MediaRecorder для записи и использования простого HTMLAudioElement для воспроизведения, но я не уверен, поддерживают ли они звук в формате RAW. Я также несколько сообщений, в которых упоминается использование AudioContext ScriptProcessorNode для получения необработанного звука, но я понятия не имею, как их воспроизвести.

Мне не нужны готовые решения, но я буду признателен за любые указатели или руководства, которые помогут мне в этом.


typescript web-mediarecorder web-audio-api audiocontext
person abisheksampath    schedule 04.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я работаю над небольшой библиотекой под названием extension-media-recorder, которая позволяет расширить собственный MediaRecorder с настраиваемыми кодировщиками. Кодировщик для проверки концепции, который я создаю, - это кодировщик WAV. Надеюсь, это сработает и для вас.

Я еще не задокументировал библиотеку, поэтому я рад принять ваш вопрос как возможность собрать полный пример использования.

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

(async () => {
    // Get the port a worker which can encode WAV files.
    const port = await connect();
    // Register this port with the MediaRecorder.
    await register(port);
    // Request a MediaStream with an audio track.
    const mediaStream = await navigator.mediaDevices
        .getUserMedia({ audio: true });
    // Create a MediaRecorder instance with the newly obtained MediaStream.
    const mediaRecorder = new MediaRecorder(mediaStream, {
        mimeType: 'audio/wav'
    });

    // Kick off the recording.
    mediaRecorder.start();

    mediaRecorder.addEventListener('dataavailable', ({ data }) => {
        // The data variable now holds a refrence to a Blob with the WAV file.
    });

    // Stop the recording after a second.
    setTimeout(() => mediaRecorder.stop(), 1000);
})();

Я надеюсь, что комментарии действительно объясняют, что делает код. Пожалуйста, дайте мне знать, если это не так.

person chrisguttandin    schedule 05.06.2019