以下のコードがバグや変な部分がないか分析して欲しいです。

html：
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メモ帳</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <div id="chat-area">
            <img id="character-image" src="" alt="Character" style="display: none;">
        </div>
        <div id="settings">
            <div id="media-settings" class="settings-button">/</div>
        </div>
        <div id="input-container">
            <input type="text" id="input-area" placeholder="メッセージを入力...">
            <button id="send-button">➤</button>
        </div>
    </div>
    <div id="media-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>背景画像設定</h2>
            <div id="image-list"></div>
            <button id="add-image" class="add-file">+ 背景画像を追加</button>
            <h2>効果音設定</h2>
            <div id="audio-list"></div>
            <button id="add-audio" class="add-file">+ 効果音を追加</button>
            <h2>BGM設定</h2>
            <div id="bgm-list"></div>
            <button id="add-bgm" class="add-file">+ BGMを追加</button>
            <h2>人物画像設定</h2>
            <div id="character-list"></div>
            <button id="add-character" class="add-file">+ 人物画像を追加</button>
        </div>
    </div>
    <audio id="audio-player"></audio>
    <audio id="bgm-player" loop></audio>
    <script src="script.js"></script>
</body>
</html>




styles.css：
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

#chat-area {
    flex-grow: 1;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    overflow-y: auto;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}

#input-container {
    display: flex;
    margin-top: 10px;
}

#input-area {
    flex-grow: 1;
    padding: 10px;
    font-size: 16px;
}

#send-button {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 24px;
}

#send-button:hover {
    background-color: #45a049;
}

#settings {
    position: absolute;
    top: 10px;
    right: 10px;
}

.settings-button {
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    overflow-y: auto;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.file-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 10px;
}

.file-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 10px;
}

.file-name {
    flex-grow: 1;
    margin-right: 10px;
}

.remove-file {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.add-file {
    margin-top: 10px;
    padding: 10px;
    background-color: #008CBA;
    color: white;
    border: none;
    cursor: pointer;
}

.bg-command, .audio-command, .bgm-command, .bgh-command {
    color: transparent;
}

#audio-player, #bgm-player {
    display: none;
}

#character-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-height: 80%;
    max-width: 80%;
    object-fit: contain;
}





script.js：
document.addEventListener('DOMContentLoaded', () => {
    const chatArea = document.getElementById('chat-area');
    const inputArea = document.getElementById('input-area');
    const sendButton = document.getElementById('send-button');
    const mediaSettings = document.getElementById('media-settings');
    const mediaModal = document.getElementById('media-modal');
    const imageList = document.getElementById('image-list');
    const audioList = document.getElementById('audio-list');
    const bgmList = document.getElementById('bgm-list');
    const characterList = document.getElementById('character-list');
    const addImageButton = document.getElementById('add-image');
    const addAudioButton = document.getElementById('add-audio');
    const addBgmButton = document.getElementById('add-bgm');
    const addCharacterButton = document.getElementById('add-character');
    const audioPlayer = document.getElementById('audio-player');
    const bgmPlayer = document.getElementById('bgm-player');

    let images = [];
    let audios = [];
    let bgms = [];
    let characterImages = [];

    function setupModal(modal, settingsButton, closeButton) {
        settingsButton.onclick = () => {
            modal.style.display = "block";
            renderFileList(images, imageList, 'image');
            renderFileList(audios, audioList, 'audio');
            renderFileList(bgms, bgmList, 'bgm');
            renderFileList(characterImages, characterList, 'character');
        }

        closeButton.onclick = () => {
            modal.style.display = "none";
        }

        window.onclick = (event) => {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }

    setupModal(mediaModal, mediaSettings, mediaModal.querySelector('.close'));

    function setupAddButton(button, fileType, fileList) {
        button.onclick = () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = fileType === 'audio' || fileType === 'bgm' ? 'audio/*' : 'image/*';
            input.onchange = (e) => {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        fileList.push({
                            name: `${fileType}${fileList.length + 1}`,
                            data: e.target.result
                        });
                        renderFileList(fileList, fileType === 'image' ? imageList : (fileType === 'audio' ? audioList : (fileType === 'bgm' ? bgmList : characterList)), fileType);
                    };
                    reader.readAsDataURL(file);
                }
            };
            input.click();
        }
    }

    setupAddButton(addImageButton, 'image', images);
    setupAddButton(addAudioButton, 'audio', audios);
    setupAddButton(addBgmButton, 'bgm', bgms);
    setupAddButton(addCharacterButton, 'character', characterImages);

    function renderFileList(fileList, listElement, fileType) {
        listElement.innerHTML = '';
        fileList.forEach((file, index) => {
            const container = document.createElement('div');
            container.className = 'file-container';

            if (fileType === 'image' || fileType === 'character') {
                const img = document.createElement('img');
                img.src = file.data;
                img.className = 'file-preview';
                container.appendChild(img);
            } else {
                const audioPreview = document.createElement('div');
                audioPreview.textContent = '♪';
                audioPreview.className = 'file-preview';
                audioPreview.style.display = 'flex';
                audioPreview.style.justifyContent = 'center';
                audioPreview.style.alignItems = 'center';
                audioPreview.style.fontSize = '48px';
                container.appendChild(audioPreview);
            }

            const nameInput = document.createElement('input');
            nameInput.type = 'text';
            nameInput.value = file.name;
            nameInput.className = 'file-name';
            nameInput.oninput = (e) => {
                fileList[index].name = e.target.value;
            };
            container.appendChild(nameInput);

            const removeButton = document.createElement('button');
            removeButton.textContent = '削除';
            removeButton.className = 'remove-file';
            removeButton.onclick = () => {
                fileList.splice(index, 1);
                renderFileList(fileList, listElement, fileType);
            };
            container.appendChild(removeButton);

            listElement.appendChild(container);
        });
    }

    function sendMessage() {
        const message = inputArea.value.trim();
        if (message) {
            const messageElement = document.createElement('div');
            messageElement.innerHTML = message
                .replace(/{{bg::([^}]+)}}/g, '<span class="bg-command">{{bg::$1}}</span>')
                .replace(/{{audio::([^}]+)}}/g, '<span class="audio-command">{{audio::$1}}</span>')
                .replace(/{{bgm::([^}]+)}}/g, '<span class="bgm-command">{{bgm::$1}}</span>')
                .replace(/{{bgH::([^}]+)}}/g, '<span class="bgh-command">{{bgH::$1}}</span>');
            chatArea.appendChild(messageElement);
            inputArea.value = '';

            // 背景画像の設定
            const bgRegex = /{{bg::([^}]+)}}/g;
            let bgMatch;
            while ((bgMatch = bgRegex.exec(message)) !== null) {
                const imageName = bgMatch[1];
                const image = images.find(img => img.name === imageName);
                if (image) {
                    chatArea.style.backgroundImage = `url(${image.data})`;
                    chatArea.style.backgroundSize = 'cover';
                    chatArea.style.backgroundRepeat = 'no-repeat';
                    break;
                }
            }

            // 効果音の再生
            const audioRegex = /{{audio::([^}]+)}}/g;
            let audioMatch;
            while ((audioMatch = audioRegex.exec(message)) !== null) {
                const audioName = audioMatch[1];
                const audio = audios.find(aud => aud.name === audioName);
                if (audio) {
                    audioPlayer.src = audio.data;
                    audioPlayer.play();
                    break;
                }
            }

            // BGMの再生
            const bgmRegex = /{{bgm::([^}]+)}}/g;
            let bgmMatch;
            while ((bgmMatch = bgmRegex.exec(message)) !== null) {
                const bgmName = bgmMatch[1];
                const bgm = bgms.find(b => b.name === bgmName);
                if (bgm) {
                    bgmPlayer.src = bgm.data;
                    bgmPlayer.play();
                    break;
                }
            }

            // 人物画像の表示
            const bgHRegex = /{{bgH::([^}]+)}}/g;
            let bgHMatch;
            while ((bgHMatch = bgHRegex.exec(message)) !== null) {
                const imageName = bgHMatch[1];
                const characterImage = characterImages.find(img => img.name === imageName);
                if (characterImage) {
                    const characterImageElement = document.getElementById('character-image');
                    characterImageElement.src = characterImage.data;
                    characterImageElement.style.display = 'block';
                    break;
                }
            }

            chatArea.scrollTop = chatArea.scrollHeight;
        }
    }

    sendButton.onclick = sendMessage;
    inputArea.onkeypress = (e) => {
        if (e.key === 'Enter') {
            sendMessage();
            e.preventDefault();
        }
    };
});