based on this word app json file with css and js objects, can you create a music player? for example in the level of detail of winamp with full functionality?
{
  "html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>WordPad Clone</title>\n</head>\n<body>\n    <div class=\"app-container\">\n        <!-- Menu Bar -->\n        <nav class=\"menu-bar\">\n            <ul class=\"menu\">\n                <li class=\"menu-item\">File\n                    <ul class=\"submenu\">\n                        <li onclick=\"newDocument()\">New</li>\n                        <li onclick=\"openDocument()\">Open</li>\n                        <li onclick=\"saveDocument()\">Save</li>\n                        <li onclick=\"printDocument()\">Print</li>\n                        <li onclick=\"exitApplication()\">Exit</li>\n                    </ul>\n                </li>\n                <li class=\"menu-item\">Edit\n                    <ul class=\"submenu\">\n                        <li onclick=\"undo()\">Undo</li>\n                        <li onclick=\"redo()\">Redo</li>\n                        <li onclick=\"cut()\">Cut</li>\n                        <li onclick=\"copy()\">Copy</li>\n                        <li onclick=\"paste()\">Paste</li>\n                        <li onclick=\"selectAll()\">Select All</li>\n                    </ul>\n                </li>\n                <li class=\"menu-item\">Format\n                    <ul class=\"submenu\">\n                        <li onclick=\"openFontDialog()\">Font</li>\n                        <li onclick=\"openParagraphDialog()\">Paragraph</li>\n                    </ul>\n                </li>\n                <li class=\"menu-item\">View\n                    <ul class=\"submenu\">\n                        <li onclick=\"zoomIn()\">Zoom In</li>\n                        <li onclick=\"zoomOut()\">Zoom Out</li>\n                        <li onclick=\"toggleStatusBar()\">Status Bar</li>\n                    </ul>\n                </li>\n                <li class=\"menu-item\">Help\n                    <ul class=\"submenu\">\n                        <li onclick=\"viewHelp()\">View Help</li>\n                        <li onclick=\"aboutWordPad()\">About WordPad</li>\n                    </ul>\n                </li>\n            </ul>\n        </nav>\n\n        <!-- Toolbar -->\n        <div class=\"toolbar\">\n            <!-- Resized icons for consistency -->\n            <button class=\"btn small-btn\" onclick=\"format('bold')\" title=\"Bold\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/bold.png\" alt=\"Bold\">\n            </button>\n            <button class=\"btn small-btn\" onclick=\"format('italic')\" title=\"Italic\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/italic.png\" alt=\"Italic\">\n            </button>\n            <button class=\"btn small-btn\" onclick=\"format('underline')\" title=\"Underline\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/underline.png\" alt=\"Underline\">\n            </button>\n            <!-- Align Left -->\n            <button class=\"btn\" onclick=\"justify('left')\" title=\"Align Left\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/align-left.png\" alt=\"Align Left\">\n            </button>\n            <!-- Align Center -->\n            <button class=\"btn\" onclick=\"justify('center')\" title=\"Align Center\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/align-center.png\" alt=\"Align Center\">\n            </button>\n            <!-- Align Right -->\n            <button class=\"btn\" onclick=\"justify('right')\" title=\"Align Right\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/align-right.png\" alt=\"Align Right\">\n            </button>\n            <!-- Font Color Selection -->\n            <input type=\"color\" id=\"fontColor\" title=\"Font Color\" onchange=\"changeFontColor(this.value)\">\n            <!-- Additional Features -->\n            <!-- Bullet List -->\n            <button class=\"btn\" onclick=\"format('insertUnorderedList')\" title=\"Bullet List\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/bulleted-list.png\" alt=\"Bullet List\">\n            </button>\n            <!-- Numbered List -->\n            <button class=\"btn\" onclick=\"format('insertOrderedList')\" title=\"Numbered List\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/numbered-list.png\" alt=\"Numbered List\">\n            </button>\n            <!-- Indent -->\n            <button class=\"btn\" onclick=\"format('indent')\" title=\"Indent\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/indent.png\" alt=\"Indent\">\n            </button>\n            <!-- Outdent -->\n            <button class=\"btn\" onclick=\"format('outdent')\" title=\"Outdent\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/outdent.png\" alt=\"Outdent\">\n            </button>\n            <!-- Strikethrough -->\n            <button class=\"btn\" onclick=\"format('strikethrough')\" title=\"Strikethrough\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/strikethrough.png\" alt=\"Strikethrough\">\n            </button>\n            <!-- Superscript -->\n            <button class=\"btn\" onclick=\"format('superscript')\" title=\"Superscript\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/superscript.png\" alt=\"Superscript\">\n            </button>\n            <!-- Subscript -->\n            <button class=\"btn\" onclick=\"format('subscript')\" title=\"Subscript\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/subscript.png\" alt=\"Subscript\">\n            </button>\n            <!-- Highlight Color Selection -->\n            <input type=\"color\" id=\"highlightColor\" title=\"Highlight Color\" onchange=\"changeHighlightColor(this.value)\">\n            <!-- Insert Link -->\n            <button class=\"btn\" onclick=\"insertLink()\" title=\"Insert Link\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/link.png\" alt=\"Insert Link\">\n            </button>\n            <!-- Remove Formatting -->\n            <button class=\"btn\" onclick=\"format('removeFormat')\" title=\"Remove Formatting\">\n                <img src=\"https://img.icons8.com/ios-filled/50/000000/erase.png\" alt=\"Remove Formatting\">\n            </button>\n            <!-- Font selection -->\n            <select onchange=\"changeFont(this.value)\" title=\"Select Font\">\n                <option value=\"Arial\">Arial</option>\n                <option value=\"Calibri\">Calibri</option>\n                <option value=\"Times New Roman\">Times New Roman</option>\n                <option value=\"Courier New\">Courier New</option>\n                <option value=\"Verdana\">Verdana</option>\n            </select>\n            <!-- Font size selection -->\n            <select onchange=\"changeFontSize(this.value)\" title=\"Select Font Size\">\n                <option value=\"1\">8</option>\n                <option value=\"2\">10</option>\n                <option value=\"3\" selected>12</option>\n                <option value=\"4\">14</option>\n                <option value=\"5\">16</option>\n                <option value=\"6\">18</option>\n                <option value=\"7\">20</option>\n            </select>\n        </div>\n\n        <!-- Editable content area with placeholder -->\n        <div id=\"editor\" contenteditable=\"true\" data-placeholder=\"Start writing here...\"></div>\n\n        <!-- Status bar -->\n        <div id=\"statusbar\">\n            <span id=\"statusLabel\">Ready</span>\n            <span id=\"cursorPosition\">Ln 1, Col 1</span>\n            <span id=\"charCount\">Chars: 0</span>\n        </div>\n    </div>\n\n    <!-- Scripts -->\n    <script src=\"script.js\"></script>\n</body>\n</html>",
  "css": "html, body {\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\nbody {\n    font-family: Arial, sans-serif;\n}\n.app-container {\n    max-width: 960px;\n    margin: 0 auto;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n    box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n.menu-bar {\n    background-color: #333;\n    color: #fff;\n    z-index: 1000;\n}\n.menu {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n}\n.menu-item {\n    position: relative;\n    padding: 14px 16px;\n    cursor: pointer;\n    user-select: none;\n}\n.menu-item:hover {\n    background-color: #444;\n}\n.submenu {\n    display: none;\n    position: absolute;\n    background-color: #fff;\n    color: #000;\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    top: 100%;\n    left: 0;\n    box-shadow: 0 8px 16px rgba(0,0,0,0.2);\n    z-index: 1000;\n}\n.menu-item:hover > .submenu {\n    display: block;\n}\n.submenu li {\n    padding: 8px 12px;\n    cursor: pointer;\n    white-space: nowrap;\n}\n.submenu li:hover {\n    background-color: #ddd;\n}\n.toolbar {\n    background-color: #f1f1f1;\n    padding: 5px;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    border-bottom: 1px solid #ccc;\n}\n.btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 3px;\n    margin-right: 5px;\n    outline: none;\n    position: relative;\n}\n.btn img {\n    width: 20px;\n    height: 20px;\n}\n.btn.small-btn img {\n    width: 15px;\n    height: 15px;\n}\n#editor {\n    padding: 10px;\n    resize: vertical;\n    overflow: auto;\n    border: 1px solid #ccc;\n    box-sizing: border-box;\n    min-height: 384px; /* Approximately 20 rows */\n}\n#editor:empty:before {\n    content: attr(data-placeholder);\n    color: gray;\n    pointer-events: none;\n}\n#statusbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background-color: #f1f1f1;\n    border-top: 1px solid #ccc;\n    padding: 5px;\n    box-sizing: border-box;\n}\nselect, input[type=\"color\"] {\n    margin-left: 5px;\n    padding: 5px;\n    border: 1px solid #ccc;\n    border-radius: 3px;\n}\n/* Tooltips */\n.btn[title]:hover::after {\n    content: attr(title);\n    position: absolute;\n    background: #555;\n    color: #fff;\n    padding: 3px 5px;\n    border-radius: 3px;\n    top: 30px;\n    left: 50%;\n    transform: translateX(-50%);\n    white-space: nowrap;\n    z-index: 1;\n}\n",
  "js": "(function() {\n    // Formatting commands\n    window.format = function(command) {\n        document.execCommand(command, false, null);\n        document.getElementById('editor').focus();\n    };\n    // Justify commands\n    window.justify = function(direction) {\n        document.execCommand('justify' + direction.charAt(0).toUpperCase() + direction.slice(1), false, null);\n        document.getElementById('editor').focus();\n    };\n    // Change font\n    window.changeFont = function(fontName) {\n        document.execCommand('fontName', false, fontName);\n        document.getElementById('editor').focus();\n    };\n    // Change font size\n    window.changeFontSize = function(size) {\n        document.execCommand('fontSize', false, size);\n        document.getElementById('editor').focus();\n    };\n    // Change font color\n    window.changeFontColor = function(color) {\n        document.execCommand('foreColor', false, color);\n        document.getElementById('editor').focus();\n    };\n    // Change highlight color\n    window.changeHighlightColor = function(color) {\n        document.execCommand('hiliteColor', false, color);\n        document.getElementById('editor').focus();\n    };\n    // Insert link\n    window.insertLink = function() {\n        var url = prompt('Enter the URL:');\n        if (url) {\n            document.execCommand('createLink', false, url);\n        }\n    };\n    // Menu actions\n    window.newDocument = function() {\n        if (confirm('Are you sure you want to create a new document?')) {\n            document.getElementById('editor').innerHTML = '';\n        }\n    };\n    window.openDocument = function() {\n        var input = document.createElement('input');\n        input.type = 'file';\n        input.accept = 'text/plain, text/html';\n        input.onchange = function(event) {\n            var file = event.target.files[0];\n            var reader = new FileReader();\n            reader.onload = function(e) {\n                document.getElementById('editor').innerHTML = e.target.result;\n            };\n            reader.readAsText(file);\n        };\n        input.click();\n    };\n    window.saveDocument = function() {\n        var textToSave = document.getElementById('editor').innerHTML;\n        var blob = new Blob([textToSave], { type: 'text/html' });\n        var link = document.createElement('a');\n        link.download = 'document.html';\n        link.href = window.URL.createObjectURL(blob);\n        link.click();\n    };\n    window.printDocument = function() {\n        var printContents = document.getElementById('editor').innerHTML;\n        var originalContents = document.body.innerHTML;\n        document.body.innerHTML = printContents;\n        window.print();\n        document.body.innerHTML = originalContents;\n        location.reload();\n    };\n    window.exitApplication = function() {\n        if (confirm('Are you sure you want to exit?')) {\n            window.open('', '_self', '');\n            window.close();\n        }\n    };\n    window.undo = function() {\n        document.execCommand('undo', false, null);\n    };\n    window.redo = function() {\n        document.execCommand('redo', false, null);\n    };\n    window.cut = function() {\n        document.execCommand('cut', false, null);\n    };\n    window.copy = function() {\n        document.execCommand('copy', false, null);\n    };\n    window.paste = function() {\n        document.execCommand('paste', false, null);\n    };\n    window.selectAll = function() {\n        document.execCommand('selectAll', false, null);\n    };\n    window.openFontDialog = function() {\n        alert('Use the toolbar to change fonts.');\n    };\n    window.openParagraphDialog = function() {\n        alert('Paragraph settings are not implemented.');\n    };\n    window.zoomIn = function() {\n        var editor = document.getElementById('editor');\n        var currentZoom = parseFloat(editor.style.zoom) || 1;\n        editor.style.zoom = (currentZoom + 0.1);\n    };\n    window.zoomOut = function() {\n        var editor = document.getElementById('editor');\n        var currentZoom = parseFloat(editor.style.zoom) || 1;\n        editor.style.zoom = (currentZoom - 0.1);\n    };\n    window.toggleStatusBar = function() {\n        var statusBar = document.getElementById('statusbar');\n        if (statusBar.style.display === 'none') {\n            statusBar.style.display = 'flex';\n        } else {\n            statusBar.style.display = 'none';\n        }\n    };\n    window.viewHelp = function() {\n        alert('Help is not available.');\n    };\n    window.aboutWordPad = function() {\n        alert('rz AI AppGenerator V0.4 2024');\n    };\n    // Update cursor position and character count\n    var editor = document.getElementById('editor');\n    editor.addEventListener('keyup', updateStatusBar);\n    editor.addEventListener('click', updateStatusBar);\n    editor.addEventListener('input', updateStatusBar);\n    function updateStatusBar() {\n        var sel = window.getSelection();\n        if (sel.rangeCount) {\n            var range = sel.getRangeAt(0);\n            var preCaretRange = range.cloneRange();\n            preCaretRange.selectNodeContents(editor);\n            preCaretRange.setEnd(range.endContainer, range.endOffset);\n            var text = preCaretRange.toString();\n            var lines = text.split(/\\r?\\n/);\n            var lineNumber = lines.length;\n            var colNumber = lines[lines.length -1].length +1;\n            document.getElementById('cursorPosition').innerText = 'Ln ' + lineNumber + ', Col ' + colNumber;\n        }\n        var totalChars = editor.innerText.length;\n        document.getElementById('charCount').innerText = 'Chars: ' + totalChars;\n    }\n    // Initialize placeholder behavior\n    function updatePlaceholder() {\n        if (editor.innerText.trim().length) {\n            editor.classList.remove('empty');\n        } else {\n            editor.classList.add('empty');\n        }\n    }\n    editor.addEventListener('focus', updatePlaceholder);\n    editor.addEventListener('blur', updatePlaceholder);\n    editor.addEventListener('input', updatePlaceholder);\n    // Set initial placeholder\n    updatePlaceholder();\n    // Initialize editor\n    editor.focus();\n})();\n"
}