{"id":13493,"date":"2025-11-16T18:48:34","date_gmt":"2025-11-16T16:48:34","guid":{"rendered":"https:\/\/word.cbm.ua\/?p=13493"},"modified":"2025-11-17T23:20:33","modified_gmt":"2025-11-17T21:20:33","slug":"13493","status":"publish","type":"post","link":"https:\/\/word.cbm.ua\/?p=13493","title":{"rendered":"!_ v.3 \u0442\u0435\u0441\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 HTML \u0441 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043d\u0430 \u0438\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u043e\u043c \u0438 \u0440\u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0430 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0438\u0445. \u041d\u0430 \u0431\u0430\u0437\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u00ab\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0435 \u043f\u043e\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0441\u0435\u0434\u0435\u0439. \u0423\u0447\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0432\u044b\u0434\u0435\u043b\u0438\u0432 \u0438\u0445 \u0446\u0432\u0435\u0442\u0430\u043c\u0438.\u00bb \u0434\u043b\u044f \u044d\u043a\u0437\u0430\u043c\u0435\u043d\u0430."},"content":{"rendered":"\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-custom-2-color\"><strong>\u0422\u0430\u0431\u043b\u0438\u0446\u0443 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0443\u0442: <\/strong><\/mark><a href=\"https:\/\/word.cbm.ua\/?p=13494\">https:\/\/word.cbm.ua\/?p=13494<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>D:\\project_D_2025\\HTML\\HTML_\u043f\u043b\u0435\u0435\u0440_DE_\u0432_word.cbm.ua<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\">\u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0430\u0436\u043c\u0438 \u043d\u0438\u0436\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0435 \u0430\u0443\u0434\u0438\u043e <\/mark><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"70\" height=\"66\" src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2025\/11\/image-1.png\" alt=\"\" class=\"wp-image-13357\" style=\"width:29px;height:auto\"\/><\/figure>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\">, \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0448\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 <\/mark><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"214\" height=\"65\" src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2025\/11\/image.png\" alt=\"\" class=\"wp-image-13300\" style=\"width:67px;height:auto\"\/><\/figure>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\">\u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0432\u0430\u043c\u0438 \u0430\u0443\u0434\u0438\u043e \u0438 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435 \u043d\u0438\u0436\u0435 \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0441\u043b\u044b\u0448\u0438\u0448\u044c. <\/mark><\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-nv-c-2-color\">\u041f\u043e\u043a\u0430 \u0441\u043b\u0443\u0448\u0430\u0435\u0448\u044c \u0430\u0443\u0434\u0438\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0435\u043a\u0441\u0442. \u042f \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u044d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0432\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 (\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430 \u0438\u043b\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0444\u0440\u0430\u0437\u044b), \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\u044b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0433\u043e\u043b\u043e\u0441\u0430\u043c \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0447\u0442\u0443\u0442 \u044d\u0442\u043e\u0442 \u0442\u0435\u043a\u0441\u0442. \u0418 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u043e\u0432\u044b\u0448\u0430\u0442\u044c \u0432\u0430\u0448 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043d\u0435\u043c\u0435\u0446\u043a\u043e\u0433\u043e.<\/mark><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>de<\/p>\n\n\n\n<p>1<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2024\/11\/\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435-\u0441\u043e\u0441\u0435\u0434\u044f\u043c-\u043e-\u043f\u043e\u0441\u044b\u043b\u043a\u0435-20251109_2249.mp3\"><\/audio><\/figure>\n\n\n\n<p>2<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"http:\/\/word.cbm.ua\/wp-content\/uploads\/2025\/11\/\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435-\u0441\u043e\u0441\u0435\u0434\u044f\u043c-\u043e-\u043f\u043e\u0441\u044b\u043b\u043a\u0435-de-2-20251109_2327-1.mp3\"><\/audio><\/figure>\n\n\n\n<p>3<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2024\/11\/\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435-\u0441\u043e\u0441\u0435\u0434\u044f\u043c-\u043e-\u043f\u043e\u0441\u044b\u043b\u043a\u0435-de-3-20251109_2318.mp3\"><\/audio><\/figure>\n\n\n\n<p>4<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2024\/11\/\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435-\u0441\u043e\u0441\u0435\u0434\u044f\u043c-\u043e-\u043f\u043e\u0441\u044b\u043b\u043a\u0435-de-4-20251109_2310.mp3\"><\/audio><\/figure>\n\n\n\n<p>5<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2024\/11\/\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435-\u0441\u043e\u0441\u0435\u0434\u044f\u043c-\u043e-\u043f\u043e\u0441\u044b\u043b\u043a\u0435-de-5-20251109_2253.mp3\"><\/audio><\/figure>\n\n\n\n<p>6<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2024\/11\/\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435-\u0441\u043e\u0441\u0435\u0434\u044f\u043c-\u043e-\u043f\u043e\u0441\u044b\u043b\u043a\u0435-de-6-20251109_2354.mp3\"><\/audio><\/figure>\n\n\n\n<p>ru<\/p>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/word.cbm.ua\/wp-content\/uploads\/2024\/11\/\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435-\u0441\u043e\u0441\u0435\u0434\u044f\u043c-\u043e-\u043f\u043e\u0441\u044b\u043b\u043a\u0435-ru-20251109_2253.mp3\"><\/audio><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Nachricht an die Nachbarn. \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0435\u0434\u044f\u043c.<\/h2>\n\n\n\n<style>\n.result-table {\n    width: 100%;\n    border-collapse: collapse;\n    background: white;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.result-table th,\n.result-table td {\n    border: 1px solid #ddd;\n    padding: 12px;\n    text-align: left;\n    vertical-align: top;\n}\n\n.result-table th {\n    background-color: #4CAF50;\n    color: white;\n    font-weight: bold;\n}\n\n.result-table tr:nth-child(even) {\n    background-color: #f9f9f9;\n}\n\n.result-table tr:hover {\n    background-color: #f5f5f5;\n}\n\n.result-table td:first-child {\n    text-align: center;\n    font-weight: bold;\n    width: 60px;\n}\n.result-table t_1 {\n    \/* \u0426\u0432\u0435\u0442: \u042f\u0440\u043a\u043e-\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e (255, 0, 0, 1) *\/\n    color: rgba(255, 0, 0, 1); \n    \n    \/* \u0416\u0438\u0440\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 *\/\n    font-weight: bold; \n    \n    \/* \u041a\u0443\u0440\u0441\u0438\u0432 *\/\n    font-style: italic; \n    \n    \/* \u041f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 *\/\n    text-decoration: underline; \n}\n\nt_2 {\n    color: green;\n    font-weight: bold;\n}\n\nt_3 {\n    color: blue;\n    font-weight: bold;\n}\n\nt_4 {\n    color: orange;\n    font-weight: bold;\n}\n<\/style>\n\n<table class=\"result-table\">\n                    <thead>\n                        <tr>\n                            <th>\u2116<\/th>\n                            <th>\u0418\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a<\/th>\n                            <th>\u0420\u043e\u0434\u043d\u043e\u0439 \u044f\u0437\u044b\u043a<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n            \n                    <tr>\n                        <td>1<\/td>\n                        <td><t_3>Hallo<\/t_3> <t_1>zusammen<\/t_1>,<\/td>\n                        <td><t_3>\u041f\u0440\u0438\u0432\u0435\u0442<\/t_3> <t_1>\u0432\u0441\u0435\u043c<\/t_1>,<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>2<\/td>\n                        <td>heute soll mein Paket <t_1>geliefert<\/t_1> werden.<\/td>\n                        <td>\u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u044b\u043b\u043a\u0443.<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>3<\/td>\n                        <td>Ich habe <t_2>darum<\/t_2> <t_1>gebeten<\/t_1>, es ohne Code zu <t_3>\u00fcbergeben<\/t_3>.<\/td>\n                        <td>\u042f \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u043e\u0442\u0434\u0430\u043b\u0438 \u0431\u0435\u0437 \u043a\u043e\u0434\u0430.<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>4<\/td>\n                        <td>Sollte der Code trotzdem <t_4>erforderlich<\/t_4> sein,<\/td>\n                        <td>\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0436\u0435 \u043a\u043e\u0434 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442.<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>5<\/td>\n                        <td>bitte ich die Person, die mein Paket annehmen kann, diesen Code mitzuteilen:<\/td>\n                        <td>\u0422\u043e\u0433\u0434\u0430 \u043a\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u043c\u043e\u0439 \u0437\u0430\u043a\u0430\u0437 \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u0435 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434.<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>6<\/td>\n                        <td><\/td>\n                        <td><\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>7<\/td>\n                        <td>***678<\/td>\n                        <td>***678<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>8<\/td>\n                        <td><\/td>\n                        <td><\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>9<\/td>\n                        <td>Das Paket soll heute ungef\u00e4hr zwischen 19 und 20 Uhr geliefert werden.<\/td>\n                        <td>\u041f\u043e\u0441\u044b\u043b\u043a\u0443 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441 7 \u0434\u043e 8 \u0432\u0435\u0447\u0435\u0440\u0430.<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>10<\/td>\n                        <td>Es kann sein, dass ich es nicht rechtzeitig schaffe.<\/td>\n                        <td>\u042f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0443\u0441\u043f\u0435\u044e. (\u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0447\u0442\u043e \u044f \u043d\u0435 \u0441\u0432\u043e\u0435\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0443\u0441\u043f\u0435\u044e (\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f) )<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>11<\/td>\n                        <td>Deshalb bitte ich euch, mein Paket anzunehmen.<\/td>\n                        <td>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0448\u0443 \u044f \u0432\u0430\u0441 \u043c\u043e\u044e \u043f\u043e\u0441\u044b\u043b\u043a\u0443 \u043f\u0440\u0438\u043d\u044f\u0442\u044c.<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>12<\/td>\n                        <td>Vielen Dank im Voraus f\u00fcr eure Hilfe!<\/td>\n                        <td>\u0417\u0430\u0440\u0430\u043d\u0435\u0435 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0412\u0430\u0448\u0443 \u043f\u043e\u043c\u043e\u0449\u044c.<\/td>\n                    <\/tr>\n                \n                    <tr>\n                        <td>13<\/td>\n                        <td>Ich w\u00fcnsche euch allen einen sch\u00f6nen Tag.<\/td>\n                        <td>\u042f \u0436\u0435\u043b\u0430\u044e \u0432\u0441\u0435\u043c \u0432\u0441\u0435\u043c \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f.<\/td>\n                    <\/tr>\n                \n                    <\/tbody>\n                <\/table>\n\n\n\n<p><\/p>\n\n\n\n<style>\n\t#audio-menu-button {\n\t\tposition: fixed;\n\t\ttop: 20px;\n\t\tleft: 20px;\n\t\tz-index: 9999;\n\t}\n\n\t#audio-menu-button button {\n\t\twidth: 50px;\n\t\theight: 50px;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t\tbackground: #2271b1;\n\t\tcolor: white;\n\t\tcursor: pointer;\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n\t\ttransition: all 0.3s ease;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 0;\n\t}\n\n\t#audio-menu-button button:hover {\n\t\tbackground: #135e96;\n\t\ttransform: scale(1.1);\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n\t}\n\n\t#audio-menu-button button:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\t#audio-menu-button button svg {\n\t\tpointer-events: none;\n\t}\n\t#audio-control-panel {\n\t\tposition: fixed;\n\t\tbottom: 160px;\n\t\tleft: 20px;\n\t\tflex-direction: column;\n\t\tz-index: 9999;\n\t\tdisplay: flex;\n\t\tgap: 5px; \n\t\talign-items: flex-start;  \/* \u0431\u044b\u043b\u043e: center *\/\n\t}\n\n\n\t#audio-control-panel > div {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 5px;\n\t\talign-items: center;\n\t}\n\n\t\n\t#audio-control-panel button {\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t\tbackground: #2271b1;\n\t\tcolor: white;\n\t\tcursor: pointer;\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n\t\ttransition: all 0.3s ease;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 0;\n\t}\n\n\t#audio-control-panel button:hover {\n\t\tbackground: #135e96;\n\t\ttransform: scale(1.1);\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n\t}\n\t#audio-control-panel button:active {\n\t\ttransform: scale(0.95);\n\t}\n\t#audio-control-panel button svg {\n\t\tpointer-events: none;\n\t}\n\t#audio-control-panel button:disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t\/* \u041f\u0430\u043d\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\u043e\u0432 *\/\n\t#audio-file-switcher {\n\t\tposition: fixed;\n\t\tbottom: 215px;\n\t\tleft: 20px;\n\t\tz-index: 9999;\n\t\tdisplay: flex;\n\t\tgap: 5px;\n\t\talign-items: center;\n\t}\n\n\t#audio-file-switcher button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t\tbackground: #2271b1;\n\t\tcolor: white;\n\t\tcursor: pointer;\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n\t\ttransition: all 0.3s ease;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 0;\n\t\tfont-size: 20px;\n\t}\n\n\t#audio-file-switcher button:hover {\n\t\tbackground: #135e96;\n\t\ttransform: scale(1.1);\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n\t}\n\n\t#audio-file-switcher button:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\t#audio-file-switcher button:disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\n\n\t#speed-display {\n\t\tbackground: white;\n\t\tcolor: #2271b1;\n\t\tpadding: 8px 12px;\n\t\tborder-radius: 20px;\n\t\tfont-weight: bold;\n\t\tfont-size: 14px;\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n\t\tmin-width: 45px;\n\t\ttext-align: center;\n\t}\n\t#audio-menu {\n\t\tposition: fixed;\n\t\ttop: 80px;\n\t\tleft: 20px;\n\t\tdisplay: none;\n\t\tbackground: white;\n\t\tborder-radius: 8px;\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n\t\toverflow: hidden;\n\t\tmin-width: 150px;\n\t\tz-index: 9998;\n\t}\n\t#audio-menu.show {\n\t\tdisplay: block;\n\t}\n\t.menu-item {\n\t\tpadding: 12px 16px;\n\t\tcursor: pointer;\n\t\tborder-bottom: 1px solid #e0e0e0;\n\t\tcolor: #333;\n\t\tfont-size: 14px;\n\t\ttransition: background 0.2s;\n\t}\n\t.menu-item:last-child {\n\t\tborder-bottom: none;\n\t}\n\t.menu-item:hover {\n\t\tbackground: #f5f5f5;\n\t}\n\n\t\/* \u041d\u043e\u0432\u044b\u0439 \u0431\u043b\u043e\u043a \u0432\u043d\u0438\u0437\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/\n\t#bottom-info-block {\n\t\tposition: fixed;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tbackground: #2271b1;\n\t\tcolor: white;\n\t\tpadding: 15px 20px;\n\t\tdisplay: flex;\n\t\t\/* flex-wrap: wrap;  \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \"\ud83d\udd01\" \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443  *\/\n\t\talign-items: center;\n\t\tgap: 15px;\n\t\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);\n\t\tz-index: 9998;\n\t}\n\n\t.bottom-action-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground: rgba(255, 255, 255, 0.2);\n\t\tborder: 2px solid white;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: all 0.3s ease;\n\t\tflex-shrink: 0;\n\t}\n\n\t.bottom-action-button:hover {\n\t\tbackground: rgba(255, 255, 255, 0.3);\n\t\ttransform: scale(1.05);\n\t}\n\n\t.bottom-action-button:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\t#audio-timeline-container {\n\t\t\/* flex-basis: 100%;   \u0417\u0430\u0439\u043c\u0435\u0442 \u0432\u0441\u044e \u0441\u0442\u0440\u043e\u043a\u0443 *\/\n\t\tflex: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t}\n\n\t#audio-timeline {\n\t\tflex: 1;\n\t\theight: 6px;\n\t\tbackground: rgba(255, 255, 255, 0.3);\n\t\tborder-radius: 3px;\n\t\tcursor: pointer;\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\t#audio-timeline-progress {\n\t\theight: 100%;\n\t\tbackground: white;\n\t\tborder-radius: 3px;\n\t\twidth: 0%;\n\t\ttransition: width 0.1s linear;\n\t\tposition: relative;\n\t}\n\n\t#audio-timeline-thumb {\n\t\tposition: absolute;\n\t\tright: -8px;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tbackground: white;\n\t\tborder-radius: 50%;\n\t\tbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n\t\tcursor: pointer;\n\t}\n\n\t#audio-time-display {\n\t\tfont-size: 14px;\n\t\tfont-weight: normal;\n\t\twhite-space: nowrap;\n\t\tmin-width: 100px;\n\t\ttext-align: right;\n\t}\n\n\t\/* \u041a\u043d\u043e\u043f\u043a\u0438 \u043c\u0435\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438 *\/\n\t.timestamp-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground: rgba(255, 255, 255, 0.2);\n\t\tborder: 2px solid white;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: all 0.3s ease;\n\t\tflex-shrink: 0;\n\t\tfont-weight: bold;\n\t\tfont-size: 16px;\n\t\tcolor: white;\n\t}\n\n\t.timestamp-button:hover {\n\t\tbackground: rgba(255, 255, 255, 0.3);\n\t\ttransform: scale(1.05);\n\t}\n\n\t.timestamp-button:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\t\/* \u0410\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u044f *\/\n\t.loop-button-active {\n\t\tbackground: rgba(255, 91, 97, 0.5) !important;\n\t\tborder: 3px solid white !important;\n\t\tbox-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;\n\t}\n\n\t\/* \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043a\u0438 \u043d\u0430 timeline *\/\n\t.timeline-marker {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: 3px;\n\t\theight: 100%;\n\t\tz-index: 10;\n\t\tpointer-events: none;\n\t\ttransition: left 0.2s ease;\n\t}\n\n\t.timeline-marker.start {\n\t\tbackground: #51cf66;\n\t}\n\n\t.timeline-marker.end {\n\t\tbackground: #ff6b6b;\n\t}\n\n\t\/* \u041c\u0435\u0442\u043a\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0434 marker *\/\n\t.marker-label {\n\t\tposition: absolute;\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\tbackground: rgba(0, 0, 0, 0.8);\n\t\tcolor: white;\n\t\tpadding: 2px 6px;\n\t\tborder-radius: 3px;\n\t\tfont-size: 10px;\n\t\twhite-space: nowrap;\n\t\tmargin-bottom: 5px;\n\t\tpointer-events: none;\n\t}\n\n\n\t\/* \u041d\u043e\u0432\u044b\u0439 \u0431\u043b\u043e\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c\" \u0438 \"\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c\" \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u0435\u043c *\/\n\t#data-action-block {\n\t\tposition: fixed;\n\t\tbottom: 70px;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tbackground: #2271b1;\n\t\tcolor: white;\n\t\tpadding: 15px 20px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 15px;\n\t\tbox-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);\n\t\tz-index: 9997;\n\t}\n\n\t#insert-data-textarea {\n\t\tflex: 1;\n\t\tpadding: 8px;\n\t\tborder: 1px solid #ddd;\n\t\tborder-radius: 4px;\n\t\tfont-size: 14px;\n\t\tresize: none;\n\t\tmin-width: 200px;\n\t\tbackground: rgba(255, 255, 255, 0.9);\n\t\tmin-height: 40px;\n\t}\n\n\t#insert-data-btn {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground: rgba(255, 255, 255, 0.2);\n\t\tborder: 2px solid white;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: all 0.3s ease;\n\t\tflex-shrink: 0;\n\t\tfont-size: 16px;\n\t\tcolor: white;\n\t}\n\n\t#insert-data-btn:hover {\n\t\tbackground: rgba(255, 255, 255, 0.3);\n\t\ttransform: scale(1.05);\n\t}\n\n\t#insert-data-btn:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\t#read-data-btn {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground: rgba(255, 255, 255, 0.2);\n\t\tborder: 2px solid white;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: all 0.3s ease;\n\t\tflex-shrink: 0;\n\t\tfont-size: 16px;\n\t\tcolor: white;\n\t}\n\n\t#read-data-btn:hover {\n\t\tbackground: rgba(255, 255, 255, 0.3);\n\t\ttransform: scale(1.05);\n\t}\n\n\t#read-data-btn:active {\n\t\ttransform: scale(0.95);\n\t}\n\n\n\t\/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n\t@media (max-width: 768px) {\n\t\t#audio-menu-button {\n\t\t\ttop: 10px;\n\t\t\tleft: 10px;\n\t\t}\n\n\t\t#audio-menu-button button {\n\t\t\twidth: 45px;\n\t\t\theight: 45px;\n\t\t}\n\t\t\n\t\t\n\t\t#audio-control-panel {\n\t\t\tdisplay: flex;\n\t\t\tbottom: 70px;\n\t\t\tleft: 10px;\n\t\t\tflex-direction: flex-start;  \/* \u0431\u044b\u043b\u043e: center *\/\n\t\t\tgap: 6px;\n\t\t}\n\n\t\t#audio-control-panel > div {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tgap: 6px;\n\t\t\talign-items: center;\n\t\t}\n\t\t\n\t\t#audio-control-panel button {\n\t\t\twidth: 30px;\n\t\t\theight: 45px;\n\t\t}\n\t\t\n\t\t#speed-display {\n\t\t\tfont-size: 12px;\n\t\t\tpadding: 6px 1px;\n\t\t\tmin-width: 40px;\n\t\t}\n\t\t\n\t\t#audio-menu {\n\t\t\ttop: 65px;\n\t\t\tleft: 10px;\n\t\t}\n\t\t\n\t\t#bottom-info-block {\n\t\t\tpadding: 12px 15px;\n\t\t\tgap: 10px;\n\t\t}\n\t\t\n\t\t.bottom-action-button {\n\t\t\twidth: 35px;\n\t\t\theight: 35px;\n\t\t}\n\t\t\n\t\t#audio-time-display {\n\t\t\tfont-size: 12px;\n\t\t\tmin-width: 8px;\n\t\t}\n\t}\n\t\n\t\/* \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 *\/\n\t.row-get-button,\n\t.row-insert-button {\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tbackground: #2271b1;\n\t\tcolor: white;\n\t\tborder: none;\n\t\tborder-radius: 4px;\n\t\tcursor: pointer;\n\t\tfont-size: 16px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: all 0.2s ease;\n\t}\n\t.row-get-button:hover,\n\t.row-insert-button:hover {\n\t\tbackground: #135e96;\n\t\ttransform: scale(1.05);\n\t}\n\t.row-get-button:active,\n\t.row-insert-button:active {\n\t\ttransform: scale(0.95);\n\t}\n\t.row-counter {\n\t\tfont-size: 12px;\n\t\tcolor: #666;\n\t\tmargin: 0 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t}\n\n<\/style>\n\n<script>\n\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a\n(function() {\n    \/\/ ==================== \u041a\u041e\u041d\u0421\u0422\u0410\u041d\u0422\u042b ====================\n    const DEFAULT_PLAYBACK_SPEED = 1.0;\n    const SPEED_STEP = 0.25;\n    const MIN_SPEED = 0.25;\n    const MAX_SPEED = 3.0;\n    const SKIP_SECONDS = 2;\n\tconst ENDMARKERTIME_\u043f\u043e\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e = null;\n    \/\/ ===================================================\n    \n    \/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f\n    let playbackSpeed = DEFAULT_PLAYBACK_SPEED;\n    \n    \/\/ \u041c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 (\u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445)\n    let startMarkerTime = 0;\n    \n\tlet endMarkerTime = ENDMARKERTIME_\u043f\u043e\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \/\/null; \/\/ null \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043a\u043e\u043d\u0435\u0446 \u0430\u0443\u0434\u0438\u043e\n\t\n\tlet loopBetweenMarkers = false; \n\t\n\t\/\/ \u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n\tconst cellDataStorage = {};\n    \n    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u0435\u043d\u044e \u0432\u0432\u0435\u0440\u0445\u0443\n    const menuButtonContainer = document.createElement('div');\n    menuButtonContainer.id = 'audio-menu-button';\n    menuButtonContainer.innerHTML = `\n        <button id=\"menu-audio-btn\" title=\"\u041c\u0435\u043d\u044e\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z\"\/>\n            <\/svg>\n        <\/button>\n    `;\n    \n    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0435\u043d\u044e\n    const menu = document.createElement('div');\n    menu.id = 'audio-menu';\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-action=\"settings\">\u2699\ufe0f \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/div>\n        <div class=\"menu-item\" data-action=\"speed\">\ud83c\udf9a\ufe0f \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c<\/div>\n        <div class=\"menu-item\" data-action=\"reset-markers\">\ud83d\udd04 \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043c\u0435\u0442\u043a\u0438<\/div>\n    `;\n    \n    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0432\u043d\u0438\u0437\u0443 \u0441\u043b\u0435\u0432\u0430\n    const controlPanel = document.createElement('div');\n    controlPanel.id = 'audio-control-panel';\n    controlPanel.innerHTML = `\n        <div>\n\t\t<button id=\"prev-audio-btn\" title=\"\u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0444\u0430\u0439\u043b\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z\"\/>\n            <\/svg>\n        <\/button>\n        <button id=\"next-audio-btn\" title=\"\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z\"\/>\n            <\/svg>\n        <\/button>\n\t\t<\/div>\n\t\t<div>\n\t\t<button id=\"pause-audio-btn\" title=\"\u041f\u0430\u0443\u0437\u0430\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\"\/>\n            <\/svg>\n        <\/button>\n        <button id=\"play-audio-btn\" style=\"display: none;\" title=\"\u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M8 5v14l11-7z\"\/>\n            <\/svg>\n        <\/button>\n        <button id=\"rewind-audio-btn\" title=\"\u041d\u0430\u0437\u0430\u0434 2 \u0441\u0435\u043a\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z\"\/>\n                <text x=\"9\" y=\"16\" font-size=\"8\" fill=\"currentColor\" font-weight=\"bold\">2<\/text>\n            <\/svg>\n        <\/button>\n        <button id=\"forward-audio-btn\" title=\"\u0412\u043f\u0435\u0440\u0451\u0434 2 \u0441\u0435\u043a\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z\"\/>\n                <text x=\"10\" y=\"16\" font-size=\"8\" fill=\"currentColor\" font-weight=\"bold\">2<\/text>\n            <\/svg>\n        <\/button>\n\t\t<\/div>\n\t\t<div>\n\t\t<button id=\"loop-between-markers-btn\" title=\"\u041f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u043a\u0430\u043c\u0438\">\n\t\t\t\ud83d\udd01\n\t\t<\/button>\n\t\t\n        <button id=\"speed-down-btn\" title=\"\u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M7 11v2h10v-2H7z\"\/>\n            <\/svg>\n        <\/button>\n\t\t\n        <button id=\"speed-up-btn\" title=\"\u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7z\"\/>\n            <\/svg>\n        <\/button>\n\t\t\n        <div id=\"speed-display\">1.00x<\/div>\n\t\t<\/div>\n    `;\n    \n    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c\" \u0438 \"\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c\" \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u0435\u043c\n    const dataActionBlock = document.createElement('div');\n    dataActionBlock.id = 'data-action-block';\n    dataActionBlock.innerHTML = `\n        <textarea id=\"insert-data-textarea\" placeholder=\"\u0417\u0434\u0435\u0441\u044c \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0444\u0430\u0439\u043b\u0435 \u0438 \u043c\u0435\u0442\u043a\u0430\u0445 \u0432\u0440\u0435\u043c\u0435\u043d\u0438...\"><\/textarea>\n        <button id=\"insert-data-btn\" title=\"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c\">\ud83d\udccb<\/button>\n        <button id=\"read-data-btn\" title=\"\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c\">\ud83d\udcd6<\/button>\n    `;\n    \n    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0438\u0436\u043d\u0438\u0439 \u0431\u043b\u043e\u043a\n    const bottomBlock = document.createElement('div');\n    bottomBlock.id = 'bottom-info-block';\n    bottomBlock.innerHTML = `\n        <button class=\"timestamp-button\" id=\"set-start-marker-btn\" title=\"\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043c\u0435\u0442\u043a\u0443\">\n            [\n        <\/button>\n        <button class=\"timestamp-button\" id=\"set-end-marker-btn\" title=\"\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043c\u0435\u0442\u043a\u0443\">\n            ]\n        <\/button>\n        <div id=\"audio-timeline-container\">\n            <div id=\"audio-time-display\">0:00 \/ 0:00<\/div>\n            <div id=\"audio-timeline\">\n                <div class=\"timeline-marker start\" id=\"start-marker\">\n                    <div class=\"marker-label\">0:00<\/div>\n                <\/div>\n                <div class=\"timeline-marker end\" id=\"end-marker\">\n                    <div class=\"marker-label\">0:00<\/div>\n                <\/div>\n                <div id=\"audio-timeline-progress\">\n                    <div id=\"audio-timeline-thumb\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    `;\n    \n    \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\n    document.body.appendChild(menuButtonContainer);\n    document.body.appendChild(menu);\n    document.body.appendChild(controlPanel);\n    document.body.appendChild(dataActionBlock);\n    document.body.appendChild(bottomBlock);\n    \n    console.log('Audio controls initialized'); \/\/ \u041e\u0442\u043b\u0430\u0434\u043a\u0430\n    \n    \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\n    initializeTimeline();\n    \n    \/\/ \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f\n    let currentAudio = null;\n    let isDragging = false;\n    let allAudioElements = [];\n    let currentAudioIndex = 0;\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u043a \u043d\u0430 timeline\n    function updateMarkers() {\n\t\tconsole.log(\"tets\");\n        if (!currentAudio || !currentAudio.duration) return;\n        \n        \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c endMarkerTime \u0432 \u043a\u043e\u043d\u0435\u0446 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438\n\t\t\/\/if (endMarkerTime === null) {\n\t\tif (endMarkerTime === ENDMARKERTIME_\u043f\u043e\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) {\n\t\t\t\/\/alert('endMarkerTime = ' + endMarkerTime);\n            endMarkerTime = currentAudio.duration - 0.3; \/\/\u0435\u0441\u043b\u0438 \u043d\u0435 \u043e\u0442\u043d\u044f\u0442\u044c \u0445\u043e\u0442\u044f\u0431\u044b 0.1 \u043d\u0435\u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u0430 \u043a\u0440\u0430\u0441\u043d\u043e\u0439 \u0447\u0435\u0440\u0442\u043e\u0447\u043a\u0438.\n\t\t\tupdateMarkers();\n\t\t\t\/\/alert('updateMarkers = ' + endMarkerTime);\n        }\n        \n        const startMarker = document.getElementById('start-marker');\n        const endMarker = document.getElementById('end-marker');\n        const startLabel = startMarker.querySelector('.marker-label');\n        const endLabel = endMarker.querySelector('.marker-label');\n        \n        \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0435\u0442\u043a\u0438 (\u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445)\n        const startPercent = (startMarkerTime \/ currentAudio.duration) * 100;\n        startMarker.style.left = startPercent + '%';\n        startLabel.textContent = formatTime(startMarkerTime);\n        \n        \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043c\u0435\u0442\u043a\u0438 (\u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445)\n        const endPercent = (endMarkerTime \/ currentAudio.duration) * 100;\n        endMarker.style.left = endPercent + '%';\n        endLabel.textContent = formatTime(endMarkerTime);\n    }\n    \n    \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u0435\u0442\u043e\u043a\n    const setStartBtn = document.getElementById('set-start-marker-btn');\n    const setEndBtn = document.getElementById('set-end-marker-btn');\n    \n    if (setStartBtn) {\n        setStartBtn.addEventListener('click', function() {\n            if (currentAudio) {\n                startMarkerTime = currentAudio.currentTime;\n                updateMarkers();\n                console.log('\u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u0435\u0442\u043a\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u043d\u0430:', formatTime(startMarkerTime));\n            }\n        });\n    }\n    \n    if (setEndBtn) {\n        setEndBtn.addEventListener('click', function() {\n            if (currentAudio) {\n                endMarkerTime = currentAudio.currentTime;\n                updateMarkers();\n                console.log('\u041a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u043c\u0435\u0442\u043a\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u043d\u0430:', formatTime(endMarkerTime));\n            }\n        });\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438\n    function formatTime(seconds) {\n        if (isNaN(seconds) || !isFinite(seconds)) return '0:00.000';\n        const mins = Math.floor(seconds \/ 60);\n        const secs = Math.floor(seconds % 60);\n        const ms = Math.floor((seconds % 1) * 1000);\n        return `${mins}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`;\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u0437 \u0441\u0442\u0440\u043e\u043a\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \"M:SS.mmm\"\n    function parseTime(timeStr) {\n        if (!timeStr) return null;\n        \n        \/\/ \u0424\u043e\u0440\u043c\u0430\u0442: M:SS.mmm \u0438\u043b\u0438 MM:SS.mmm\n        const parts = timeStr.split(':');\n        if (parts.length !== 2) return null;\n        \n        const mins = parseInt(parts[0], 10);\n        const secondsParts = parts[1].split('.');\n        \n        if (secondsParts.length !== 2) return null;\n        \n        const secs = parseInt(secondsParts[0], 10);\n        const ms = parseInt(secondsParts[1], 10);\n        \n        if (isNaN(mins) || isNaN(secs) || isNaN(ms)) return null;\n        \n        return mins * 60 + secs + ms \/ 1000;\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430\n    function updateTimeline() {\n        if (!currentAudio || isDragging) return;\n        \n        const progress = (currentAudio.currentTime \/ currentAudio.duration) * 100 || 0;\n        const progressBar = document.getElementById('audio-timeline-progress');\n        const timeDisplay = document.getElementById('audio-time-display');\n        \n        if (progressBar) {\n            progressBar.style.width = progress + '%';\n        }\n        \n        if (timeDisplay) {\n            const current = formatTime(currentAudio.currentTime);\n            const total = formatTime(currentAudio.duration);\n            timeDisplay.textContent = `${current} \/ ${total}`;\n        }\n        \n        \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043a\u0438\n        updateMarkers();\n\t\t\n\t\t\/\/ \u0417\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u043a\u0430\u043c\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438\n\t\tif (loopBetweenMarkers && currentAudio) {\n\t\t\tconst minTime = Math.min(startMarkerTime, endMarkerTime || currentAudio.duration);\n\t\t\tconst maxTime = Math.max(startMarkerTime, endMarkerTime || currentAudio.duration);\n\n\t\t\tif (currentAudio.currentTime > maxTime) {\n\t\t\t\tcurrentAudio.currentTime = minTime;\n\t\t\t}\n\t\t}\n\t\t\n    }\n    \n    \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0437\u0443\u043d\u043a\u0430\n    function initializeTimeline() {\n        const timeline = document.getElementById('audio-timeline');\n        if (!timeline) {\n            console.error('Timeline element not found!');\n            return;\n        }\n        \n        \/\/ \u041a\u043b\u0438\u043a \u043f\u043e \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0443\n        timeline.addEventListener('click', function(e) {\n            if (!currentAudio) {\n                console.log('No audio element active');\n                return;\n            }\n            \n            const rect = timeline.getBoundingClientRect();\n            const percent = (e.clientX - rect.left) \/ rect.width;\n            currentAudio.currentTime = percent * currentAudio.duration;\n            updateTimeline();\n        });\n        \n        \/\/ \u041f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435\n        const thumb = document.getElementById('audio-timeline-thumb');\n        \n        if (!thumb) {\n            console.error('Thumb element not found!');\n            return;\n        }\n        \n        function startDrag(e) {\n            if (!currentAudio) return;\n            isDragging = true;\n            e.preventDefault();\n        }\n        \n        function drag(e) {\n            if (!isDragging || !currentAudio) return;\n            \n            const rect = timeline.getBoundingClientRect();\n            let clientX = e.clientX || (e.touches && e.touches[0].clientX);\n            let percent = (clientX - rect.left) \/ rect.width;\n            percent = Math.max(0, Math.min(1, percent));\n            \n            currentAudio.currentTime = percent * currentAudio.duration;\n            updateTimeline();\n        }\n        \n        function stopDrag() {\n            isDragging = false;\n        }\n        \n        thumb.addEventListener('mousedown', startDrag);\n        document.addEventListener('mousemove', drag);\n        document.addEventListener('mouseup', stopDrag);\n        \n        \/\/ Touch events \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445\n        thumb.addEventListener('touchstart', function(e) {\n            startDrag(e.touches[0]);\n        });\n        \n        document.addEventListener('touchmove', function(e) {\n            if (isDragging) {\n                drag(e.touches[0]);\n            }\n        });\n        \n        document.addEventListener('touchend', stopDrag);\n        \n        console.log('Timeline initialized successfully');\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0430\u0443\u0434\u0438\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445\n    function updateAllAudioSpeeds() {\n        const audioElements = document.querySelectorAll('audio');\n        audioElements.forEach(audio => {\n            audio.playbackRate = playbackSpeed;\n        });\n        \n        \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438\n        const speedDisplay = document.getElementById('speed-display');\n        if (speedDisplay) {\n            speedDisplay.textContent = playbackSpeed.toFixed(2) + 'x';\n        }\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0444\u0430\u0439\u043b\u0435\n    function updateFileInfo() {\n        if (!currentAudio || allAudioElements.length === 0) {\n            document.getElementById('audio-file-number').textContent = '-';\n            return;\n        }\n        \n        const index = allAudioElements.indexOf(currentAudio);\n        currentAudioIndex = index !== -1 ? index : 0;\n        const fileNumber = currentAudioIndex + 1;\n        \n        document.getElementById('audio-file-number').textContent = fileNumber;\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\n    function switchToPreviousAudio() {\n        if (allAudioElements.length === 0) return;\n        \n        if (currentAudio) {\n            currentAudio.pause();\n        }\n        \n        currentAudioIndex = (currentAudioIndex - 1 + allAudioElements.length) % allAudioElements.length;\n        currentAudio = allAudioElements[currentAudioIndex];\n        \n        startMarkerTime = 0;\n        endMarkerTime = ENDMARKERTIME_\u043f\u043e\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e;\n        \n        updateMarkers();\n        updateFileInfo();\n        updateButtons();\n        \n        currentAudio.currentTime = 0;\n        currentAudio.play();\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\n    function switchToNextAudio() {\n        if (allAudioElements.length === 0) return;\n        \n        if (currentAudio) {\n            currentAudio.pause();\n        }\n        \n        currentAudioIndex = (currentAudioIndex + 1) % allAudioElements.length;\n        currentAudio = allAudioElements[currentAudioIndex];\n        \n        startMarkerTime = 0;\n        endMarkerTime = ENDMARKERTIME_\u043f\u043e\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e;\n        \n        updateMarkers();\n        updateFileInfo();\n        updateButtons();\n        \n        currentAudio.currentTime = 0;\n        currentAudio.play();\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e\n    function trackAudioPlayback() {\n        const audioElements = document.querySelectorAll('audio');\n        allAudioElements = Array.from(audioElements);\n        \n        console.log('Found ' + audioElements.length + ' audio elements');\n        \n        audioElements.forEach(audio => {\n            \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0430\u0443\u0434\u0438\u043e\n            audio.playbackRate = playbackSpeed;\n            \n            \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0441\u0442\u0430\u0440\u044b\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438\n            audio.removeEventListener('play', handlePlay);\n            audio.removeEventListener('pause', handlePause);\n            audio.removeEventListener('ended', handleEnded);\n            audio.removeEventListener('timeupdate', updateTimeline);\n            audio.removeEventListener('loadedmetadata', updateTimeline);\n            \n            \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438\n            audio.addEventListener('play', handlePlay);\n            audio.addEventListener('pause', handlePause);\n            audio.addEventListener('ended', handleEnded);\n            audio.addEventListener('timeupdate', updateTimeline);\n            audio.addEventListener('loadedmetadata', updateTimeline);\n        });\n        \n        \/\/ \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0430\u0443\u0434\u0438\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438\n        if (audioElements.length > 0) {\n            updateButtons();\n        }\n    }\n    \n    function handlePlay(e) {\n        currentAudio = e.target;\n        currentAudio.playbackRate = playbackSpeed;\n        console.log('Audio playing');\n        \n        updateButtons();\n        updateTimeline();\n        updateFileInfo();\n    }\n    \n    function handlePause(e) {\n        if (currentAudio === e.target) {\n            console.log('Audio paused');\n            updateButtons();\n        }\n    }\n    \n    function handleEnded(e) {\n        if (currentAudio === e.target) {\n            console.log('Audio ended, looping...');\n            \/\/ \u041f\u0435\u0440\u0435\u043c\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435\n            currentAudio.currentTime = 0;\n            currentAudio.play();\n        }\n    }\n    \n    \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043d\u043e\u043f\u043e\u043a\n    function updateButtons() {\n        const pauseBtn = document.getElementById('pause-audio-btn');\n        const playBtn = document.getElementById('play-audio-btn');\n        const rewindBtn = document.getElementById('rewind-audio-btn');\n        const forwardBtn = document.getElementById('forward-audio-btn');\n        const speedDownBtn = document.getElementById('speed-down-btn');\n        const speedUpBtn = document.getElementById('speed-up-btn');\n        const speedDisplay = document.getElementById('speed-display');\n        const menuBtn = document.getElementById('menu-audio-btn');\n        \n        \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\n        const hasAudio = document.querySelectorAll('audio').length > 0;\n        \n        if (!hasAudio) {\n            \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0430\u0443\u0434\u0438\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043d\u043e \u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438\n            [pauseBtn, playBtn, rewindBtn, forwardBtn, speedDownBtn, speedUpBtn].forEach(btn => {\n                if (btn) btn.disabled = true;\n            });\n            playBtn.style.display = 'flex';\n            pauseBtn.style.display = 'none';\n            return;\n        }\n        \n        \/\/ \u0410\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438\n        [pauseBtn, playBtn, rewindBtn, forwardBtn, speedDownBtn, speedUpBtn].forEach(btn => {\n            if (btn) btn.disabled = false;\n        });\n        \n        if (currentAudio && !currentAudio.paused) {\n            pauseBtn.style.display = 'flex';\n            playBtn.style.display = 'none';\n        } else {\n            pauseBtn.style.display = 'none';\n            playBtn.style.display = 'flex';\n        }\n        \n        console.log('Buttons updated, currentAudio:', !!currentAudio);\n    }\n    \n    \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043a\u043d\u043e\u043f\u043e\u043a\n    document.addEventListener('click', function(e) {\n        const menu = document.getElementById('audio-menu');\n        \n        \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u043c\u0435\u043d\u044e\n        if (e.target.closest('#menu-audio-btn')) {\n            menu.classList.toggle('show');\n            return;\n        }\n        \n        \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043c\u0435\u043d\u044e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432\u043d\u0435 \u0435\u0433\u043e\n        if (!e.target.closest('#audio-menu') && !e.target.closest('#menu-audio-btn')) {\n            menu.classList.remove('show');\n        }\n        \n        \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u0435\u043d\u044e\n        const menuItem = e.target.closest('.menu-item');\n        if (menuItem) {\n            const action = menuItem.dataset.action;\n            menu.classList.remove('show');\n            \n            if (action === 'settings') {\n                alert('\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438');\n            } else if (action === 'speed') {\n                alert('\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f');\n            } else if (action === 'reset-markers') {\n                \/\/ \u0421\u0431\u0440\u043e\u0441 \u043c\u0435\u0442\u043e\u043a \u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\n                startMarkerTime = 0;\n                endMarkerTime = ENDMARKERTIME_\u043f\u043e\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \/\/null;\n\t\t\t\t\n                updateMarkers();\n                console.log('\u041c\u0435\u0442\u043a\u0438 \u0441\u0431\u0440\u043e\u0448\u0435\u043d\u044b');\n            }\n            return;\n        }\n        \n        \/\/ \u041a\u043d\u043e\u043f\u043a\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\u043e\u0432\n        if (e.target.closest('#prev-audio-btn')) {\n            console.log('Previous audio button clicked');\n            switchToPreviousAudio();\n        }\n        \n        if (e.target.closest('#next-audio-btn')) {\n            console.log('Next audio button clicked');\n            switchToNextAudio();\n        }\n        \n        if (e.target.closest('#pause-audio-btn')) {\n            console.log('Pause button clicked');\n            if (currentAudio) {\n                currentAudio.pause();\n            } else {\n                \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 currentAudio, \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u0430\u0443\u0434\u0438\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\n                const firstAudio = document.querySelector('audio');\n                if (firstAudio) {\n                    firstAudio.pause();\n                }\n            }\n        }\n        \n        if (e.target.closest('#play-audio-btn')) {\n            console.log('Play button clicked');\n            if (currentAudio) {\n                currentAudio.play();\n\t\t\t\t\/\/updateMarkers();\n            } else {\n                \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 currentAudio, \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u043f\u0435\u0440\u0432\u044b\u0439 \u0430\u0443\u0434\u0438\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\n                const firstAudio = document.querySelector('audio');\n                if (firstAudio) {\n                    currentAudio = firstAudio;\n                    currentAudio.play();\n\t\t\t\t\t\/\/updateMarkers();\n                }\n            }\n        }\n        \n        if (e.target.closest('#rewind-audio-btn')) {\n            console.log('Rewind button clicked');\n            if (currentAudio) {\n                currentAudio.currentTime = Math.max(0, currentAudio.currentTime - SKIP_SECONDS);\n            }\n        }\n        \n        if (e.target.closest('#forward-audio-btn')) {\n            console.log('Forward button clicked');\n            if (currentAudio) {\n                currentAudio.currentTime = Math.min(currentAudio.duration, currentAudio.currentTime + SKIP_SECONDS);\n            }\n        }\n        \n        if (e.target.closest('#speed-down-btn')) {\n            console.log('Speed down button clicked');\n            playbackSpeed = Math.max(MIN_SPEED, playbackSpeed - SPEED_STEP);\n            updateAllAudioSpeeds();\n        }\n        \n        if (e.target.closest('#speed-up-btn')) {\n            console.log('Speed up button clicked');\n            playbackSpeed = Math.min(MAX_SPEED, playbackSpeed + SPEED_STEP);\n            updateAllAudioSpeeds();\n        }\n\t\t\n\t\t\/\/ \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0440\u0435\u0436\u0438\u043c \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u0442\u043a\u0430\u043c\u0438.\n        if (e.target.closest('#loop-between-markers-btn')) {\n\t\t\tloopBetweenMarkers = !loopBetweenMarkers;\n\t\t\tconsole.log('Loop between markers:', loopBetweenMarkers);\n\t\t\t\/\/ e.target.style.background = loopBetweenMarkers ? '#135e96' : '#2271b1';\n\n\t\t\t\/\/\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \ud83d\udd01 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0430 \u043b\u0438 \u043e\u043d\u0430 \u0438\u043b\u0438 \u043d\u0435\u0442.\n\t\t\tconst loopBtn = document.getElementById('loop-between-markers-btn');\n\t\t\tif (loopBtn) {\n\t\t\t\tif (loopBetweenMarkers) {\n\t\t\t\t\tloopBtn.classList.add('loop-button-active');\n\t\t\t\t} else {\n\t\t\t\t\tloopBtn.classList.remove('loop-button-active');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t\n\t\t\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \"\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c\"\n\t\tif (e.target.closest('#read-data-btn')) {\n\t\t\tconst textarea = document.getElementById('insert-data-textarea');\n\t\t\tconst text = textarea.value.trim();\n\t\t\t\n\t\t\tif (!text) {\n\t\t\t\talert('\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u043f\u0443\u0441\u0442\u043e\u0435');\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ \u041f\u0430\u0440\u0441\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f\n\t\t\tconst lines = text.split('\\n');\n\t\t\tlet fileName = '';\n\t\t\tlet startTime = null;\n\t\t\tlet endTime = null;\n\t\t\t\n\t\t\tlines.forEach(line => {\n\t\t\t\tif (line.startsWith('\u0424\u0430\u0439\u043b:')) {\n\t\t\t\t\tfileName = line.replace('\u0424\u0430\u0439\u043b:', '').trim();\n\t\t\t\t} else if (line.startsWith('\u0412\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430:')) {\n\t\t\t\t\tconst timeStr = line.replace('\u0412\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430:', '').trim();\n\t\t\t\t\tstartTime = parseTime(timeStr);\n\t\t\t\t} else if (line.startsWith('\u0412\u0440\u0435\u043c\u044f \u043a\u043e\u043d\u0446\u0430:')) {\n\t\t\t\t\tconst timeStr = line.replace('\u0412\u0440\u0435\u043c\u044f \u043a\u043e\u043d\u0446\u0430:', '').trim();\n\t\t\t\t\tendTime = parseTime(timeStr);\n\t\t\t\t}\n\t\t\t});\n\t\t\t\n\t\t\t\/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b\n\t\t\tif (!fileName || startTime === null || endTime === null) {\n\t\t\t\talert('\u041d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f:\\n\u0424\u0430\u0439\u043b: \u0438\u043c\u044f_\u0444\u0430\u0439\u043b\u0430.mp3\\n\u0412\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430: 0:00.000\\n\u0412\u0440\u0435\u043c\u044f \u043a\u043e\u043d\u0446\u0430: 0:00.000');\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ \u0418\u0449\u0435\u043c \u0430\u0443\u0434\u0438\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0442\u0430\u043a\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u043c\n\t\t\tconst audioElements = document.querySelectorAll('audio');\n\t\t\tlet foundAudio = null;\n\t\t\t\n\t\t\taudioElements.forEach(audio => {\n\t\t\t\tconst audioSrc = audio.src || '';\n\t\t\t\tconst audioFileName = decodeURIComponent(audioSrc.split('\/').pop() || '');\n\t\t\t\tif (audioFileName === fileName) {\n\t\t\t\t\tfoundAudio = audio;\n\t\t\t\t}\n\t\t\t});\n\t\t\t\n\t\t\tif (!foundAudio) {\n\t\t\t\talert('\u0410\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b \"' + fileName + '\" \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435');\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0439 \u0430\u0443\u0434\u0438\u043e \u043a\u0430\u043a \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n\t\t\tcurrentAudio = foundAudio;\n\t\t\t\n\t\t\t\/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438\n\t\t\tstartMarkerTime = startTime;\n\t\t\tendMarkerTime = endTime;\n\t\t\t\n\t\t\t\/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043d\u0430 timeline\n\t\t\tupdateMarkers();\n\t\t\t\n\t\t\t\/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043c\u0435\u0442\u043a\u0443\n\t\t\tcurrentAudio.currentTime = startTime;\n\t\t\t\n\t\t\t\/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 timeline\n\t\t\tupdateButtons();\n\t\t\tupdateTimeline();\n\t\t\t\n\t\t\tconsole.log('\u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u044b:', { fileName, startTime, endTime });\n\t\t}\n\t\t\n\t\t\/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \"\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c\"\n\t\tif (e.target.closest('#insert-data-btn')) {\n\t\t\tconst textarea = document.getElementById('insert-data-textarea');\n\t\t\tif (!currentAudio) {\n\t\t\t\ttextarea.value = '\u041d\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\u0430';\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t\n\t\t\t\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 src\n\t\t\tconst audioSrc = currentAudio.src || '\u041d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0444\u0430\u0439\u043b';\n\t\t\tconst fileName = decodeURIComponent(audioSrc.split('\/').pop() || audioSrc);\n\t\t\t\n\t\t\t\/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f\n\t\t\tconst time1 = startMarkerTime;\n\t\t\tconst time2 = endMarkerTime || currentAudio.duration;\n\t\t\tconst minTime = Math.min(time1, time2);\n\t\t\tconst maxTime = Math.max(time1, time2);\n\t\t\t\n\t\t\t\/\/ \u0424\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043a\u043e\u043d\u0446\u0430\n\t\t\tconst startTime = formatTime(minTime);\n\t\t\tconst endTime = formatTime(maxTime);\n\t\t\t\n\t\t\t\/\/ \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438\n\t\t\tconst dataText = `\u0424\u0430\u0439\u043b: ${fileName}\\n\u0412\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430: ${startTime}\\n\u0412\u0440\u0435\u043c\u044f \u043a\u043e\u043d\u0446\u0430: ${endTime}`;\n\t\t\t\n\t\t\ttextarea.value = dataText;\n\t\t\tconsole.log('\u0414\u0430\u043d\u043d\u044b\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b:', dataText);\n\t\t}\n    });\n    \n    \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\n    function init() {\n        console.log('Initializing audio controls...');\n        trackAudioPlayback();\n        \n        \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u043a\u0430\u0436\u0434\u044b\u0435 500\u043c\u0441 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u043e\n        setInterval(function() {\n            const audioCount = document.querySelectorAll('audio').length;\n            if (audioCount > 0) {\n                updateButtons();\n            }\n        }, 500);\n    }\n    \n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', init);\n    } else {\n        init();\n    }\n    \n    \/\/ ==================== \u0424\u0423\u041d\u041a\u0426\u0418\u0418 \u0414\u041b\u042f \u0420\u0410\u0411\u041e\u0422\u042b \u0421 \u0422\u0410\u0411\u041b\u0418\u0426\u0410\u041c\u0418 ====================\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u0434\u043b\u044f \u044f\u0447\u0435\u0439\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n    function getCellKey(rowIndex, cellIndex) {\n        return `row${rowIndex}_cell${cellIndex}`;\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u044f\u0447\u0435\u0439\u043a\u0443\n    function saveCellData(rowIndex, cellIndex) {\n        if (!currentAudio) {\n            alert('\u041d\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0430\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b\u0430');\n            return;\n        }\n        \n        const audioSrc = currentAudio.src || '\u041d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0444\u0430\u0439\u043b';\n        const fileName = decodeURIComponent(audioSrc.split('\/').pop() || audioSrc);\n        \n        const time1 = startMarkerTime;\n        const time2 = endMarkerTime || currentAudio.duration;\n        const minTime = Math.min(time1, time2);\n        const maxTime = Math.max(time1, time2);\n        \n        const cellKey = getCellKey(rowIndex, cellIndex);\n        cellDataStorage[cellKey] = {\n            fileName: fileName,\n            startTime: minTime,\n            endTime: maxTime\n        };\n        \n        console.log('\u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u044b \u0434\u043b\u044f \u044f\u0447\u0435\u0439\u043a\u0438:', cellKey, cellDataStorage[cellKey]);\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u044f\u0447\u0435\u0439\u043a\u0438\n    function loadCellData(rowIndex, cellIndex) {\n        const cellKey = getCellKey(rowIndex, cellIndex);\n        const data = cellDataStorage[cellKey];\n        \n        if (!data) {\n            alert('\u041d\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438');\n            return;\n        }\n        \n        \/\/ \u0418\u0449\u0435\u043c \u0430\u0443\u0434\u0438\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0442\u0430\u043a\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u043c\n        const audioElements = document.querySelectorAll('audio');\n        let foundAudio = null;\n        \n        audioElements.forEach(audio => {\n            const audioSrc = audio.src || '';\n            const audioFileName = decodeURIComponent(audioSrc.split('\/').pop() || '');\n            if (audioFileName === data.fileName) {\n                foundAudio = audio;\n            }\n        });\n        \n        if (!foundAudio) {\n            alert('\u0410\u0443\u0434\u0438\u043e \u0444\u0430\u0439\u043b \"' + data.fileName + '\" \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435');\n            return;\n        }\n        \n        \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0439 \u0430\u0443\u0434\u0438\u043e \u043a\u0430\u043a \u0442\u0435\u043a\u0443\u0449\u0438\u0439\n        currentAudio = foundAudio;\n        \n        \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438\n        startMarkerTime = data.startTime;\n        endMarkerTime = data.endTime;\n        \n        \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043d\u0430 timeline\n        updateMarkers();\n        \n        \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043c\u0435\u0442\u043a\u0443\n        currentAudio.currentTime = data.startTime;\n        \n        \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 timeline\n        updatePlayPauseButton();\n        updateTimeline();\n        \n        console.log('\u0414\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u0434\u043b\u044f \u044f\u0447\u0435\u0439\u043a\u0438:', cellKey, data);\n    }\n    \n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n    function addButtonsToTables() {\n        const tables = document.querySelectorAll('table');\n        \n        tables.forEach(table => {\n            \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043b\u0438 \u0443\u0436\u0435 \u043a\u043d\u043e\u043f\u043a\u0438\n            if (table.dataset.buttonsAdded) return;\n            table.dataset.buttonsAdded = 'true';\n            \n            const rows = table.querySelectorAll('tr');\n            \n            rows.forEach((row, rowIndex) => {\n                \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u0435\u0432\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \"<-\" \u0438 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c\n                const leftCell = document.createElement('td');\n                leftCell.style.textAlign = 'center';\n                leftCell.style.padding = '5px';\n                \n                const getButton = document.createElement('button');\n                getButton.className = 'row-get-button';\n                getButton.textContent = '\u2190';\n                getButton.title = '\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435';\n                getButton.onclick = function() {\n                    \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 (\u043f\u043e\u0441\u043b\u0435 \u043b\u0435\u0432\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438)\n                    loadCellData(rowIndex, 0);\n                };\n                \n                const counter = document.createElement('span');\n                counter.className = 'row-counter';\n                counter.textContent = rowIndex + 1;\n                \n                leftCell.appendChild(getButton);\n                leftCell.appendChild(counter);\n                row.insertBefore(leftCell, row.firstChild);\n                \n                \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0430\u0432\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \"<<\"\n                const rightCell = document.createElement('td');\n                rightCell.style.textAlign = 'center';\n                rightCell.style.padding = '5px';\n                \n                const insertButton = document.createElement('button');\n                insertButton.className = 'row-insert-button';\n                insertButton.textContent = '\u226a';\n                insertButton.title = '\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435';\n                insertButton.onclick = function() {\n                    \/\/ \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0438\u043d\u0434\u0435\u043a\u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 (\u043f\u043e\u0441\u043b\u0435 \u043b\u0435\u0432\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438)\n                    saveCellData(rowIndex, 0);\n                };\n                \n                rightCell.appendChild(insertButton);\n                row.appendChild(rightCell);\n            });\n        });\n    }\n    \n    \/\/ \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u0437\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u043e\u0432\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\n    const tableObserver = new MutationObserver(function(mutations) {\n        mutations.forEach(function(mutation) {\n            mutation.addedNodes.forEach(function(node) {\n                if (node.nodeType === 1) { \/\/ Element node\n                    if (node.tagName === 'TABLE') {\n                        addButtonsToTables();\n                    } else if (node.querySelectorAll) {\n                        const tables = node.querySelectorAll('table');\n                        if (tables.length > 0) {\n                            addButtonsToTables();\n                        }\n                    }\n                }\n            });\n        });\n    });\n    \n    \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445\n    addButtonsToTables();\n    \n    \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c \u0437\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438\n    tableObserver.observe(document.body, { \n        childList: true, \n        subtree: true \n    });\n    \n    \/\/ ==================== \u041a\u041e\u041d\u0415\u0426 \u0424\u0423\u041d\u041a\u0426\u0418\u0419 \u0414\u041b\u042f \u0420\u0410\u0411\u041e\u0422\u042b \u0421 \u0422\u0410\u0411\u041b\u0418\u0426\u0410\u041c\u0418 ====================\n    \n    \/\/ \u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0430\u0443\u0434\u0438\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\n    const observer = new MutationObserver(function() {\n        console.log('DOM changed, re-tracking audio...');\n        trackAudioPlayback();\n    });\n    observer.observe(document.body, { childList: true, subtree: true });\n})();\n<\/script>\n\n\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0443 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0443\u0442: https:\/\/word.cbm.ua\/?p=13494 \u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0430\u0436\u043c\u0438 \u043d\u0438\u0436\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0435 \u0430\u0443\u0434\u0438\u043e , \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0448\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0432\u0430\u043c\u0438 \u0430\u0443\u0434\u0438\u043e \u0438 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435 \u043d\u0438\u0436\u0435 \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0441\u043b\u044b\u0448\u0438\u0448\u044c. \u041f\u043e\u043a\u0430 \u0441\u043b\u0443\u0448\u0430\u0435\u0448\u044c \u0430\u0443\u0434\u0438\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u0435\u043a\u0441\u0442. \u042f \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u044d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e&hellip;&nbsp;<a href=\"https:\/\/word.cbm.ua\/?p=13493\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 &raquo;<span class=\"screen-reader-text\">!_ v.3 \u0442\u0435\u0441\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 HTML \u0441 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043d\u0430 \u0438\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u043e\u043c \u0438 \u0440\u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0430 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0438\u0445. \u041d\u0430 \u0431\u0430\u0437\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u00ab\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0435 \u043f\u043e\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0441\u0435\u0434\u0435\u0439. \u0423\u0447\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0432\u044b\u0434\u0435\u043b\u0438\u0432 \u0438\u0445 \u0446\u0432\u0435\u0442\u0430\u043c\u0438.\u00bb \u0434\u043b\u044f \u044d\u043a\u0437\u0430\u043c\u0435\u043d\u0430.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-13493","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13493"}],"version-history":[{"count":41,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13493\/revisions"}],"predecessor-version":[{"id":13549,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/13493\/revisions\/13549"}],"wp:attachment":[{"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/word.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}