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

HTML5 Web Audio API — вступление

HTML5 Web Audio API — вступление

Здравствуйте, дорогие читатели. Сегодня мы начнем небольшой цикл статей по созданию аудио редактора на HTML5 Web Audio API.

В маю 2015 года я писал дипломную работу в колледже на тему «Обработка аудиоинформации средствами веб-браузера», ну и в ходе написания этой работы был создан простенький аудио-редактор (http://online-audio-redaktor.esy.es/#) построенный на Web Audio API.

Знания мои скромны и собирались по крупицам на тернистом пути, и сейчас я хочу поделиться ими=)

 

Немножко теории Web Audio API

Для начала работы с Web Audio API необходимо создать контекст, он должен быть один, хотя современные браузеры позволяют создавать около 5.

Почему один?

  1. Все модули обработки могут работать только с объектами своего же контекста!
  2. Не все браузеры позволяют создавать больше одного.

Контекст создается функцией AudioContext() , ну и вот код который я использовал.


if (typeof AudioContext !== "undefined") {
ctx = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
ctx = new webkitAudioContext();
} else {
throw new Error('AudioContext not supported. :(');
}
if (typeof AudioContext !== "undefined") {
ctx = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
ctx = new webkitAudioContext();
} else {
throw new Error('AudioContext not supported. :(');
}

Далее следует создать источник аудио, модуль (узел) обработки, точку назначения для всего аудио в контексте ну и соединить все это во едино с помощью метода connect().

Рассмотрим детальнее каждый из этапов.

Источники в Web Audio API

В одном контексте можно создать множество источников как одного, так и разных типов, Источниками могут быть:

  • буфер с загружаемым в него аудио
    AudioContext.createBufferSource()
    Используется для воспроизведения и обработки данных звукового потока, содержащегося в буфере( объект AudioBuffer)
  • HTML тег <audio> или <video>
    AudioContext.createMediaElementSource()
    Создаёт объект MediaElementAudioSourceNode связанный с HTML элементом. Позволяет использовать данные из звукового потока тега <audio> или <video>.
  •  аудио поток ( например, с микрофона).
    AudioContext.createMediaStreamSource()

Далее создаем узлы обработки. Например, усилитель gainNode = AudioContext.createGain() и устанавливаем ему значение 50% от полной громкости gainNode.gain.value = 0.5;
Соеденяем все во едино с помощью метода connect()
Вот что получилось

var source, destination, gainNode,ctx;
if (typeof AudioContext !== "undefined") {
ctx = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
ctx = new webkitAudioContext();
} else {
throw new Error('AudioContext not supported. :(');
}

source = ctx.createMediaElementSource(audio);
destination = ctx.destination;
gainNode = ctx.createGain();
gainNode.gain.value = 0.5;
source.connect(gainNode);
gainNode.connect(destination);

// воспроизводим source.start(0);

Еще советую к прочтению очень интересную статью о Web Audio API http://html5.by/blog/audio/


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