"Особенности записи звука нативными технологиями...

Особенности записи звука нативными технологиями браузеров

Фёдор Котов, руководитель веб-разработки Penxy

1

Стартап, в команде 3 человека, зарабатываем

Инвестор из России, продукт с фокусом на США

О нас

2

О бизнесе

3

✓ Эксперты озвучивают слайды

✓ Делятся Говорящими Слайдами с другими людьми

4

WebRTC5

Темна, терниста и запутана:- несколько разных стандартов- _webkit_moz_ms все сделали по-разному

История WebRTC

6

WebRTC - возможностиПозволяет соединить несколько клиентов напрямую и передавать между ними данные.

7

- peer-to-peer connections- peer-to-peer Data API- SIP, stats, etc- Media Stream API Extensions

WebRTC - содержание

8

- Видеоконференции- Передача файлов- Доступ к экрану- Игры- Редактирование звука в браузере

WebRTC - сферы применения

9

Без плагинов!

Почему мы используем WebRTC

➔ Нужен только браузер!

➔ Не нужны Flash или Java

➔ Клиенты довольны

★ Полный Javascript вашего приложения.

10

Запись аудио в браузере

11

12

Нажал – работает

13

Нажал – работает

14

Нажал – работает

Но обо всем по порядку

15

WebRTC API Web Audio API

Media Stream APIмикрофонкамера

16

Source Processing Destination

Поток звука

17

Source Processing Destination

Поток звука

- Audio files (+ XHR, etc)- <audio>, <video> tags- MediaStream- (AudioMediaStreamTrack)

18

Source Processing Destination

Поток звука

- Audio files (+ XHR, etc)- <audio>, <video> tags- MediaStream- (AudioMediaStreamTrack)

- Audio effects- Spliting, Merging- Spatialization- Compressing- etc

19

Source Processing Destination

Поток звука

- Audio files (+ XHR, etc)- <audio>, <video> tags- MediaStream- (AudioMediaStreamTrack)

- Audio effects- Spliting, Merging- Spatialization- Compressing- etc

- Device (speakers)- MediaStream- “Record” audio node- XHR, Websockets,

etc

20

Destination Buffer, file, etc Server

Передача аудио на сервер

21

Destination Buffer, file, etc Server

Передача аудио на сервер

~ 170 KiB/s~ 600 MiB в час~ 1 GiB RAM в час

WAV 44.1Kz, 16 bit depth, stereo

22

❏ Запись занимает много места на диске

❏ Запись аудио больше часа невозможна (не в Firefox)

Проблема

23

- mono audio- ухудшить качество- записывать кусочками - ?

Как уменьшить размер?

24

Сжимать на клиенте

Решение

на лету

25

Какой формат выбрать?

26

OGG MP3

Аудио форматы

27

Firefox

RecordRTC из набора WebRTC experiments

Firefox, Chrome, Safari

LAME, скомпилированную emscripten

★ LAME - это просто!

➔ Initialize - на старте записи

➔ Record - кодируем каждый аудио-буфер

➔ Finish - собираем mp3-файл

28

Пишем Recorder

MP3 recorder, init

29

mp3codec = Lame.init();

Lame.set_mode(mp3codec, 3); // monoLame.set_num_channels(mp3codec, 1);Lame.set_out_samplerate(mp3codec, 44100);Lame.set_in_samplerate(mp3codec, 44100);Lame.set_bitrate(mp3codec, 128);

Lame.init_params(mp3codec);

MP3 recorder, record

30

audioNode.onaudioprocess = function(e) { var channelLeft;

channelLeft = e.inputBuffer.getChannelData(0);

encoderMp3Worker.postMessage({ command: 'encode', buf: channelLeft });};

MP3 recorder, encode

31

var mp3data = Lame.encode_buffer_ieee_float( mp3codec,

e.data.buf, e.data.buf);

recBuffers.push(mp3data.data);recLength += mp3data.data.length;

MP3 recorder, finish

32

var mp3data = Lame.encode_flush(mp3codec);

recBuffers.push(mp3data.data);recLength += mp3data.data.length;

var buffer = mergeBuffers(recBuffers, recLength);var data = new Uint8Array(buffer);var audioBlob = new Blob([data], { type: "audio/mp3"});// send audioBlob somewhere

~ 10 KiB/s

~ 30 MiB/час

~ 40 MiB RAM/час

★ ogg - даже лучше

Результат

33

~ 170 KiB/s

~ 600 MiB/час

~ 1 Gib RAM/час

Было Стало

Теперь, можно записывать длинные аудио-файлы!

34

➔ использовать Audio Web Workers!

➔ сохранять файлы в локальное хранилище

или отдавать юзеру

➔ стримить на сервер или отдавать

кусочками

Советы

35

Фёдор Котов

Руководитель веб-разработкиinfo@penxy.compenxy.com

36

http://bit.ly/moscow-js-audio