{"id":7366,"date":"2025-11-16T19:28:13","date_gmt":"2025-11-16T16:28:13","guid":{"rendered":"https:\/\/1.cbm.ua\/?p=7366"},"modified":"2026-01-13T20:31:11","modified_gmt":"2026-01-13T17:31:11","slug":"_-%d1%82%d0%b5%d1%81%d1%82-%d0%ba%d0%be%d0%bf%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d1%82%d0%b5%d0%b1%d0%bb%d0%b8%d1%86%d1%83-%d1%81-html-%d0%bc%d0%be%d0%b5%d0%b9-%d1%81%d1%82%d1%80%d0%b0","status":"publish","type":"post","link":"https:\/\/1.cbm.ua\/?p=7366","title":{"rendered":"_ \u0442\u0435\u0441\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 HTML \u043c\u043e\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b."},"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><br><a href=\"https:\/\/1.cbm.ua\/?p=8477\">https:\/\/1.cbm.ua\/?p=8477<\/a>  (\u0438\u043b\u0438 <a href=\"https:\/\/word.cbm.ua\/?p=13494\">https:\/\/word.cbm.ua\/?p=13494<\/a>)<\/p>\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\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\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\t#audio-menu-button button:active {\n\t\ttransform: scale(0.95);\n\t}\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: 80px;\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\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\/* \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\t\t\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\/* #audio-control-panel {\n\t\t\t\/* flex-wrap: wrap;   \u2190 \u0414\u041e\u0411\u0410\u0412\u0418\u0422\u042c \u042d\u0422\u041e *\/\n\t\t\tbottom: 70px;\n\t\t\tleft: 10px;\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\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    \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=\"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 \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(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    \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';\n        const mins = Math.floor(seconds \/ 60);\n        const secs = Math.floor(seconds % 60);\n        return `${mins}:${secs.toString().padStart(2, '0')}`;\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\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        \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    }\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        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    });\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    \/\/ \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","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:\/\/1.cbm.ua\/?p=8477 (\u0438\u043b\u0438 https:\/\/word.cbm.ua\/?p=13494) \u2116 \u0418\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0420\u043e\u0434\u043d\u043e\u0439 \u044f\u0437\u044b\u043a 1 Hallo zusammen, \u041f\u0440\u0438\u0432\u0435\u0442 \u0432\u0441\u0435\u043c, 2 heute soll mein Paket geliefert werden. \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. 3 Ich habe darum gebeten, es ohne Code zu \u00fcbergeben. \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. 4 Sollte der Code trotzdem erforderlich sein, \u041d\u043e \u0435\u0441\u043b\u0438&hellip;&nbsp;<a href=\"https:\/\/1.cbm.ua\/?p=7366\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 &raquo;<span class=\"screen-reader-text\">_ \u0442\u0435\u0441\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 HTML \u043c\u043e\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":8470,"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":[194,195],"tags":[],"class_list":["post-7366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spr-jk_pwa-1","category-it"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7366"}],"version-history":[{"count":7,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7366\/revisions"}],"predecessor-version":[{"id":8480,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7366\/revisions\/8480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/media\/8470"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}