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

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

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

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


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

19817В Луксоре нашли стелу с римским императором в образе фараона 19816Экипаж Artemis II о моменте, когда земля исчезла за луной 19815Почему луна выглядит по-разному в разных точках земли? 19814Adobe экстренно закрыла опасную дыру в Acrobat Reader, которую хакеры использовали с... 19813Метеорный поток, рождённый из умирающего астероида 19812Когда робот пишет за тебя прощальную смс 19811Что общего у лунной миссии, толстого попугая, загадочной плащаницы и лекарства от диабета? 19810Какие снимки Artemis II уже стали иконами лунной программы? 19809Кто на самом деле хочет сладкого — вы или ваши бактерии? 19808Как рекламные данные 500 миллионов телефонов оказались в руках спецслужб? 19807Экипаж Artemis II вернулся на землю после десяти дней в космосе 19806Зелёная и коричневая луна: почему геологи Artemis II уже не могут усидеть на месте 19805Эксперты уверены в теплозащитном щите Artemis II, несмотря на проблемы предшественника 19804Выжить внутри торнадо: каково это — когда тебя засасывает в воронку 19803Аляскинские косатки-охотники на млекопитающих замечены у берегов Сиэтла
Ссылка