Новогодняя ёлка в QR-коде с музыкой

В статье описан способ создания анимированной новогодней ёлки, снеговиков и падающих снежинок, умещающихся в QR-код. Используя dataUrl, html, css, js и Unicode символы, автор достиг компактности кода, позволяющего поместить в QR-код анимированное изображение и музыку.
Новогодняя ёлка в QR-коде с музыкой
Изображение носит иллюстративный характер

Для отображения ёлки, подарков, снеговиков и текста "2025" используются символы Unicode, а размер шрифта динамически подстраивается под ширину и высоту экрана, чтобы ёлка не вылезала за границы. При помощи js, подарки и снеговики генерируются в цикле и добавляются на страницу. Снежинки реализованы через setInterval, они обновляются каждые 20 мс, имитируя падение с псевдослучайной траекторией.

Для музыкального сопровождения был взят midi файл мелодии "Carol of the Bells", преобразованный в компактную строку. Звук создается с использованием Web Audio API, где на основе строки данных создается массив семплов, добавляются гармоники для более натурального звучания и проигрывается при клике пользователя на ёлку. При этом, из-за ограничений браузера, музыку можно проиграть только после взаимодействия пользователя со страницей.


Новое на сайте

20204Дыра в Argo CD: почему 18 месяцев без патча — это катастрофа? 20203WhatsApp запускает имена пользователей: теперь можно общаться без раскрытия номера... 20202Почему США пришлось заморозить сильнейший ИИ Anthropic — и чего это стоило отрасли? 20201Ousaban: бразильский банковский троян, который охотится на клиентов испанских и... 20200Три новые группировки вымогателей: Citrix Bleed 2, уязвимые драйверы и атаки через... 20198Тупиковый майнинг биткоина тратит столько энергии, сколько вырабатывают все гэс Швейцарии... 20197DuneSlide: как два скрытых промпта позволяли захватить машину разработчика через Cursor 20196Уязвимость в Progress Kemp LoadMaster: кто уже пытается взломать ваш балансировщик? 20194Критическая уязвимость в SimpleHelp позволяет красть данные из облаков, кошельков и... 20193Ультрабыстрые лазеры поместились на чип: как журналистика о науке работает без самой науки 20192Почему Adobe выпускает патчи дважды в месяц и что скрывается за семью уязвимостями с... 20191Два миллиона домашних устройств работали прокси-сетью — и никто из владельцев об этом не...
Ссылка