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

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

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

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


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

20065[b]СПКЯ стало СПМЯ: почему переименование болезни, затрагивающей миллионы женщин, заняло... 20064[b]Почему великая пирамида Гизы пережила все землетрясения за 4500 лет[/b] 20063[b]Генетика Homo erectus: что зубная эмаль рассказала о наших предках[/b] 20062[b]Кости в бухте эребус: что кости моряков Франклина рассказывают спустя полтора века[/b] 20061[b]Крупнейший плавучий ветрогенератор в мире: Китай испытывает установку у берегов... 20060[b]Карие глаза младенца стали индиго после лечения от COVID-19[/b] 20058[b]Почему серебряная чаша с Афиной пролежала в немецком лесу две тысячи лет?[/b] 20057[b]Дыра в атмосфере солнца: вспышка достигла пика и может зажечь полярное сияние[/b] 20056[b]Динго возрастом 950 лет: кто и зачем кормил могилу животного сотни лет?[/b] 20055[b]Томоэ гозэн: женщина-самурай, которая существовала на самом деле[/b] 20054[b]Что видели астронавты «Аполлона-12» над лунным горизонтом?[/b] 20053[b]Восковой блокнот на латыни и шёлковая туалетная бумага: кто посещал средневековый... 20052[b]Хантавирус на борту: 41 человек под наблюдением после рейса MV Hondius[/b]
Ссылка