socket.on('new_audio', (data) => {
    const audioElement = createAudioElement(data);
    document.getElementById('board').appendChild(audioElement);
});

socket.on('updated_audio', (data) => {
    const audioElement = document.querySelector(`.audio[data-id="${data.id}"]`);
    if (audioElement) {
        audioElement.style.left = `${data.x}px`;
        audioElement.style.top = `${data.y}px`;
        audioElement.style.width = `${data.width}px`;
        audioElement.style.height = `${data.height}px`;
        audioElement.querySelector('.audio-file-name').textContent = data.file_name;
        audioElement.querySelector('audio').src = data.url;
    }
});

socket.on('audio_deleted', (data) => {
    const element = document.querySelector(`.audio[data-id="${data.id}"]`);
    if (element) {
        element.remove();
    }
});

function createAudioElement(data) {
    const audioElement = document.createElement('div');
    audioElement.className = 'audio';
    audioElement.dataset.id = data.id;
    audioElement.style.left = `${data.x}px`;
    audioElement.style.top = `${data.y}px`;
    audioElement.style.width = `${data.width}px`;
    audioElement.style.height = `${data.height}px`;

    const audioTitle = document.createElement('div');
    audioTitle.className = 'audio-file-name';
    audioTitle.textContent = data.file_name;

    const audioTag = document.createElement('audio');
    audioTag.src = data.url;

    const controls = document.createElement('div');
    controls.className = 'controls';

    const playPauseButton = document.createElement('button');
    playPauseButton.className = 'play-pause';
    playPauseButton.textContent = '▶️';

    const stopButton = document.createElement('button');
    stopButton.className = 'stop';
    stopButton.textContent = '⏹️';

    const progressBar = document.createElement('input');
    progressBar.className = 'progress-bar';
    progressBar.type = 'range';
    progressBar.min = 0;
    progressBar.value = 0;
    progressBar.step = 0.1;

    audioTag.addEventListener('loadedmetadata', () => {
        progressBar.max = audioTag.duration;
    });

    audioTag.addEventListener('timeupdate', () => {
        progressBar.value = audioTag.currentTime;
    });

    playPauseButton.addEventListener('click', () => {
        if (audioTag.paused) {
            audioTag.play();
            playPauseButton.textContent = '⏸️';
        } else {
            audioTag.pause();
            playPauseButton.textContent = '▶️';
        }
    });

    stopButton.addEventListener('click', () => {
        audioTag.pause();
        audioTag.currentTime = 0;
        playPauseButton.textContent = '▶️';
    });

    progressBar.addEventListener('input', () => {
        audioTag.currentTime = progressBar.value;
    });

    controls.appendChild(playPauseButton);
    controls.appendChild(stopButton);
    controls.appendChild(progressBar);

    audioElement.appendChild(audioTitle);
    audioElement.appendChild(audioTag);
    audioElement.appendChild(controls);

    addAudioEventListeners(audioElement, data.id);
    return audioElement;
}

function addAudioEventListeners(audioElement, id) {
    audioElement.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return;
        e.preventDefault();
        e.stopPropagation();

        const startX = e.clientX;
        const startY = e.clientY;
        const startLeft = parseFloat(audioElement.style.left) || 0;
        const startTop = parseFloat(audioElement.style.top) || 0;

        function moveAudio(e) {
            const deltaX = (e.clientX - startX) / scale;
            const deltaY = (e.clientY - startY) / scale;
            audioElement.style.left = `${startLeft + deltaX}px`;
            audioElement.style.top = `${startTop + deltaY}px`;
            const x = parseFloat(audioElement.style.left) || 0;
            const y = parseFloat(audioElement.style.top) || 0;
            const width = audioElement.offsetWidth;
            const height = audioElement.offsetHeight;
            socket.emit('update_audio', { id, file_name: audioElement.querySelector('.audio-file-name').textContent, url: audioElement.querySelector('audio').src, x, y, width, height });
        }

        document.addEventListener('mousemove', moveAudio);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveAudio);
        }, { once: true });
    });

    audioElement.addEventListener('dblclick', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showContextMenu(audioElement, id, e.clientX, e.clientY);

        // Additional audio controls can be added here
    });

    addResizeListeners(audioElement, id, 'audio');
}

document.getElementById('add-audio').addEventListener('click', () => {
    const formHtml = `
        <div id="audio-form" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#f9f9f9; padding:20px; border-radius:12px; box-shadow:0 15px 30px rgba(0,0,0,0.2); z-index: 1000; max-width:400px; width:100%; text-align:center; font-family:'Arial', sans-serif;">
            <label for="audio-file" style="display:block; margin-bottom:16px; font-size:16px; color:#333;">🎵 Upload Your Audio File</label>
            <input type="file" id="audio-file" accept="audio/*" style="margin-bottom:20px; width:calc(100% - 32px); padding:10px; border-radius:8px; background-color:#fff; border:1px solid #ddd; color:#333; cursor:pointer;">
            <br>
            <button id="add-audio-submit" style="padding:12px 24px; background-color:#28a745; color:white; border:none; border-radius:6px; cursor:pointer; margin-right:12px; box-shadow:0 4px 8px rgba(40,167,69,0.2); transition:background-color 0.3s;">Add Audio</button>
            <button id="cancel-audio" style="padding:12px 24px; background-color:#ff3860; color:white; border:none; border-radius:6px; cursor:pointer; box-shadow:0 4px 8px rgba(255,56,96,0.2); transition:background-color 0.3s;">Cancel</button>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', formHtml);

    document.getElementById('add-audio-submit').addEventListener('click', async () => {
        const fileInput = document.getElementById('audio-file');
        if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            const audioData = await uploadFile(file, '/upload_audio');
            addAudioToCenter(audioData);
            closeModal();
        }
    });

    document.getElementById('cancel-audio').addEventListener('click', closeModal);

    function closeModal() {
        const form = document.getElementById('audio-form');
        if (form) {
            form.remove();
        }
    }
});

async function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch('/upload_audio', {
        method: 'POST',
        body: formData
    });

    return await response.json();
}

function addAudioToCenter(audioData) {
    const rect = boardWrapper.getBoundingClientRect();
    const width = 200;
    const height = 80;

    const centerX = ((rect.width / 2 - translateX) / scale) - width / 2;
    const centerY = ((rect.height / 2 - translateY) / scale) - height / 2;

    socket.emit('create_audio', {
        file_name: audioData.file_name,
        url: audioData.url,
        x: centerX,
        y: centerY,
        width: 200,
        height: 50
    });
}

Как мне сделать чтобы элемент не перетаскивался за кнопки и прогрессбар