Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12

Мультимедиа комбайн в браузере

Марат БектимировTotalLicks

www.totallicks.com@mbektimirov

support@totallicks.com

Как извлечь звук? Технологии

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

support@totallicks.com