Марат Бектимиров - totallicks - быть музыкантом! | happydev'12
DESCRIPTION
Я расскажу о том, как превратить браузер в мультимедийный нотный стан. Какие решения есть на сегодняшний день для работы со звуком в браузере, что было опробовано и отвергнуто и к чему мы пришли в конечном итоге.TRANSCRIPT
![Page 1: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/1.jpg)
Мультимедиа комбайн в браузере
Марат БектимировTotalLicks
www.totallicks.com@mbektimirov
![Page 2: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/2.jpg)
![Page 3: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/3.jpg)
Как извлечь звук? Технологии
Chrome Web Audio
HTML5 Audio
FireFox Audio Data API≠
Flash
Java
![Page 4: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/4.jpg)
Как извлечь звук? Технологии
Chrome Web Audio (iOS 6)
HTML5 Audio
FireFox Audio Data API≠
Flash
Java
High level
Low level
![Page 5: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/5.jpg)
Один раз услышать
Give me a beat!
![Page 6: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/6.jpg)
Задача
● Проигрывать табулатуру● Произвольно менять темп● Управлять дорожками независимо (mixer)● Делать это быстро● Минимальные затраты по трафику
![Page 7: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/7.jpg)
Подходы
*.GP* MIDIСинтез на сервере (ogg, статика)
Синтез на клиенте (real time)
По трекам По нотам
+ SF2
![Page 8: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/8.jpg)
Синтез по трекам
● Основная задача - вытащить MIDI из gp файла● Генерация треков с помощью TuxGuitar (делает все
сразу) или FluidSynth и SoundFont● Для каждого трека генерируется несколько базовых
темпов● На клиенте дорожки синхронизируются через HTML5
Audio или Flash
![Page 9: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/9.jpg)
Синтез по трекам
Плюсы:● самое очевидное решение● есть пример успешного проекта с таким подходом
Минусы:● для каждого gp файла необходимо генерировать
треки с разными темпами (либо менять темп на голом mp3 с помощью FFT)
● нагрузка на трафик● никакой гибкости в управлении аудио потоком● невозможно правильно синхронизировать дорожки в
HTML5
![Page 10: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/10.jpg)
Синтез по нотам
● Вытаскивается MIDI из gp файла● Для каждого инструмента генерируется js файл со
всеми нотами в base64 ● На клиенте используется доработанный MIDI.js и
jasmid для проигрывания MIDI файла
![Page 11: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/11.jpg)
Синтез по нотам
Плюсы:● Ноты генерируются один раз для одного саунд-
банка (SF2)● Можно менять темп● MIDI.js умеет менять способ проигрывания нот
(HTML5, Web Audio, flash, java)
Минусы:● Ужасная работа в HTML5 с многодорожечными MIDI● Долгое ожидание для загрузки всех нот
![Page 12: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/12.jpg)
Синтез на клиенте
● Web Audio, FF Audio Data API или Flash● Первые два поддерживаются только двумя
браузерами
Что есть у Flash:● Tonfall● Sion● + много чего еще, но нет полноценной работы с MIDI
![Page 13: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/13.jpg)
Синтез на клиенте
Что делать, если никто ничего не умеет? Взять там, где это работает уже давно и
успешно
![Page 14: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/14.jpg)
Синтез на клиенте
+ Adobe Alchemy
![Page 15: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/15.jpg)
Adobe Alchemy
● Компилирование C/C++ в LLVM, а затем в байт код ActionScript Virtual Machine (AVM2)
● Появилось больше возможностей для работы с MIDI● Мы можем выставить любой темп, такого нет у
конкурентов● FluidSynth - открытый проект, следовательно, нет
предела совершенству
![Page 16: Марат Бектимиров - TotalLicks - быть музыкантом! | HappyDev'12](https://reader030.vdocuments.pub/reader030/viewer/2022020122/5480439bb4af9fbe158b5dfe/html5/thumbnails/16.jpg)
Спасибо за внимание!Вопросы?
www.totallicks.com@mbektimirov