{"id":443955,"date":"2025-01-02T21:00:49","date_gmt":"2025-01-02T21:00:49","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=443955"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2025-01-02T21:00:49","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=443955","title":{"rendered":"\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0451\u043b\u043a\u0443, \u0435\u0441\u043b\u0438 \u0442\u044b Unicode<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e \u0425\u0430\u0431\u0440 \u0438 \u0425\u0430\u0431\u0440\u043e\u0436\u0438\u0442\u0435\u043b\u0435\u0439 \u0441 \u041d\u043e\u0432\u044b\u043c 2025 \u0433\u043e\u0434\u043e\u043c! \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0433\u043e\u0434\u0430\u043c\u0438 \u0440\u0430\u043d\u0435\u0435 \u044f \u043f\u0438\u0441\u0430\u043b <\/a>\u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0451\u043b\u043a\u0443 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0441\u043a\u0430\u0437 \u043f\u043e\u0439\u0434\u0451\u0442 \u043e \u0451\u043b\u043a\u0435 \u0438\u0437 Unicode \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 — \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043c\u0443\u0437\u044b\u043a\u0430, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432 QR \u043a\u043e\u0434.<\/p>\n

<\/figure>\n

\u0418\u0434\u0435\u044f \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/h2>\n

\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 dataUrl<\/a>, \u043e\u0441\u043e\u0431\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0439 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 url. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0442\u0435\u043a\u0441\u0442 \u0438 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u0418\u0437 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0441\u0442, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0431\u043b\u0438\u0436\u0435:<\/p>\n

data:[<media-type>][;base64],<data><\/code><\/p>\n

\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 dataUrl \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u044d\u0442\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b: [a-zA-Z0-9$\\-_.+!*'()]<\/code> . \u0421\u0440\u0435\u0434\u0438 \u044d\u0442\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043d\u0435\u0442 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u0432\u044b\u0447\u0435\u043a, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f html \u0442\u0435\u0433\u043e\u0432, #, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u0430, \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u043d\u0430 escape \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 url, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430 % (%20 — \u043f\u0440\u043e\u0431\u0435\u043b). <\/p>\n

\u041d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u043d\u0430 \u043f\u0440\u043e\u0431\u0435\u043b\u0435 \u0438 \u0440\u0435\u0448\u0451\u0442\u043a\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u044e\u0442 \u043f\u0430\u0440\u0441 (\u043d\u0430 \u043f\u0440\u043e\u0431\u0435\u043b\u0435 — \u0445\u0440\u043e\u043c, \u043d\u0430 # — firefox), \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 \u043d\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0445\u0440\u0430\u043d\u044f\u0449\u0443\u044e\u0441\u044f \u0432 dataUrl.<\/p>\n

\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 — \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c base64, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u0446\u0435\u043d\u043e\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0451\u043c\u0430 \u0432 \u0431\u0430\u0439\u0442\u0430\u0445.<\/p>\n

\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 dataUrl \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 22 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430:<\/p>\n

data:text\/html;base64,<\/code><\/p>\n

\u0412 \u0441\u0430\u043c\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u043c QR-\u043a\u043e\u0434\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c 2953 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0440\u0430\u0437\u043c\u0435\u0440 QR \u043a\u043e\u0434\u0430 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d, \u043d\u043e 2953 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 — \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043a\u0430\u043d\u0435\u0440\u043e\u0432.<\/p>\n

\u041e\u0441\u0442\u0430\u0442\u043e\u043a: 2953 — 22 = 2931 \u0441\u0438\u043c\u0432\u043e\u043b base64 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0438, \u0447\u0442\u043e \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f 2931 * 6\/8 = 2198 \u0431\u0430\u0439\u0442\u0430\u043c, \u0438\u043b\u0438 ascii \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c.<\/p>\n

2198 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u043c\u0430\u043b\u043e. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n

\u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438<\/h2>\n

\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 html:<\/p>\n

<html> <head>   <meta name=viewport content=width=device-width,initial-scale=1.0>   <style>     body {         overflow: hidden;         display: flex;         justify-content: center     }     #X {         margin: auto;         font-size: calc(min(70vw, 40vh));         line-height: 1em;         position: relative     }     #Y, .A {         position: absolute     }   <\/style> <\/head> <body> <div class=A style=z-index:9>   By <a href=https:\/\/rigellab.ru target=_blank>Rigellab<\/a> 2024<br>   Click FIR to play <\/div> <div id=Y><\/div> <div id=X><\/div> <\/body> <script> <\/script> <\/html><\/code><\/pre>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0435\u043c \u0432\u0441\u0451 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0432 body \u0438 \u0441\u043a\u0440\u043e\u0435\u043c \u0432\u0441\u0451, \u0447\u0442\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430: overflow hidden, display flex, justify-content center.<\/p>\n
\u0412 \u0431\u043b\u043e\u043a\u0435 div \u0441 id Y \u0431\u0443\u0434\u0443\u0442 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438, \u0430 \u0441 id X \u0431\u0443\u0434\u0435\u0442 \u0451\u043b\u043a\u0430, \u043f\u043e\u0434\u0430\u0440\u043a\u0438, \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442 «2025». \u0427\u0442\u043e\u0431\u044b \u0451\u043b\u043a\u0430 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0438 \u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445, \u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 (\u043d\u0435\u044f\u0432\u043d\u043e \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u043c\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0451\u043b\u043a\u0438) \u0434\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0430 \u043e\u0442 70% \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 40% \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 (calc(min(70vw, 40vh))) — \u043d\u0430 \u043a\u043e\u043c\u043f\u0435 \u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u0451\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0435 \u0432\u044b\u043b\u0435\u0437\u0430\u0442\u044c \u0437\u0430 \u0435\u0433\u043e \u043a\u0440\u0430\u044f.<\/p>\n
\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c position relative, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u0430\u0440\u043a\u0438 \u0438 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 \u0440\u044f\u0434\u043e\u043c \u0441 \u0451\u043b\u043a\u043e\u0439.<\/p>\n
\u041f\u043e\u0434\u0430\u0440\u043a\u0438 \u0438 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u0438 \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 — \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f html \u043a\u043e\u0434, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434\u0430\u0440\u043a\u0438 \u0438 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 js \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0432 innerHTML \u0431\u043b\u043e\u043a\u0430 X.<\/p>\n
\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0447\u0438\u0441\u043b\u0430 \u043a hex \u0444\u043e\u0440\u043c\u0430\u0442\u0443, \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u0430 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 \u0438 \u0441\u043d\u0435\u0436\u0438\u043d\u043e\u043a let S = e => e.toString(16);  \/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u0434\u0430\u043b\u0438 id \u0431\u043b\u043e\u043a\u0430, \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0431\u0435\u0437 document.getElementById X.innerHTML = \/\/ \u0451\u043b\u043a\u0430 '&#127876;' + \/\/ \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x \u043f\u043e\u0434\u0430\u0440\u043a\u043e\u0432 [8, 23, 57, 72]   .map(e => `<div class=A style=font-size:20%;line-height:20%;`        +`bottom:1%;left:${e}%;z-index:1>&#127873;<\/div>`)   .join('') \/\/ \u043a\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x \u0438 y \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 + [[82, 10], [78, 65], [95, 38]]    .map(([a, b], i) => `<div class=A style=font-size:50%;`        \/\/ \u0446\u0432\u0435\u0442 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u043e\u0433\u043e \u043d\u043e\u043c\u0435\u0440\u0430         +`bottom:-${a}%;left:${b}%;color:#${S(8 + i * 3)}df;z-index:2>&#9731;<\/div>`)   .join('') + `<div class=A style=font-size:40%;top:-80%;text-align:center;`   + `width:100%;font-family:sans-serif;color:#9df>2025<\/div>`;<\/code><\/pre>\n
\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0432 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u043e\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438: div, z-index, color, \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u044e.<\/p>\n
let A='<div class=A style=font-size:',W=';z-index:',J=';color:#';  X.innerHTML = '&#127876;' +  [8, 23, 57, 72]   .map(e => A + '20%;line-height:20%;bottom:1%;left:' + e + '%' + W + '1>&#127873;<\/div>')   .join('') +  [[82, 10], [78, 65], [95, 38]]   .map(([a, b], i) => A + '50%;bottom:-' + a + '%;left:' + b + '%' + J + S(8 + i * 3) + 'df' + W + '2>&#9731;<\/div>')   .join('') +  A + '40%;top:-80%;text-align:center;width:100%;font-family:sans-serif' + J + '9df>2025<\/div>';<\/code><\/pre>\n
\u0412\u043f\u043e\u043b\u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e.<\/p>\n
\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043c \u0441\u043e \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0430\u043c\u0438, \u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0435 20 \u043c\u0441 \u0432 \u0431\u043b\u043e\u043a\u0435 Y.<\/p>\n
let V = 0;  setInterval(e => {   V++;   e = '';   for (let i = 50; i < 100; i++)      e += A + `${2 + i % 7}vh;top:${(i * 57 - 10 + V \/ i * 7) % 105}vh;left:${(i * 23 + V \/ i * 5) % 107 - 53}vw`       + J + S(i % 7 + 5) + S(i % 5 + 9) + 'f' + W + `${i % 5}>&#10052;<\/div>`;   Y.innerHTML = e }, 20);<\/code><\/pre>\n
\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n
\u041a\u0430\u0436\u0434\u044b\u0435 20 \u043c\u0441 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0430\u044f V \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0432\u0441\u0435 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438 \u043d\u0430 \u043f\u043e\u043b\u0435. \u0421\u043d\u0435\u0436\u0438\u043d\u043a\u0430 — \u044d\u0442\u043e &#10052. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0430 \u0432 \u0441\u0432\u043e\u0451\u043c \u0431\u043b\u043e\u043a\u0435 div, \u0441 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0430: 2 + i % 7<\/code>  \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439.<\/p>\n
\u041f\u043e\u0437\u0438\u0446\u0438\u044f \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0435\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u043e\u0433\u043e \u043d\u043e\u043c\u0435\u0440\u0430 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438 \u0438 «\u0432\u0440\u0435\u043c\u0435\u043d\u0438», \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 V, \u043f\u043e\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438 \u0441\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0441\u0432\u043e\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f. \u0427\u0438\u0441\u043b\u0430 \u0434\u043b\u044f \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u0442\u043a\u0430 \u043e\u0442 \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0433\u043b\u0430\u0437\u0443 \u043d\u0435 \u0431\u044b\u043b \u0437\u0430\u043c\u0435\u0442\u0435\u043d \u043f\u0430\u0442\u0442\u0435\u0440\u043d. \u0412\u043e\u0442 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u0430\u0440\u0443 \u0435\u0434\u0438\u043d\u0438\u0446:<\/p>\n
\"\u0414\u0440\u0443\u0433\u0438\u0435<\/p>\n
\u0414\u0440\u0443\u0433\u0438\u0435 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u0438 \u0432 \u0444\u043e\u0440\u043c\u0443\u043b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u0441\u043d\u0435\u0436\u0438\u043d\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n
\n\u0422\u0435\u043a\u0443\u0449\u0438\u0439 dataUrl — \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/summary>\n
\n
data:text\/html;base64,PGh0bWw+PGhlYWQ+PG1ldGEgbmFtZT12aWV3cG9ydCBjb250ZW50PXdpZHRoPWRldmljZS13aWR0aCxpbml0aWFsLXNjYWxlPTEuMD48c3R5bGU+Ym9keXtvdmVyZmxvdzpoaWRkZW47ZGlzcGxheTpmbGV4O2p1c3RpZnktY29udGVudDpjZW50ZXJ9I1h7bWFyZ2luOmF1dG87Zm9udC1zaXplOmNhbGMobWluKDcwdncsNDB2aCkpO2xpbmUtaGVpZ2h0OjFlbTtwb3NpdGlvbjpyZWxhdGl2ZX0jWSwuQXtwb3NpdGlvbjphYnNvbHV0ZX08L3N0eWxlPjwvaGVhZD48Ym9keT48ZGl2IGNsYXNzPUEgc3R5bGU9ei1pbmRleDo5PkJ5IDxhIGhyZWY9aHR0cHM6Ly9yaWdlbGxhYi5ydSB0YXJnZXQ9X2JsYW5rPlJpZ2VsbGFiPC9hPiAyMDI0PC9kaXY+PGRpdiBpZD1ZPjwvZGl2PjxkaXYgaWQ9WD48L2Rpdj48L2JvZHk+PHNjcmlwdD5sZXQgVj0wLEE9JzxkaXYgY2xhc3M9QSBzdHlsZT1mb250LXNpemU6JyxXPSc7ei1pbmRleDonLEo9Jztjb2xvcjojJyxTPWU9PmUudG9TdHJpbmcoMTYpO1guaW5uZXJIVE1MPScmIzEyNzg3NjsnK1s4LDIzLDU3LDcyXS5tYXAoZT0+QSsnMjAlO2xpbmUtaGVpZ2h0OjIwJTtib3R0b206MSU7bGVmdDonK2UrJyUnK1crJzE+JiMxMjc4NzM7PC9kaXY+Jykuam9pbignJykrW1s4MiwxMF0sWzc4LDY1XSxbOTUsMzhdXS5tYXAoKFthLGJdLGkpPT5BKyc1MCU7Ym90dG9tOi0nK2ErJyU7bGVmdDonK2IrJyUnK0orUyg4K2kqMykrJ2RmJytXKycyPiYjOTczMTs8L2Rpdj4nKS5qb2luKCcnKStBKyc0MCU7dG9wOi04MCU7dGV4dC1hbGlnbjpjZW50ZXI7d2lkdGg6MTAwJTtmb250LWZhbWlseTpzYW5zLXNlcmlmJytKKyc5ZGY+MjAyNTwvZGl2Pic7c2V0SW50ZXJ2YWwoZT0+e1YrKztlPScnO2ZvcihsZXQgaT01MDtpPDEwMDtpKyspZSs9QStgJHsyK2klN312aDt0b3A6JHsoaSo1Ny0xMCtWL2kqNyklMTA1fXZoO2xlZnQ6JHsoaSoyMytWL2kqNSklMTA3LTUzfXZ3YCtKK1MoaSU3KzUpK1MoaSU1KzkpKydmJytXK2Ake2klNX0+JiMxMDA1Mjs8L2Rpdj5gO1kuaW5uZXJIVE1MPWV9LDIwKTs8L3NjcmlwdD48L2h0bWw+<\/p>\n<\/div>\n<\/details>\n
1440 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438\u0437 2953, \u0438\u043b\u0438 1041 \u0438\u0437 2198 — \u0435\u0449\u0451 \u043f\u043e\u043b\u043d\u043e \u043c\u0435\u0441\u0442\u0430!<\/p>\n
\u041c\u0443\u0437\u044b\u043a\u0430<\/h2>\n
\u0415\u043b\u043e\u0447\u043a\u0430 — \u0435\u0441\u0442\u044c.<\/p>\n
\u0421\u043d\u0435\u0436\u0438\u043d\u043a\u0438 — \u0435\u0441\u0442\u044c.<\/p>\n
\u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0433\u043e\u0434\u043d\u0435\u0439 \u043c\u0443\u0437\u044b\u043a\u0438.<\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0434\u043e\u043b\u0433\u0438\u0445 \u0440\u0430\u0437\u0434\u0443\u043c\u0438\u0439 \u0432\u044b\u0431\u043e\u0440 \u043f\u0430\u043b \u043d\u0430 \u043c\u0435\u043b\u043e\u0434\u0438\u044e Carol of the Bells. \u041d\u0430 online sequensor \u043d\u0430\u0439\u0434\u0435\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 midi \u0444\u0430\u0439\u043b \u0441 \u043c\u0430\u043b\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043d\u043e\u0442.<\/p>\n
\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0442\u044b \u0444\u043e\u0440\u0442\u0435\u043f\u0438\u0430\u043d\u043e. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c \u043d\u043e\u0442\u044b \u043d\u0435\u043b\u0438\u043d\u0435\u0439\u043d\u0430 \u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n
\"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/p>\n
\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 https:\/\/xssracademy.com\/blog\/adsr.html<\/a><\/figcaption><\/div>\n<\/figure>\n
\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u043e\u0442\u0430 \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u043a:<\/p>\n
\"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435<\/p>\n
\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 https:\/\/prosound.ixbt.com\/education\/spektr-analys.shtml<\/a><\/figcaption><\/div>\n<\/figure>\n
\u0413\u0430\u0440\u043c\u043e\u043d\u0438\u043a\u0438 \u0437\u0430\u0442\u0443\u0445\u0430\u044e\u0442 \u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\u043c \u0447\u0430\u0441\u0442\u043e\u0442\u044b. \u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0442\u0443 \u0438 2 \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u043a\u0438 (\u04452 \u0438 \u04453).<\/p>\n
\u0413\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c \u043d\u043e\u0442\u044b \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0435:<\/p>\n
\"e^{-\\frac{j}{2500\\cdot<\/p>\n
\"\u0410\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u0430<\/p>\n
\u0410\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u0430 \u043d\u043e\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n
\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u043a ADSR.<\/p>\n
\u0422\u043e \u0436\u0435 \u0432 js:<\/p>\n
let F = (N, j, D) =>  Math.sin(27.5 * Math.pow(1.059463, N) * j \/ 3820) * Math.exp(-j \/ 2500 \/ D) * Math.min(1, j \/ 250);<\/code><\/pre>\n
N — \u043d\u043e\u043c\u0435\u0440 \u043d\u043e\u0442\u044b, j — \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0442\u0438\u043a, D — \u0434\u043e\u043b\u0433\u043e\u0442\u0430 \u043d\u043e\u0442\u044b (\u0432 \u0434\u043e\u043b\u044f\u0445, \u043a\u0440\u0430\u0442\u043d\u044b\u0445 0.25)<\/p>\n
\u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0447\u0438\u0441\u043b\u043e 3820 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 24000 \u043d\u0430 2 pi: 24000 \/ 6.2832 = 3820.<\/p>\n
27.5 * Math.pow(1.059463, N) — \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0430 \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u043d\u043e\u0442\u044b. \u0427\u0430\u0441\u0442\u043e\u0442\u0430 \u043d\u043e\u0442\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0434\u0432\u043e\u0435 \u043a\u0430\u0436\u0434\u044b\u0435 12 \u043d\u043e\u0442, \u0442\u043e \u0435\u0441\u0442\u044c, \u0437\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u043f\u0435\u0440\u0432\u043e\u0439 \u043d\u043e\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0432\u0441\u0435\u0445 \u043d\u043e\u0442. 1.059463 — \u043a\u043e\u0440\u0435\u043d\u044c 12-\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0438\u0437 2.<\/p>\n
\u0414\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f .mid \u0432 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u0437 \u043f\u0430\u0440 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0430\u0440\u0435 — \u043d\u043e\u043c\u0435\u0440 \u043d\u043e\u0442\u044b, \u0432\u0442\u043e\u0440\u043e\u0439 — \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u0442\u0430\u0440\u0442\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043d\u043e\u0442\u044b. \u0414\u043b\u044f \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0441\u043b\u043e\u0432\u0430\u0440\u044c \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 .mid \u0444\u0430\u0439\u043b.<\/p>\n
\n\u041a\u043e\u0434 \u043d\u0430 \u043f\u0438\u0442\u043e\u043d\u0435<\/summary>\n
\n
import mido import struct   midi_file = mido.MidiFile('sound.mid') notes = [] curr_play = {} time = 0  for i, track in enumerate(midi_file.tracks):     print(f\"\u0414\u043e\u0440\u043e\u0436\u043a\u0430 {i}: {track.name if track.name else '<\u0431\u0435\u0437 \u0438\u043c\u0435\u043d\u0438>'}\")     for msg in track:         time += msg.time         if msg.type == 'note_on':             if msg.note not in curr_play:                 curr_play[msg.note] = time         elif msg.type == 'note_off':             if msg.note in curr_play:                 start = curr_play[msg.note]                 delta = time - start                 del curr_play[msg.note]                 notes.append([msg.note, start, delta]) notes.sort(key=lambda x: x[1]) print(len(notes)) binary = bytes() prev = 0  # \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u043e\u0442 m = {1: 0, 2: 1, 6: 2, 8: 3, 12: 4, 30: 5} for e in notes:     note, start, duration = e     start \/\/= 96     duration \/\/= 96     delta = start - prev     prev = start     binary += struct.pack('BB', note - 21, 35 + delta * len(m) + m[duration])  print(binary) print(prev \/ 96 * 24000)<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430<\/p>\n
let M = `C$B\/C)@*C0B\/C)@*C0B\/C)@*C0B\/C)@*C04%B\/C)@*C02%B\/C)@*C00%B\/C)@*C0\/%B\/C)@*C04%B\/C)@*C02%B\/C)@*C00%B\/C)@*C0\/%B\/C)@*C0(%B\/C)@*C0&%B\/C)@*C0$%B\/C)@*C0\/%B\/C)@*G04%E\/G)C*G02%E\/G)C*G00%E\/G)C*G0\/%E\/G)C*L04%L\/L)J)H)G*2%G\/G)E)C)E*0%E\/E)G)E)C*\/%B\/C)@*;\/\/'=)?)@)B)C)E)G)E*C0G\/\/'I)K)L)N)O)Q)S)Q*O0O04%N\/O)L*O02%N\/O)L*O00%N\/O)L*O0\/%N\/O)L*O04%N\/O)L*O02%N\/O)L*O00%N\/O)L*O0\/%N\/O)L*O04%N\/O)L*O02%N\/O)L*O00%N\/O)L*O0\/%N\/O)L*O04%N\/O)L*L02%L\/L)L)H)G*0%G\/G)E)C)E*\/%E\/E)G)E)C*\/%B\/C)@*G\/\/'I)K)L)N)O)Q)S)Q*O0G\/\/'I)K)L)N)O)Q)S)Q*O0O04%N\/O)L*O02%N\/O)L*O00%N\/O)L*O0\/%N\/O)L*S04%Q\/S)O*S02%Q\/S)O*S00%Q\/S)O*S0\/(Q\/S)O*O0N\/O)L*O0N\/O)L*O0N\/O)L*O0N\/O)L*O04(N\/O)L*O0N\/O)L*O0N\/O)L*O0N\/O)L,`<\/code><\/pre>\n
\u0412 \u043d\u0435\u0439 \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432 \ud83d\ude42<\/p>\n
\u041c\u0443\u0437\u044b\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0435\u0435\u0440<\/h2>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043c\u0435\u043b\u043e\u0434\u0438\u044e, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u0431\u043b\u043e\u043a\u0443 X, \u043e\u043d \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u043b \u043f\u043e \u043d\u0435\u043c\u0443 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \ud83d\ude42<\/p>\n
\u041a\u043e\u0434 \u043f\u043b\u0435\u0435\u0440\u0430 \u043d\u0430 js, \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n
X.onclick = (   a, \/\/ \u044d\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0435 undefined \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430   l, t, i, j, N, I, D, W,  \/\/ \u0432\u0441\u0435 undefined   P = 0,   f = new AudioContext \/* js \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0431\u0435\u0437 \u0441\u043a\u043e\u0431\u043e\u043a *\/) => {   X.onclick = null;  \/\/ \u0437\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u043a\u043b\u0438\u043a\u043e\u0432    \/\/ t - \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0443\u0434\u0438\u043e\u0431\u0443\u0444\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 2400000 \u0441\u0435\u043c\u043f\u043b\u043e\u0432 \u0438 \u0447\u0430\u0441\u0442\u043e\u0442\u043e\u0439 \u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 24 \u043a\u0413\u0446   \/\/ l - Float32Array, \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0435\u043c\u043f\u043b\u043e\u0432   l = (t = f.createBuffer(1, 24e5, 24e3)).getChannelData(0);    \/\/ \u0446\u0438\u043a\u043b \u043f\u043e \u0432\u0441\u0435\u043c \u043d\u043e\u0442\u0430\u043c, M - \u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u043e\u0442   for (i = 0; i < M.length; i++) {     \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b - \u043d\u043e\u0442\u0430, \u043d\u0435 \u0442\u0435\u0440\u044f\u0435\u043c \u043c\u0435\u0441\u0442\u0430 \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0438\u043c\u0432\u043e\u043b     N = M[i++].charCodeAt();     \/\/ \u0432\u0442\u043e\u0440\u043e\u0439 - \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430     I = M[i].charCodeAt() - 35;     \/\/ \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0438\u0437 \"\u0441\u043b\u043e\u0432\u0430\u0440\u044f\"     D = [1, 2, 6, 8, 12, 30][I % 6];     \/\/ \u0430 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0434\u043b\u044f \u0432\u0437\u044f\u0442\u043e\u0433\u043e midi \u043e\u043d\u0430 \u043d\u0435 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 2     W = I \/ 6 | 0;     \/\/ \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043d\u043e\u0442\u044b. 6e3 = 6000 = 1\/4 \u043e\u0442 \u0441\u0435\u043a\u0443\u043d\u0434\u044b,     \/\/ \u043f\u0440\u0438 \u0447\u0430\u0441\u0442\u043e\u0442\u0435 \u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 24\u043a\u0413\u0446     P += W * 6e3;      \/\/ \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043d\u043e\u0442\u044b     for (j = 0; j < D * 6e3; j++)       \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0431\u0443\u0444\u0435\u0440 \u043d\u043e\u0442\u0443 \u0438 \u0434\u0432\u0435 \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u043a\u0438       l[P + j] += F(N, j, D) * .35 + F(N + 12, j, D) * .1 + F(N + 24, j, D) * .05   }   \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c AudioBufferSourceNode, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u0442\u044c,   \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0435\u043c\u0443 \u0431\u0443\u0444\u0444\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0441\u0435\u043c\u043f\u043b\u044b   (i = f.createBufferSource()).buffer = t;   \/\/ \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0441 \u0432\u044b\u0445\u043e\u0434\u043e\u043c   i.connect(f.destination);   \/\/ \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u043c \u0441 \u043d\u0430\u0447\u0430\u043b\u0430   i.start(0); };<\/code><\/pre>\n
\n\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 dataUrl — \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/summary>\n
\n
data:text\/html;base64,PGh0bWw+PGhlYWQ+PG1ldGEgbmFtZT12aWV3cG9ydCBjb250ZW50PXdpZHRoPWRldmljZS13aWR0aCxpbml0aWFsLXNjYWxlPTEuMD48c3R5bGU+Ym9keXtvdmVyZmxvdzpoaWRkZW47ZGlzcGxheTpmbGV4O2p1c3RpZnktY29udGVudDpjZW50ZXJ9I1h7bWFyZ2luOmF1dG87Zm9udC1zaXplOmNhbGMobWluKDcwdncsNDB2aCkpO2xpbmUtaGVpZ2h0OjFlbTtwb3NpdGlvbjpyZWxhdGl2ZX0jWSwuQXtwb3NpdGlvbjphYnNvbHV0ZX08L3N0eWxlPjwvaGVhZD48Ym9keT48ZGl2IGNsYXNzPUEgc3R5bGU9ei1pbmRleDo5PkJ5IDxhIGhyZWY9aHR0cHM6Ly9yaWdlbGxhYi5ydSB0YXJnZXQ9X2JsYW5rPlJpZ2VsbGFiPC9hPiAyMDI0PGJyPkNsaWNrIEZJUiBmb3IgVGhlIEJlbGxzPC9kaXY+PGRpdiBpZD1ZPjwvZGl2PjxkaXYgaWQ9WD48L2Rpdj48L2JvZHk+PHNjcmlwdD5sZXQgVj0wLEE9JzxkaXYgY2xhc3M9QSBzdHlsZT1mb250LXNpemU6JyxXPSc7ei1pbmRleDonLEo9Jztjb2xvcjojJyxTPWU9PmUudG9TdHJpbmcoMTYpLEY9KE4saixEKT0+TWF0aC5zaW4oMjcuNSpNYXRoLnBvdygxLjA1OTQ2MyxOKSpqLzM4MjApKk1hdGguZXhwKC1qLzI1MDAvRCkqTWF0aC5taW4oMSxqLzI1MCksTT1gQyRCL0MpQCpDMEIvQylAKkMwQi9DKUAqQzBCL0MpQCpDMDQlQi9DKUAqQzAyJUIvQylAKkMwMCVCL0MpQCpDMC8lQi9DKUAqQzA0JUIvQylAKkMwMiVCL0MpQCpDMDAlQi9DKUAqQzAvJUIvQylAKkMwKCVCL0MpQCpDMCYlQi9DKUAqQzAkJUIvQylAKkMwLyVCL0MpQCpHMDQlRS9HKUMqRzAyJUUvRylDKkcwMCVFL0cpQypHMC8lRS9HKUMqTDA0JUwvTClKKUgpRyoyJUcvRylFKUMpRSowJUUvRSlHKUUpQyovJUIvQylAKjsvLyc9KT8pQClCKUMpRSlHKUUqQzBHLy8nSSlLKUwpTilPKVEpUylRKk8wTzA0JU4vTylMKk8wMiVOL08pTCpPMDAlTi9PKUwqTzAvJU4vTylMKk8wNCVOL08pTCpPMDIlTi9PKUwqTzAwJU4vTylMKk8wLyVOL08pTCpPMDQlTi9PKUwqTzAyJU4vTylMKk8wMCVOL08pTCpPMC8lTi9PKUwqTzA0JU4vTylMKkwwMiVML0wpTClIKUcqMCVHL0cpRSlDKUUqLyVFL0UpRylFKUMqLyVCL0MpQCpHLy8nSSlLKUwpTilPKVEpUylRKk8wRy8vJ0kpSylMKU4pTylRKVMpUSpPME8wNCVOL08pTCpPMDIlTi9PKUwqTzAwJU4vTylMKk8wLyVOL08pTCpTMDQlUS9TKU8qUzAyJVEvUylPKlMwMCVRL1MpTypTMC8oUS9TKU8qTzBOL08pTCpPME4vTylMKk8wTi9PKUwqTzBOL08pTCpPMDQoTi9PKUwqTzBOL08pTCpPME4vTylMKk8wTi9PKUwsYDtYLm9uY2xpY2s9KGEsbCx0LGksaixOLEksRCxXLFA9MCxmPW5ldyBBdWRpb0NvbnRleHQpPT57WC5vbmNsaWNrPW51bGw7bD0odD1mLmNyZWF0ZUJ1ZmZlcigxLDI0ZTUsMjRlMykpLmdldENoYW5uZWxEYXRhKDApO2ZvcihpPTA7aTxNLmxlbmd0aDtpKyspe049TVtpKytdLmNoYXJDb2RlQXQoKTtJPU1baV0uY2hhckNvZGVBdCgpLTM1O0Q9WzEsIDIsIDYsIDgsIDEyLCAzMF1bSSU2XTtXPUkvNnwwO1ArPVcqNmUzO2ZvcihqPTA7ajxEKjZlMztqKyspbFtQK2pdKz1GKE4saixEKSouMzUrRihOKzEyLGosRCkqLjErRihOKzI0LGosRCkqLjA1fShpPWYuY3JlYXRlQnVmZmVyU291cmNlKCkpLmJ1ZmZlcj10LGkuY29ubmVjdChmLmRlc3RpbmF0aW9uKSxpLnN0YXJ0KDApfTtYLmlubmVySFRNTD0nJiMxMjc4NzY7JytbOCwyMyw1Nyw3Ml0ubWFwKGU9PkErJzIwJTtsaW5lLWhlaWdodDoyMCU7Ym90dG9tOjElO2xlZnQ6JytlKyclJytXKycxPiYjMTI3ODczOzwvZGl2PicpLmpvaW4oJycpK1tbODIsMTBdLFs3OCw2NV0sWzk1LDM4XV0ubWFwKChbYSxiXSxpKT0+QSsnNTAlO2JvdHRvbTotJythKyclO2xlZnQ6JytiKyclJytKK1MoOCtpKjMpKydkZicrVysnMj4mIzk3MzE7PC9kaXY+Jykuam9pbignJykrQSsnNDAlO3RvcDotODAlO3RleHQtYWxpZ246Y2VudGVyO3dpZHRoOjEwMCU7Zm9udC1mYW1pbHk6c2Fucy1zZXJpZicrSisnOWRmPjIwMjU8L2Rpdj4nO3NldEludGVydmFsKGU9PntWKys7ZT0nJztmb3IobGV0IGk9NTA7aTwxMDA7aSsrKWUrPUErYCR7MitpJTd9dmg7dG9wOiR7KGkqNTctMTArVi9pKjcpJTEwNX12aDtsZWZ0OiR7KGkqMjMrVi9pKjUpJTEwNy01M312d2ArSitTKGklNys1KStTKGklNSs5KSsnZicrVytgJHtpJTV9PiYjMTAwNTI7PC9kaXY+YDtZLmlubmVySFRNTD1lfSwyMCk7PC9zY3JpcHQ+PC9odG1sPg==<\/p>\n<\/div>\n<\/details>\n
2950 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043f\u043e\u0447\u0442\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c<\/p>\n
\u0418 \u043e\u043d \u0436\u0435 \u0432 \u0432\u0438\u0434\u0435 QR — \u043a\u043e\u0434\u0430:<\/p>\n
<\/figure>\n
\u0412\u0441\u0435\u0445 \u0441 \u041d\u043e\u0432\u044b\u043c \u0413\u043e\u0434\u043e\u043c!<\/p>\n
P.S. \u041f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 Firefox \u0451\u043b\u043a\u0430 \u043f\u0440\u0438\u043b\u0438\u043f\u0430\u0435\u0442 \u043a \u0432\u0435\u0440\u0445\u0443, \u0432 \u0445\u0440\u043e\u043c\u0435\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 (Chrome, Edge, Yandex Browser) \u0432\u0441\u0451 \u043e\u0442\u043b\u0438\u0447\u043d\u043e.<\/p>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0451\u043b\u043a\u0430, \u043f\u043e\u0434\u0430\u0440\u043a\u0438 \u0438 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u0438 — unicode \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d \u0451\u043b\u043a\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u043e\u0442 \u041e\u0421 \u043a \u041e\u0421. \u041f\u043e\u043a\u0430\u0436\u0438\u0442\u0435 \u0441\u0432\u043e\u044e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0451\u043b\u043a\u0443 \u0431\u043b\u0438\u0437\u043a\u0438\u043c!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/871116\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e \u0425\u0430\u0431\u0440 \u0438 \u0425\u0430\u0431\u0440\u043e\u0436\u0438\u0442\u0435\u043b\u0435\u0439 \u0441 \u041d\u043e\u0432\u044b\u043c 2025 \u0433\u043e\u0434\u043e\u043c! \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0433\u043e\u0434\u0430\u043c\u0438 \u0440\u0430\u043d\u0435\u0435 \u044f \u043f\u0438\u0441\u0430\u043b <\/a>\u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0451\u043b\u043a\u0443 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0441\u043a\u0430\u0437 \u043f\u043e\u0439\u0434\u0451\u0442 \u043e \u0451\u043b\u043a\u0435 \u0438\u0437 Unicode \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 — \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043c\u0443\u0437\u044b\u043a\u0430, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432 QR \u043a\u043e\u0434.<\/p>\n
<\/figure>\n
\u0418\u0434\u0435\u044f \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/h2>\n
\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 dataUrl<\/a>, \u043e\u0441\u043e\u0431\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0439 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 url. \u042d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0442\u0435\u043a\u0441\u0442 \u0438 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u0418\u0437 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0441\u0442, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0431\u043b\u0438\u0436\u0435:<\/p>\n
data:[<media-type>][;base64],<data><\/code><\/p>\n
\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 dataUrl \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u044d\u0442\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b: [a-zA-Z0-9$\\-_.+!*'()]<\/code> . \u0421\u0440\u0435\u0434\u0438 \u044d\u0442\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043d\u0435\u0442 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u0432\u044b\u0447\u0435\u043a, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f html \u0442\u0435\u0433\u043e\u0432, #, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u0430, \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u043d\u0430 escape \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 url, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430 % (%20 — \u043f\u0440\u043e\u0431\u0435\u043b). <\/p>\n
\u041d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0432\u044b\u0447\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u043d\u0430 \u043f\u0440\u043e\u0431\u0435\u043b\u0435 \u0438 \u0440\u0435\u0448\u0451\u0442\u043a\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u044e\u0442 \u043f\u0430\u0440\u0441 (\u043d\u0430 \u043f\u0440\u043e\u0431\u0435\u043b\u0435 — \u0445\u0440\u043e\u043c, \u043d\u0430 # — firefox), \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e\u0438\u0441\u043a\u0430, \u0430 \u043d\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0445\u0440\u0430\u043d\u044f\u0449\u0443\u044e\u0441\u044f \u0432 dataUrl.<\/p>\n
\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 — \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c base64, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u043f\u0438\u0441\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u0446\u0435\u043d\u043e\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0451\u043c\u0430 \u0432 \u0431\u0430\u0439\u0442\u0430\u0445.<\/p>\n
\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 dataUrl \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 22 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u0430:<\/p>\n
data:text\/html;base64,<\/code><\/p>\n
\u0412 \u0441\u0430\u043c\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u043c QR-\u043a\u043e\u0434\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c 2953 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0440\u0430\u0437\u043c\u0435\u0440 QR \u043a\u043e\u0434\u0430 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d, \u043d\u043e 2953 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 — \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043a\u0430\u043d\u0435\u0440\u043e\u0432.<\/p>\n
\u041e\u0441\u0442\u0430\u0442\u043e\u043a: 2953 — 22 = 2931 \u0441\u0438\u043c\u0432\u043e\u043b base64 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0438, \u0447\u0442\u043e \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f 2931 * 6\/8 = 2198 \u0431\u0430\u0439\u0442\u0430\u043c, \u0438\u043b\u0438 ascii \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c.<\/p>\n
2198 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u043c\u0430\u043b\u043e. \u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/p>\n
\u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438<\/h2>\n
\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 html:<\/p>\n
<html> <head>   <meta name=viewport content=width=device-width,initial-scale=1.0>   <style>     body {         overflow: hidden;         display: flex;         justify-content: center     }     #X {         margin: auto;         font-size: calc(min(70vw, 40vh));         line-height: 1em;         position: relative     }     #Y, .A {         position: absolute     }   <\/style> <\/head> <body> <div class=A style=z-index:9>   By <a href=https:\/\/rigellab.ru target=_blank>Rigellab<\/a> 2024<br>   Click FIR to play <\/div> <div id=Y><\/div> <div id=X><\/div> <\/body> <script> <\/script> <\/html><\/code><\/pre>\n
\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0435\u043c \u0432\u0441\u0451 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0432 body \u0438 \u0441\u043a\u0440\u043e\u0435\u043c \u0432\u0441\u0451, \u0447\u0442\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430: overflow hidden, display flex, justify-content center.<\/p>\n
\u0412 \u0431\u043b\u043e\u043a\u0435 div \u0441 id Y \u0431\u0443\u0434\u0443\u0442 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438, \u0430 \u0441 id X \u0431\u0443\u0434\u0435\u0442 \u0451\u043b\u043a\u0430, \u043f\u043e\u0434\u0430\u0440\u043a\u0438, \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u0438 \u0438 \u0442\u0435\u043a\u0441\u0442 «2025». \u0427\u0442\u043e\u0431\u044b \u0451\u043b\u043a\u0430 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0438 \u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445, \u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 (\u043d\u0435\u044f\u0432\u043d\u043e \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u043c\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0451\u043b\u043a\u0438) \u0434\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0430 \u043e\u0442 70% \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 40% \u0432\u044b\u0441\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 (calc(min(70vw, 40vh))) — \u043d\u0430 \u043a\u043e\u043c\u043f\u0435 \u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u0451\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0435 \u0432\u044b\u043b\u0435\u0437\u0430\u0442\u044c \u0437\u0430 \u0435\u0433\u043e \u043a\u0440\u0430\u044f.<\/p>\n
\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c position relative, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u0430\u0440\u043a\u0438 \u0438 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 \u0440\u044f\u0434\u043e\u043c \u0441 \u0451\u043b\u043a\u043e\u0439.<\/p>\n
\u041f\u043e\u0434\u0430\u0440\u043a\u0438 \u0438 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u0438 \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 — \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f html \u043a\u043e\u0434, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434\u0430\u0440\u043a\u0438 \u0438 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 js \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0432 innerHTML \u0431\u043b\u043e\u043a\u0430 X.<\/p>\n
\/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0447\u0438\u0441\u043b\u0430 \u043a hex \u0444\u043e\u0440\u043c\u0430\u0442\u0443, \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u0430 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 \u0438 \u0441\u043d\u0435\u0436\u0438\u043d\u043e\u043a let S = e => e.toString(16);  \/\/ \u0442\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u0434\u0430\u043b\u0438 id \u0431\u043b\u043e\u043a\u0430, \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0431\u0435\u0437 document.getElementById X.innerHTML = \/\/ \u0451\u043b\u043a\u0430 '&#127876;' + \/\/ \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x \u043f\u043e\u0434\u0430\u0440\u043a\u043e\u0432 [8, 23, 57, 72]   .map(e => `<div class=A style=font-size:20%;line-height:20%;`        +`bottom:1%;left:${e}%;z-index:1>&#127873;<\/div>`)   .join('') \/\/ \u043a\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x \u0438 y \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u043e\u0432 + [[82, 10], [78, 65], [95, 38]]    .map(([a, b], i) => `<div class=A style=font-size:50%;`        \/\/ \u0446\u0432\u0435\u0442 \u0441\u043d\u0435\u0433\u043e\u0432\u0438\u043a\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u043e\u0433\u043e \u043d\u043e\u043c\u0435\u0440\u0430         +`bottom:-${a}%;left:${b}%;color:#${S(8 + i * 3)}df;z-index:2>&#9731;<\/div>`)   .join('') + `<div class=A style=font-size:40%;top:-80%;text-align:center;`   + `width:100%;font-family:sans-serif;color:#9df>2025<\/div>`;<\/code><\/pre>\n
\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0432 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u043e\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u043a\u0438: div, z-index, color, \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u044e.<\/p>\n
let A='<div class=A style=font-size:',W=';z-index:',J=';color:#';  X.innerHTML = '&#127876;' +  [8, 23, 57, 72]   .map(e => A + '20%;line-height:20%;bottom:1%;left:' + e + '%' + W + '1>&#127873;<\/div>')   .join('') +  [[82, 10], [78, 65], [95, 38]]   .map(([a, b], i) => A + '50%;bottom:-' + a + '%;left:' + b + '%' + J + S(8 + i * 3) + 'df' + W + '2>&#9731;<\/div>')   .join('') +  A + '40%;top:-80%;text-align:center;width:100%;font-family:sans-serif' + J + '9df>2025<\/div>';<\/code><\/pre>\n
\u0412\u043f\u043e\u043b\u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e.<\/p>\n
\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043c \u0441\u043e \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0430\u043c\u0438, \u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0435 20 \u043c\u0441 \u0432 \u0431\u043b\u043e\u043a\u0435 Y.<\/p>\n
let V = 0;  setInterval(e => {   V++;   e = '';   for (let i = 50; i < 100; i++)      e += A + `${2 + i % 7}vh;top:${(i * 57 - 10 + V \/ i * 7) % 105}vh;left:${(i * 23 + V \/ i * 5) % 107 - 53}vw`       + J + S(i % 7 + 5) + S(i % 5 + 9) + 'f' + W + `${i % 5}>&#10052;<\/div>`;   Y.innerHTML = e }, 20);<\/code><\/pre>\n
\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:<\/p>\n
\u041a\u0430\u0436\u0434\u044b\u0435 20 \u043c\u0441 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0449\u0430\u044f V \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0432\u0441\u0435 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438 \u043d\u0430 \u043f\u043e\u043b\u0435. \u0421\u043d\u0435\u0436\u0438\u043d\u043a\u0430 — \u044d\u0442\u043e &#10052. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0430 \u0432 \u0441\u0432\u043e\u0451\u043c \u0431\u043b\u043e\u043a\u0435 div, \u0441 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0448\u0440\u0438\u0444\u0442\u0430: 2 + i % 7<\/code>  \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439.<\/p>\n
\u041f\u043e\u0437\u0438\u0446\u0438\u044f \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438, \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0435\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u043e\u0433\u043e \u043d\u043e\u043c\u0435\u0440\u0430 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438 \u0438 «\u0432\u0440\u0435\u043c\u0435\u043d\u0438», \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 V, \u043f\u043e\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u043d\u0435\u0436\u0438\u043d\u043a\u0438 \u0441\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0441\u0432\u043e\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f. \u0427\u0438\u0441\u043b\u0430 \u0434\u043b\u044f \u0443\u043c\u043d\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u0442\u043a\u0430 \u043e\u0442 \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043d\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0433\u043b\u0430\u0437\u0443 \u043d\u0435 \u0431\u044b\u043b \u0437\u0430\u043c\u0435\u0442\u0435\u043d \u043f\u0430\u0442\u0442\u0435\u0440\u043d. \u0412\u043e\u0442 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u0430\u0440\u0443 \u0435\u0434\u0438\u043d\u0438\u0446:<\/p>\n
\n
\u0414\u0440\u0443\u0433\u0438\u0435 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u0438 \u0432 \u0444\u043e\u0440\u043c\u0443\u043b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u0441\u043d\u0435\u0436\u0438\u043d\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n
\n\u0422\u0435\u043a\u0443\u0449\u0438\u0439 dataUrl — \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/summary>\n
\n
data:text\/html;base64,PGh0bWw+PGhlYWQ+PG1ldGEgbmFtZT12aWV3cG9ydCBjb250ZW50PXdpZHRoPWRldmljZS13aWR0aCxpbml0aWFsLXNjYWxlPTEuMD48c3R5bGU+Ym9keXtvdmVyZmxvdzpoaWRkZW47ZGlzcGxheTpmbGV4O2p1c3RpZnktY29udGVudDpjZW50ZXJ9I1h7bWFyZ2luOmF1dG87Zm9udC1zaXplOmNhbGMobWluKDcwdncsNDB2aCkpO2xpbmUtaGVpZ2h0OjFlbTtwb3NpdGlvbjpyZWxhdGl2ZX0jWSwuQXtwb3NpdGlvbjphYnNvbHV0ZX08L3N0eWxlPjwvaGVhZD48Ym9keT48ZGl2IGNsYXNzPUEgc3R5bGU9ei1pbmRleDo5PkJ5IDxhIGhyZWY9aHR0cHM6Ly9yaWdlbGxhYi5ydSB0YXJnZXQ9X2JsYW5rPlJpZ2VsbGFiPC9hPiAyMDI0PC9kaXY+PGRpdiBpZD1ZPjwvZGl2PjxkaXYgaWQ9WD48L2Rpdj48L2JvZHk+PHNjcmlwdD5sZXQgVj0wLEE9JzxkaXYgY2xhc3M9QSBzdHlsZT1mb250LXNpemU6JyxXPSc7ei1pbmRleDonLEo9Jztjb2xvcjojJyxTPWU9PmUudG9TdHJpbmcoMTYpO1guaW5uZXJIVE1MPScmIzEyNzg3NjsnK1s4LDIzLDU3LDcyXS5tYXAoZT0+QSsnMjAlO2xpbmUtaGVpZ2h0OjIwJTtib3R0b206MSU7bGVmdDonK2UrJyUnK1crJzE+JiMxMjc4NzM7PC9kaXY+Jykuam9pbignJykrW1s4MiwxMF0sWzc4LDY1XSxbOTUsMzhdXS5tYXAoKFthLGJdLGkpPT5BKyc1MCU7Ym90dG9tOi0nK2ErJyU7bGVmdDonK2IrJyUnK0orUyg4K2kqMykrJ2RmJytXKycyPiYjOTczMTs8L2Rpdj4nKS5qb2luKCcnKStBKyc0MCU7dG9wOi04MCU7dGV4dC1hbGlnbjpjZW50ZXI7d2lkdGg6MTAwJTtmb250LWZhbWlseTpzYW5zLXNlcmlmJytKKyc5ZGY+MjAyNTwvZGl2Pic7c2V0SW50ZXJ2YWwoZT0+e1YrKztlPScnO2ZvcihsZXQgaT01MDtpPDEwMDtpKyspZSs9QStgJHsyK2klN312aDt0b3A6JHsoaSo1Ny0xMCtWL2kqNyklMTA1fXZoO2xlZnQ6JHsoaSoyMytWL2kqNSklMTA3LTUzfXZ3YCtKK1MoaSU3KzUpK1MoaSU1KzkpKydmJytXK2Ake2klNX0+JiMxMDA1Mjs8L2Rpdj5gO1kuaW5uZXJIVE1MPWV9LDIwKTs8L3NjcmlwdD48L2h0bWw+<\/p>\n<\/div>\n<\/details>\n
1440 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438\u0437 2953, \u0438\u043b\u0438 1041 \u0438\u0437 2198 — \u0435\u0449\u0451 \u043f\u043e\u043b\u043d\u043e \u043c\u0435\u0441\u0442\u0430!<\/p>\n
\u041c\u0443\u0437\u044b\u043a\u0430<\/h2>\n
\u0415\u043b\u043e\u0447\u043a\u0430 — \u0435\u0441\u0442\u044c.<\/p>\n
\u0421\u043d\u0435\u0436\u0438\u043d\u043a\u0438 — \u0435\u0441\u0442\u044c.<\/p>\n
\u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0433\u043e\u0434\u043d\u0435\u0439 \u043c\u0443\u0437\u044b\u043a\u0438.<\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0434\u043e\u043b\u0433\u0438\u0445 \u0440\u0430\u0437\u0434\u0443\u043c\u0438\u0439 \u0432\u044b\u0431\u043e\u0440 \u043f\u0430\u043b \u043d\u0430 \u043c\u0435\u043b\u043e\u0434\u0438\u044e Carol of the Bells. \u041d\u0430 online sequensor \u043d\u0430\u0439\u0434\u0435\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 midi \u0444\u0430\u0439\u043b \u0441 \u043c\u0430\u043b\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043d\u043e\u0442.<\/p>\n
\u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0442\u044b \u0444\u043e\u0440\u0442\u0435\u043f\u0438\u0430\u043d\u043e. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c \u043d\u043e\u0442\u044b \u043d\u0435\u043b\u0438\u043d\u0435\u0439\u043d\u0430 \u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n
\n
\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 https:\/\/xssracademy.com\/blog\/adsr.html<\/a><\/figcaption><\/div>\n<\/figure>\n
\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u043e\u0442\u0430 \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u043a:<\/p>\n
\n
\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 https:\/\/prosound.ixbt.com\/education\/spektr-analys.shtml<\/a><\/figcaption><\/div>\n<\/figure>\n
\u0413\u0430\u0440\u043c\u043e\u043d\u0438\u043a\u0438 \u0437\u0430\u0442\u0443\u0445\u0430\u044e\u0442 \u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\u043c \u0447\u0430\u0441\u0442\u043e\u0442\u044b. \u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0442\u0443 \u0438 2 \u0433\u0430\u0440\u043c\u043e\u043d\u0438\u043a\u0438 (\u04452 \u0438 \u04453).<\/p>\n
\u0413\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c \u043d\u043e\u0442\u044b \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0444\u043e\u0440\u043c\u0443\u043b\u0435:<\/p>\n
\n
\u0410\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u0430 \u043d\u043e\u0442\u044b<\/figcaption><\/div>\n<\/figure>\n
\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u043a ADSR.<\/p>\n
\u0422\u043e \u0436\u0435 \u0432 js:<\/p>\n
let F = (N, j, D) =>  Math.sin(27.5 * Math.pow(1.059463, N) * j \/ 3820) * Math.exp(-j \/ 2500 \/ D) * Math.min(1, j \/ 250);<\/code><\/pre>\n
N — \u043d\u043e\u043c\u0435\u0440 \u043d\u043e\u0442\u044b, j — \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0442\u0438\u043a, D — \u0434\u043e\u043b\u0433\u043e\u0442\u0430 \u043d\u043e\u0442\u044b (\u0432 \u0434\u043e\u043b\u044f\u0445, \u043a\u0440\u0430\u0442\u043d\u044b\u0445 0.25)<\/p>\n
\u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0447\u0438\u0441\u043b\u043e 3820 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 24000 \u043d\u0430 2 pi: 24000 \/ 6.2832 = 3820.<\/p>\n
27.5 * Math.pow(1.059463, N) — \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0430 \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u043d\u043e\u0442\u044b. \u0427\u0430\u0441\u0442\u043e\u0442\u0430 \u043d\u043e\u0442\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0434\u0432\u043e\u0435 \u043a\u0430\u0436\u0434\u044b\u0435 12 \u043d\u043e\u0442, \u0442\u043e \u0435\u0441\u0442\u044c, \u0437\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u043f\u0435\u0440\u0432\u043e\u0439 \u043d\u043e\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0432\u0441\u0435\u0445 \u043d\u043e\u0442. 1.059463 — \u043a\u043e\u0440\u0435\u043d\u044c 12-\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0438\u0437 2.<\/p>\n
\u0414\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f .mid \u0432 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u0437 \u043f\u0430\u0440 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0432 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0430\u0440\u0435 — \u043d\u043e\u043c\u0435\u0440 \u043d\u043e\u0442\u044b, \u0432\u0442\u043e\u0440\u043e\u0439 — \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u0442\u0430\u0440\u0442\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043d\u043e\u0442\u044b. \u0414\u043b\u044f \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0441\u043b\u043e\u0432\u0430\u0440\u044c \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 .mid \u0444\u0430\u0439\u043b.<\/p>\n
\n\u041a\u043e\u0434 \u043d\u0430 \u043f\u0438\u0442\u043e\u043d\u0435<\/summary>\n
\n
import mido import struct   midi_file = mido.MidiFile('sound.mid') notes = [] curr_play = {} time = 0  for i, track in enumerate(midi_file.tracks):     print(f\"\u0414\u043e\u0440\u043e\u0436\u043a\u0430 {i}: {track.name if track.name else '<\u0431\u0435\u0437 \u0438\u043c\u0435\u043d\u0438>'}\")     for msg in track:         time += msg.time         if msg.type == 'note_on':             if msg.note not in curr_play:                 curr_play[msg.note] = time         elif msg.type == 'note_off':             if msg.note in curr_play:                 start = curr_play[msg.note]                 delta = time - start                 del curr_play[msg.note]                 notes.append([msg.note, start, delta]) notes.sort(key=lambda x: x[1]) print(len(notes)) binary = bytes() prev = 0  # \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u043e\u0442 m = {1: 0, 2: 1, 6: 2, 8: 3, 12: 4, 30: 5} for e in notes:     note, start, duration = e     start \/\/= 96     duration \/\/= 96     delta = start - prev     prev = start     binary += struct.pack('BB', note - 21, 35 + delta * len(m) + m[duration])  print(binary) print(prev \/ 96 * 24000)<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430<\/p>\n
let M = `C$B\/C)@*C0B\/C)@*C0B\/C)@*C0B\/C)@*C04%B\/C)@*C02%B\/C)@*C00%B\/C)@*C0\/%B\/C)@*C04%B\/C)@*C02%B\/C)@*C00%B\/C)@*C0\/%B\/C)@*C0(%B\/C)@*C0&%B\/C)@*C0$%B\/C)@*C0\/%B\/C)@*G04%E\/G)C*G02%E\/G)C*G00%E\/G)C*G0\/%E\/G)C*L04%L\/L)J)H)G*2%G\/G)E)C)E*0%E\/E)G)E)C*\/%B\/C)@*;\/\/'=)?)@)B)C)E)G)<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-443955","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=443955"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443955\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=443955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=443955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=443955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}