Анімований gif зі звуком

- Олександр Тревор (Alexander Trevor),
керівник команди зі створення GIF в CompuServe

Перша в інтернеті гифка зі звуком за посиланням. Треба натиснути на синю кнопку, а потім на ДІФКУ. Плеєр має працювати у всіх сучасних браузерах (тестувався в останньому Firefox і Chrome).

Гифок під катом не буде, а буде процес створення розширення для стандарту, написання конвертера і плеєра.

З 1987 формат GIF пережив всього два істотних зміни:

  1. У 89 році вийшла друга версія формату (названа GIF 89a). Стало можливим вказувати затримку між картинками (декількох картинок в одному файлі було в першому форматі GIF 87a). Сторонні розробники тепер змогли додавати свої власні блоки в файл (Application Extension Block).
  2. У 90 році компанія Netscape додала свій блок, який дозволяв вказувати кількість повторних повторюватися анімація.

Розробка розширення формату

Як було сказано вище, стандарт GIF 89a дозволяє додаткам розміщувати в GIF файлі свої дані. Формат блоку розширення для додатків:

Формат даних (для WAVE фалів - «WAVE»)

Так як розмір блоку контролюється форматом GIF, викинемо з заголовка поле з розміром даних, а в ідентифікатор додатки запишемо «RIFFWAVE». Залишок WAVE файлу запишемо як вкладені GIF блоки.

Блок зі звуком будемо вставляти прямо перед першим блоком із зображенням (насправді можна його вставити в будь-якому місці).

Розробка конвертера

Конвертер на вході приймає GIF і WAVE файли, а на виході видає GIF з RIFFWAVE блоком. Вихідний код можна подивитися подивитися на google code.

Код досить простий, читаємо WAVE файл, створюємо з нього GIF блок. Потім читаємо гіф файл і записуємо все блоки, як тільки знаходимо перший блок з картинкою, перед ним вставляємо блок зі звуком. Найважливіший ділянку коду - конвертація WAVE файлу в GIF блок:

Робимо гифку зі звуком

Робимо анімований гіф:

Отримуємо звук і перевіряємо, що все виглядає (і звучить), як ми запланували:

Конвертуємо в GIF зі звуком

робимо плеєр

  • перетворюємо дані з блоку назад в формат WAVE файлу;
  • конвертуємо отриманий файл в data: URL і передаємо в елемент Audio.

jsgif працює не швидко, а з додаванням звуку став ще повільніше. Так само, щоб отримати дані файлу, плеєр викликає XMLHttpRequest, тому плеєр працює тільки з картинками з одного домену. Але хіба це перешкоди для мистецтва.

Що далі?

Радіти ДІФКУ зі звуком. Можна реалізувати плагін для браузерів, який би дозволяв програвати такі гифки без додаткового XMLHttpRequest, і який можливо буде швидше працювати. Якщо хтось стикався з подібним завданням, буду вдячний за вказівку в який бік дивитися, щоб написати плагін який обробляє певні типи файлів.

Схожі статті