Web Audio API - запись звука с микрофона онлайн

Урок 6. Web Audio API — запись звука с микрофона онлайн

Привет, сегодня поговорим о записи звука сгенерированого или измененного с помощью микрофона (или другого узла) Web audio API, для этого будем использовать библиотеку  recorder.js, она распространяется бесплатно и ее автором является Matt Diamond. Скачать ее можно на GitHub и вот вам ссылка на ее скачивание , так же тат вы найдете краткую инструкцию по использованию библиотеки для записи звука с Web audio API.

Библиотека позволяет записывать звук с любого модуля веб аудио апи.  Ниже я приведу переведенную документацию этой библиотеки.

Стоит так же упомянуть о статье посвященной работе с микрофоном онлайн с помощью Web Audio API, используя код приведенный в ней и библиотеку recorder.js вы сможете сделать простенький онлайн микрофон с наложением различных эффектов.

 

Инструкция по использованию библиотеки для записи потока с

Веб аудио АПИ

Синтаксис

Конструктор

var rec = new Recorder(source [, config]) -Создает экземпляр рекордера.
source - Узел, выход которого вы хотите, чтобы захватить
config - (опционально) Объект конфигурации (см раздел конфигурации ниже)

Конфигурация рекордера

workerPath — Путь к recorder.js рабочий сценарий. По умолчанию ‘JS / recorderjs / recorderWorker.js »
bufferLen — Длина буфера, что внутренний JavaScriptNode использует для захвата звука. Может быть изменен, если возникли проблемы с производительностью. По умолчанию 4096 байт.
callback — Обратный вызов по умолчанию, которые будут использоваться с exportWAV.
Тype — тип Blob порожденный exportWAV. По умолчанию ‘audio / WAV.

rec.configure(config) -задает параметры конфигурации.

Методы экземпляра рекордера (диктофона)

rec.record () — начать запись
rec.stop () — остановить запись

rec.clear () — очистить буфер записи

rec.exportWAV([callback][, type]) —  создаст объект Blob, содержащий запись в формате WAV. callback будет вызываться с Blob в качестве единственного аргумента. Если обратный вызов не указан, по умолчанию будет использоваться каллбек указанный в конфигурации библиотеки. Кроме того вы можете указать тип Blob, который будет возвращен (по умолчанию WAV).

rec.getBuffer([callback])  — передаст в callback-функцию  буффер с записью в виде двух Float32Arrays, для отдельных левого и правого каналов.

Рассмотрим такую callback-функцию, которая воспроизводит стерео запись из буфера.

function getBufferCallback( buffers ) {
var newSource = audioContext.createBufferSource();
var newBuffer = audioContext.createBuffer( 2, buffers[0].length, audioContext.sampleRate );
newBuffer.getChannelData(0).set(buffers[0]);
newBuffer.getChannelData(1).set(buffers[1]);
newSource.buffer = newBuffer;

newSource.connect( audioContext.destination );
newSource.start(0);
}

 

Перейдем от сухой теории к практике

Я просто приведу код скрипта который осуществляет запись с указанного узла Web Audio API и выводит ссылку для скачивания записи.

function startrecord()
{
startUserMedia();
}

function startUserMedia()
{
recorder = new Recorder( microfonesource);
recorder && recorder.record();}

function stoprecord()
{
recorder && recorder.stop();
alert(‘Stopped recording.’);
recorder && recorder.exportWAV(function(blob) {
var url = URL.createObjectURL(blob);
var li = document.createElement(‘li’);
var au = document.createElement(‘audio’);
var hf = document.createElement(‘a’);
au.controls = true;
au.src = url;
hf.href = url;
hf.download = new Date().toISOString() + ‘.wav’;
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
recordingslist.appendChild(li);
});
}

microfonesource — это и есть узел данные с которого и будут записаны

Вот и все. Не забываем ставить лайки под статьей и делиться в соц сетях с друзьями ссылочкой))


2 thoughts on “Урок 6. Web Audio API — запись звука с микрофона онлайн

  1. Эмин 23.12.2016 at 15:56

    а где же пятый урок?

    • Андрей Деревянко 26.12.2016 at 04:41

      Извините. Удалил его. Он уже не был актуален

Добавить комментарий