Embed Size (px)
DESCRIPTION
Я расскажу о том, как превратить браузер в мультимедийный нотный стан. Какие решения есть на сегодняшний день для работы со звуком в браузере, что было опробовано и отвергнуто и к чему мы пришли в конечном итоге.
Citation preview
Мультимедиа комбайн в браузере
Марат БектимировTotalLicks
www.totallicks.com@mbektimirov
Как извлечь звук? Технологии
Chrome Web Audio
HTML5 Audio
FireFox Audio Data API≠
Flash
Java
Как извлечь звук? Технологии
Chrome Web Audio (iOS 6)
HTML5 Audio
FireFox Audio Data API≠
Flash
Java
High level
Low level
Один раз услышать
Give me a beat!
Задача
● Проигрывать табулатуру● Произвольно менять темп● Управлять дорожками независимо (mixer)● Делать это быстро● Минимальные затраты по трафику
Подходы
*.GP* MIDIСинтез на сервере (ogg, статика)
Синтез на клиенте (real time)
По трекам По нотам
+ SF2
Синтез по трекам
● Основная задача - вытащить MIDI из gp файла● Генерация треков с помощью TuxGuitar (делает все
сразу) или FluidSynth и SoundFont● Для каждого трека генерируется несколько базовых
темпов● На клиенте дорожки синхронизируются через HTML5
Audio или Flash
Синтез по трекам
Плюсы:● самое очевидное решение● есть пример успешного проекта с таким подходом
Минусы:● для каждого gp файла необходимо генерировать
треки с разными темпами (либо менять темп на голом mp3 с помощью FFT)
● нагрузка на трафик● никакой гибкости в управлении аудио потоком● невозможно правильно синхронизировать дорожки в
HTML5
Синтез по нотам
● Вытаскивается MIDI из gp файла● Для каждого инструмента генерируется js файл со
всеми нотами в base64 ● На клиенте используется доработанный MIDI.js и
jasmid для проигрывания MIDI файла
Синтез по нотам
Плюсы:● Ноты генерируются один раз для одного саунд-
банка (SF2)● Можно менять темп● MIDI.js умеет менять способ проигрывания нот
(HTML5, Web Audio, flash, java)
Минусы:● Ужасная работа в HTML5 с многодорожечными MIDI● Долгое ожидание для загрузки всех нот
Синтез на клиенте
● Web Audio, FF Audio Data API или Flash● Первые два поддерживаются только двумя
браузерами
Что есть у Flash:● Tonfall● Sion● + много чего еще, но нет полноценной работы с MIDI
Синтез на клиенте
Что делать, если никто ничего не умеет? Взять там, где это работает уже давно и
успешно
Синтез на клиенте
+ Adobe Alchemy
Adobe Alchemy
● Компилирование C/C++ в LLVM, а затем в байт код ActionScript Virtual Machine (AVM2)
● Появилось больше возможностей для работы с MIDI● Мы можем выставить любой темп, такого нет у
конкурентов● FluidSynth - открытый проект, следовательно, нет
предела совершенству
Спасибо за внимание!Вопросы?
www.totallicks.com@mbektimirov
