сделай больше возможностей и раздели в редакции для адуио и для видио инструменты . 
 исправь ошибки и добавь механизмы работы  с файлами 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Продвинутый Онлайн Редактор Видео и Аудио</title>
    <!-- Подключение Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
            background-color: #f8f9fa;
        }
        .hidden {
            display: none;
        }
        #progressContainer {
            margin-top: 20px;
        }
        .effect-slider {
            width: 100%;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        /* Дополнительные стили для улучшения визуальной оболочки */
        .tab-content {
            margin-top: 20px;
        }
        .ratio-16x9 {
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">Продвинутый Онлайн Редактор Видео и Аудио</h1>
        
        <!-- Навигационные Вкладки -->
        <ul class="nav nav-tabs mb-4" id="editorTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="upload-tab" data-bs-toggle="tab" data-bs-target="#upload" type="button" role="tab" aria-controls="upload" aria-selected="true">Загрузка Файлов</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit" type="button" role="tab" aria-controls="edit" aria-selected="false">Редактирование</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="preview-tab" data-bs-toggle="tab" data-bs-target="#preview" type="button" role="tab" aria-controls="preview" aria-selected="false">Просмотр и Скачать</button>
            </li>
        </ul>
        <div class="tab-content" id="editorTabsContent">
            <!-- Загрузка Файлов -->
            <div class="tab-pane fade show active" id="upload" role="tabpanel" aria-labelledby="upload-tab">
                <div class="mb-4">
                    <label for="uploader" class="form-label">Загрузите видео или аудио файлы:</label>
                    <input class="form-control" type="file" id="uploader" accept="video/*,audio/*" multiple>
                </div>
            </div>

            <!-- Редактирование -->
            <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="edit-tab">
                <div class="card mb-4">
                    <div class="card-header">
                        <strong>Инструменты Редактирования</strong>
                    </div>
                    <div class="card-body">
                        <!-- Конвертация -->
                        <div class="mb-3">
                            <button class="btn btn-primary" id="convertBtn">Конвертировать в MP3</button>
                        </div>

                        <!-- Обрезка -->
                        <div class="mb-3">
                            <button class="btn btn-secondary" id="trimBtn">Обрезать файл</button>
                            <div id="trimControls" class="mt-2 hidden">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label for="trimStart" class="form-label">Начало (секунды):</label>
                                        <input type="number" class="form-control" id="trimStart" value="0" min="0">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="trimEnd" class="form-label">Конец (секунды):</label>
                                        <input type="number" class="form-control" id="trimEnd" value="10" min="1">
                                    </div>
                                    <div class="col-md-4 d-flex align-items-end">
                                        <button class="btn btn-success" id="applyTrim">Применить Обрезку</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Добавление Эффектов -->
                        <div class="mb-3">
                            <button class="btn btn-warning" id="effectBtn">Добавить Эффекты</button>
                            <div id="effectControls" class="mt-2 hidden">
                                <div class="mb-3">
                                    <label for="brightness" class="form-label">Яркость:</label>
                                    <input type="range" class="form-range effect-slider" id="brightness" min="0" max="200" value="100">
                                    <span id="brightnessValue">100%</span>
                                </div>
                                <div class="mb-3">
                                    <label for="contrast" class="form-label">Контрастность:</label>
                                    <input type="range" class="form-range effect-slider" id="contrast" min="0" max="200" value="100">
                                    <span id="contrastValue">100%</span>
                                </div>
                                <div class="mb-3">
                                    <label for="sepia" class="form-label">Сепия:</label>
                                    <input type="range" class="form-range effect-slider" id="sepia" min="0" max="100" value="0">
                                    <span id="sepiaValue">0%</span>
                                </div>
                                <button class="btn btn-success" id="applyEffects">Применить Эффекты</button>
                            </div>
                        </div>

                        <!-- Регулировка Громкости -->
                        <div class="mb-3">
                            <button class="btn btn-info" id="volumeBtn">Регулировать Громкость</button>
                            <div id="volumeControls" class="mt-2 hidden">
                                <label for="volume" class="form-label">Громкость (%):</label>
                                <input type="range" class="form-range effect-slider" id="volume" min="0" max="200" value="100">
                                <span id="volumeValue">100%</span>
                                <button class="btn btn-success mt-2" id="applyVolume">Применить Громкость</button>
                            </div>
                        </div>

                        <!-- Объединение Файлов -->
                        <div class="mb-3">
                            <button class="btn btn-dark" id="mergeBtn">Объединить Файлы</button>
                            <div id="mergeControls" class="mt-2 hidden">
                                <button class="btn btn-secondary mb-2" id="addToMerge">Добавить в Список для Объединения</button>
                                <button class="btn btn-success mb-2" id="executeMerge">Выполнить Объединение</button>
                                <ul class="list-group" id="mergeList"></ul>
                            </div>
                        </div>

                        <!-- Добавление Текста -->
                        <div class="mb-3">
                            <button class="btn btn-secondary" id="textOverlayBtn">Добавить Текст</button>
                            <div id="textOverlayControls" class="mt-2 hidden">
                                <div class="mb-3">
                                    <label for="overlayText" class="form-label">Текст:</label>
                                    <input type="text" class="form-control" id="overlayText" placeholder="Введите текст">
                                </div>
                                <div class="mb-3">
                                    <label for="fontSize" class="form-label">Размер Шрифта:</label>
                                    <input type="number" class="form-control" id="fontSize" value="24" min="10">
                                </div>
                                <div class="mb-3">
                                    <label for="fontColor" class="form-label">Цвет Шрифта:</label>
                                    <input type="color" class="form-control form-control-color" id="fontColor" value="#FFFFFF">
                                </div>
                                <button class="btn btn-success" id="applyTextOverlay">Применить Текст</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Просмотр и Скачать -->
            <div class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab">
                <div class="mb-4">
                    <div class="ratio ratio-16x9 hidden" id="videoContainer">
                        <video id="videoPlayer" controls></video>
                    </div>
                    <div class="mt-3 hidden" id="audioContainer">
                        <audio id="audioPlayer" controls></audio>
                    </div>
                    <a href="#" id="downloadLink" class="btn btn-primary mt-3 hidden" download>Скачать Файл</a>
                </div>

                <!-- Прогресс-бар -->
                <div id="progressContainer" class="hidden">
                    <h5>Прогресс Обработки:</h5>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" id="progressBar" style="width: 0%;">0%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Модальное окно для уведомлений -->
    <div class="modal fade" id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 id="notificationModalLabel" class="modal-title">Уведомление</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body" id="modalMessage">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Подключение FFmpeg.wasm и Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.11.6/dist/ffmpeg.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Основной JavaScript код -->
    <script>
        const { createFFmpeg, fetchFile } = FFmpeg;
        const ffmpeg = createFFmpeg({ log: true });

        // Элементы DOM
        const uploader = document.getElementById('uploader');
        const convertBtn = document.getElementById('convertBtn');
        const trimBtn = document.getElementById('trimBtn');
        const trimControls = document.getElementById('trimControls');
        const applyTrim = document.getElementById('applyTrim');
        const effectBtn = document.getElementById('effectBtn');
        const effectControls = document.getElementById('effectControls');
        const applyEffects = document.getElementById('applyEffects');
        const volumeBtn = document.getElementById('volumeBtn');
        const volumeControls = document.getElementById('volumeControls');
        const applyVolume = document.getElementById('applyVolume');
        const mergeBtn = document.getElementById('mergeBtn');
        const mergeControls = document.getElementById('mergeControls');
        const addToMerge = document.getElementById('addToMerge');
        const executeMerge = document.getElementById('executeMerge');
        const mergeList = document.getElementById('mergeList');
        const textOverlayBtn = document.getElementById('textOverlayBtn');
        const textOverlayControls = document.getElementById('textOverlayControls');
        const applyTextOverlay = document.getElementById('applyTextOverlay');

        const videoPlayer = document.getElementById('videoPlayer');
        const audioPlayer = document.getElementById('audioPlayer');
        const downloadLink = document.getElementById('downloadLink');

        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');

        // Модальное окно
        const notificationModal = new bootstrap.Modal(document.getElementById('notificationModal'));
        const modalMessage = document.getElementById('modalMessage');

        // Переменные состояния
        let uploadedFiles = [];
        let mergeFiles = [];

        // Загруженные файлы
        uploader.addEventListener('change', (event) => {
            const files = event.target.files;
            if (files.length > 0) {
                // Валидация файлов
                const allowedTypes = ['video/mp4', 'audio/mpeg', 'audio/wav', 'video/avi', 'video/mov', 'audio/wma', 'audio/aac'];
                for (const file of files) {
                    if (!allowedTypes.includes(file.type)) {
                        showModal(`Формат файла ${file.name} не поддерживается.`);
                        return;
                    }
                }

                uploadedFiles = Array.from(files);
                displayCurrentFile();
            }
        });

        // Отображение текущего файла
        function displayCurrentFile() {
            const file = uploadedFiles[0];
            if (file) {
                const fileURL = URL.createObjectURL(file);
                if (file.type.startsWith('video/')) {
                    videoPlayer.src = fileURL;
                    videoPlayer.parentElement.classList.remove('hidden');
                    audioPlayer.parentElement.classList.add('hidden');
                } else if (file.type.startsWith('audio/')) {
                    audioPlayer.src = fileURL;
                    audioPlayer.parentElement.classList.remove('hidden');
                    videoPlayer.parentElement.classList.add('hidden');
                }
                downloadLink.classList.add('hidden');
            }
        }

        // Функция для отображения модального окна
        function showModal(message) {
            modalMessage.textContent = message;
            notificationModal.show();
        }

        // Загрузка FFmpeg
        async function loadFFmpeg() {
            if (!ffmpeg.isLoaded()) {
                progressContainer.classList.remove('hidden');
                try {
                    await ffmpeg.load();
                    progressContainer.classList.add('hidden');
                } catch (error) {
                    showModal('Ошибка при загрузке FFmpeg.');
                    progressContainer.classList.add('hidden');
                }
            }
        }

        // Обновление прогресс-бара
        ffmpeg.setProgress(({ ratio }) => {
            const percent = Math.min(100, Math.round(ratio * 100));
            progressBar.style.width = `${percent}%`;
            progressBar.textContent = `${percent}%`;
        });

        // Конвертация файлов в MP3
        convertBtn.addEventListener('click', async () => {
            if (uploadedFiles.length === 0) {
                showModal('Пожалуйста, загрузите файлы.');
                return;
            }

            await loadFFmpeg();

            for (const file of uploadedFiles) {
                const fileName = file.name;
                const name = fileName.substring(0, fileName.lastIndexOf('.'));
                try {
                    ffmpeg.FS('writeFile', fileName, await fetchFile(file));

                    // Конвертация в MP3
                    await ffmpeg.run('-i', fileName, `${name}.mp3`);

                    const data = ffmpeg.FS('readFile', `${name}.mp3`);

                    // Создание Blob и ссылки для скачивания
                    const audioBlob = new Blob([data.buffer], { type: 'audio/mpeg' });
                    const audioURL = URL.createObjectURL(audioBlob);

                    // Отображение аудио плеера и ссылки
                    audioPlayer.src = audioURL;
                    audioPlayer.parentElement.classList.remove('hidden');
                    videoPlayer.parentElement.classList.add('hidden');

                    downloadLink.href = audioURL;
                    downloadLink.download = `${name}.mp3`;
                    downloadLink.textContent = `Скачать ${name}.mp3`;
                    downloadLink.classList.remove('hidden');

                    // Очищение
                    ffmpeg.FS('unlink', `${name}.mp3`);
                } catch (error) {
                    showModal(`Ошибка при конвертации файла ${fileName}.`);
                }
            }
        });

        // Обрезка файлов
        trimBtn.addEventListener('click', () => {
            if (uploadedFiles.length === 0) {
                showModal('Пожалуйста, загрузите файл для обрезки.');
                return;
            }
            trimControls.classList.toggle('hidden');
        });

        // Применение обрезки
        applyTrim.addEventListener('click', async () => {
            const start = parseFloat(document.getElementById('trimStart').value);
            const end = parseFloat(document.getElementById('trimEnd').value);

            if (isNaN(start) || isNaN(end) || start < 0 || end <= start) {
                showModal('Пожалуйста, введите корректные значения начала и конца.');
                return;
            }

            const file = uploadedFiles[0];
            await loadFFmpeg();

            const fileName = file.name;
            const trimmedFileName = `trimmed_${fileName}`;
            try {
                ffmpeg.FS('writeFile', fileName, await fetchFile(file));

                // Команда обрезки (копирование видео без перекодирования для ускорения)
                await ffmpeg.run('-i', fileName, '-ss', `${start}`, '-to', `${end}`, '-c', 'copy', trimmedFileName);

                const data = ffmpeg.FS('readFile', trimmedFileName);
                const trimmedBlob = new Blob([data.buffer], { type: file.type });
                const trimmedURL = URL.createObjectURL(trimmedBlob);

                // Отображение результата
                if (file.type.startsWith('video/')) {
                    videoPlayer.src = trimmedURL;
                    videoPlayer.parentElement.classList.remove('hidden');
                    audioPlayer.parentElement.classList.add('hidden');
                } else if (file.type.startsWith('audio/')) {
                    audioPlayer.src = trimmedURL;
                    audioPlayer.parentElement.classList.remove('hidden');
                    videoPlayer.parentElement.classList.add('hidden');
                }

                // Ссылка для скачивания
                downloadLink.href = trimmedURL;
                downloadLink.download = trimmedFileName;
                downloadLink.textContent = `Скачать ${trimmedFileName}`;
                downloadLink.classList.remove('hidden');

                // Очищение
                ffmpeg.FS('unlink', trimmedFileName);
            } catch (error) {
                showModal(`Ошибка при обрезке файла ${fileName}.`);
            }
        });

        // Добавление Эффектов
        effectBtn.addEventListener('click', () => {
            if (uploadedFiles.length === 0) {
                showModal('Пожалуйста, загрузите файл для применения эффектов.');
                return;
            }
            effectControls.classList.toggle('hidden');
        });

        // Обновление значений слайдеров эффектов
        document.getElementById('brightness').addEventListener('input', (e) => {
            document.getElementById('brightnessValue').textContent = `${e.target.value}%`;
        });
        document.getElementById('contrast').addEventListener('input', (e) => {
            document.getElementById('contrastValue').textContent = `${e.target.value}%`;
        });
        document.getElementById('sepia').addEventListener('input', (e) => {
            document.getElementById('sepiaValue').textContent = `${e.target.value}%`;
        });

        // Применение Эффектов
        applyEffects.addEventListener('click', async () => {
            const brightness = parseInt(document.getElementById('brightness').value);
            const contrast = parseInt(document.getElementById('contrast').value);
            const sepia = parseInt(document.getElementById('sepia').value);

            const file = uploadedFiles[0];
            await loadFFmpeg();

            const fileName = file.name;
            const name = fileName.substring(0, fileName.lastIndexOf('.'));
            const outputFileName = `effect_${fileName}`;
            try {
                ffmpeg.FS('writeFile', fileName, await fetchFile(file));

                // Формирование фильтров
                let filters = [];
                if (brightness !== 100 || contrast !== 100 || sepia !== 0) {
                    let filterString = '';
                    if (brightness !== 100 || contrast !== 100) {
                        filterString += `eq=brightness=${(brightness - 100) / 100}:contrast=${contrast / 100}`;
                    }
                    if (sepia > 0) {
                        if (filterString !== '') filterString += ',';
                        filterString += `colorchannelmixer=.393:.769:.189:0:.349:.686:.168:0:.272:.534:.131`;
                    }
                    filters.push(filterString);
                }
                const filterCombined = filters.join(',');

                if (filterCombined === '') {
                    showModal('Нет изменений для применения.');
                    return;
                }

                // Применение фильтров
                await ffmpeg.run('-i', fileName, '-vf', filterCombined, outputFileName);

                const data = ffmpeg.FS('readFile', outputFileName);
                const processedBlob = new Blob([data.buffer], { type: file.type });
                const processedURL = URL.createObjectURL(processedBlob);

                // Отображение результата
                if (file.type.startsWith('video/')) {
                    videoPlayer.src = processedURL;
                    videoPlayer.parentElement.classList.remove('hidden');
                    audioPlayer.parentElement.classList.add('hidden');
                } else if (file.type.startsWith('audio/')) {
                    audioPlayer.src = processedURL;
                    audioPlayer.parentElement.classList.remove('hidden');
                    videoPlayer.parentElement.classList.add('hidden');
                }

                // Ссылка для скачивания
                downloadLink.href = processedURL;
                downloadLink.download = outputFileName;
                downloadLink.textContent = `Скачать ${outputFileName}`;
                downloadLink.classList.remove('hidden');

                // Очищение
                ffmpeg.FS('unlink', outputFileName);
            } catch (error) {
                showModal(`Ошибка при добавлении эффектов к файлу ${fileName}.`);
            }
        });

        // Регулировка Громкости
        volumeBtn.addEventListener('click', () => {
            if (uploadedFiles.length === 0) {
                showModal('Пожалуйста, загрузите файл для регулировки громкости.');
                return;
            }
            volumeControls.classList.toggle('hidden');
        });

        // Обновление значения громкости
        document.getElementById('volume').addEventListener('input', (e) => {
            document.getElementById('volumeValue').textContent = `${e.target.value}%`;
        });

        // Применение Регулировки Громкости
        applyVolume.addEventListener('click', async () => {
            const volume = parseInt(document.getElementById('volume').value);

            const file = uploadedFiles[0];
            await loadFFmpeg();

            const fileName = file.name;
            const name = fileName.substring(0, fileName.lastIndexOf('.'));
            const outputFileName = `volume_${fileName}`;
            try {
                ffmpeg.FS('writeFile', fileName, await fetchFile(file));

                // Применение фильтра громкости
                await ffmpeg.run('-i', fileName, '-filter:a', `volume=${volume / 100}`, outputFileName);

                const data = ffmpeg.FS('readFile', outputFileName);
                const processedBlob = new Blob([data.buffer], { type: file.type });
                const processedURL = URL.createObjectURL(processedBlob);

                // Отображение результата
                if (file.type.startsWith('video/')) {
                    videoPlayer.src = processedURL;
                    videoPlayer.parentElement.classList.remove('hidden');
                    audioPlayer.parentElement.classList.add('hidden');
                } else if (file.type.startsWith('audio/')) {
                    audioPlayer.src = processedURL;
                    audioPlayer.parentElement.classList.remove('hidden');
                    videoPlayer.parentElement.classList.add('hidden');
                }

                // Ссылка для скачивания
                downloadLink.href = processedURL;
                downloadLink.download = outputFileName;
                downloadLink.textContent = `Скачать ${outputFileName}`;
                downloadLink.classList.remove('hidden');

                // Очищение
                ffmpeg.FS('unlink', outputFileName);
            } catch (error) {
                showModal(`Ошибка при регулировке громкости файла ${fileName}.`);
            }
        });

        // Объединение Файлов
        mergeBtn.addEventListener('click', () => {
            if (uploadedFiles.length < 2) {
                showModal('Пожалуйста, загрузите как минимум два файла для объединения.');
                return;
            }
            mergeControls.classList.toggle('hidden');
        });

        // Добавление файлов в список для объединения
        addToMerge.addEventListener('click', () => {
            const file = uploadedFiles.shift();
            if (file) {
                mergeFiles.push(file);
                const listItem = document.createElement('li');
                listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
                listItem.textContent = file.name;
                const removeBtn = document.createElement('button');
                removeBtn.className = 'btn btn-danger btn-sm';
                removeBtn.textContent = 'Удалить';
                removeBtn.addEventListener('click', () => {
                    mergeFiles = mergeFiles.filter(f => f !== file);
                    listItem.remove();
                });
                listItem.appendChild(removeBtn);
                mergeList.appendChild(listItem);
                showModal(`${file.name} добавлен(а) в список для объединения.`);
            } else {
                showModal('Нет доступных файлов для добавления.');
            }
        });

        // Выполнение объединения файлов
        executeMerge.addEventListener('click', async () => {
            if (mergeFiles.length < 2) {
                showModal('Пожалуйста, добавьте как минимум два файла для объединения.');
                return;
            }

            await loadFFmpeg();

            try {
                // Запись всех файлов во временную файловую систему FFmpeg
                for (const [index, file] of mergeFiles.entries()) {
                    ffmpeg.FS('writeFile', `input${index}.${getExtension(file.name)}`, await fetchFile(file));
                }

                // Создание файла списка для объединения
                const listContent = mergeFiles.map((file, index) => `file input${index}.${getExtension(file.name)}`).join('\n');
                ffmpeg.FS('writeFile', 'list.txt', listContent);

                // Определение выходного формата (предположим, что это видео)
                const outputFileName = 'merged_output.mp4';

                // Выполнение объединения
                await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'list.txt', '-c', 'copy', outputFileName);

                const data = ffmpeg.FS('readFile', outputFileName);

                const mergedBlob = new Blob([data.buffer], { type: 'video/mp4' });
                const mergedURL = URL.createObjectURL(mergedBlob);

                // Отображение результата
                videoPlayer.src = mergedURL;
                videoPlayer.parentElement.classList.remove('hidden');
                audioPlayer.parentElement.classList.add('hidden');

                // Ссылка для скачивания
                downloadLink.href = mergedURL;
                downloadLink.download = outputFileName;
                downloadLink.textContent = `Скачать ${outputFileName}`;
                downloadLink.classList.remove('hidden');

                // Очистка списка
                mergeFiles = [];
                mergeList.innerHTML = '';

                // Очистка файлов
                ffmpeg.FS('unlink', 'list.txt');
                for (let i = 0; i < mergeFiles.length; i++) {
                    ffmpeg.FS('unlink', `input${i}.${getExtension(mergeFiles[i].name)}`);
                }

                showModal('Файлы успешно объединены!');
            } catch (error) {
                showModal('Ошибка при объединении файлов.');
            }
        });

        // Добавление Текстовых Наложений
        textOverlayBtn.addEventListener('click', () => {
            if (uploadedFiles.length === 0) {
                showModal('Пожалуйста, загрузите файл для добавления текста.');
                return;
            }
            textOverlayControls.classList.toggle('hidden');
        });

        // Применение Текстовых Наложений
        applyTextOverlay.addEventListener('click', async () => {
            const overlayText = document.getElementById('overlayText').value.trim();
            const fontSize = parseInt(document.getElementById('fontSize').value);
            const fontColor = document.getElementById('fontColor').value;

            if (!overlayText) {
                showModal('Пожалуйста, введите текст для наложения.');
                return;
            }

            const file = uploadedFiles[0];
            await loadFFmpeg();

            const fileName = file.name;
            const outputFileName = `text_${fileName}`;
            try {
                ffmpeg.FS('writeFile', fileName, await fetchFile(file));

                // Применение наложения текста
                // Позиция: нижний правый угол
                // Использование встроенного шрифта (без указания fontfile)
                const drawTextFilter = `drawtext=text='${overlayText}':fontcolor=${fontColor}:fontsize=${fontSize}:x=(w-text_w-10):y=(h-text_h-10):font="Arial"`;

                await ffmpeg.run('-i', fileName, '-vf', drawTextFilter, outputFileName);

                const data = ffmpeg.FS('readFile', outputFileName);
                const processedBlob = new Blob([data.buffer], { type: file.type });
                const processedURL = URL.createObjectURL(processedBlob);

                // Отображение результата
                if (file.type.startsWith('video/')) {
                    videoPlayer.src = processedURL;
                    videoPlayer.parentElement.classList.remove('hidden');
                    audioPlayer.parentElement.classList.add('hidden');
                } else if (file.type.startsWith('audio/')) {
                    audioPlayer.src = processedURL;
                    audioPlayer.parentElement.classList.remove('hidden');
                    videoPlayer.parentElement.classList.add('hidden');
                }

                // Ссылка для скачивания
                downloadLink.href = processedURL;
                downloadLink.download = outputFileName;
                downloadLink.textContent = `Скачать ${outputFileName}`;
                downloadLink.classList.remove('hidden');

                // Очищение
                ffmpeg.FS('unlink', outputFileName);
            } catch (error) {
                showModal(`Ошибка при добавлении текста к файлу ${fileName}.`);
            }
        });

        // Вспомогательная функция для получения расширения файла
        function getExtension(filename) {
            return filename.split('.').pop();
        }
    </script>
</body>
</html>