zhensolid
/
ESP32-S3-N16R8-MIC


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE html>
<html>

<head>
    <title>ESP32音乐播放器</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .upload-form {
            border: 2px dashed #ccc;
            padding: 20px;
            margin: 20px 0;
        }

        .file-list {
            margin: 20px 0;
        }

        .file-item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>

<body>
    <h1>ESP32音乐播放器</h1>

    <div class="upload-form">
        <h2>上传音乐文件</h2>
        <form id="uploadForm">
            <input type="file" id="audioFile" accept="audio/*" required>
            <button type="submit">上传</button>
        </form>
    </div>

    <div class="file-list">
        <h2>已上传的音乐</h2>
        <div id="fileList">
            <!-- 文件列表将通过JavaScript动态填充 -->
        </div>
    </div>

    <script>
        document.getElementById('uploadForm').onsubmit = async (e) => {
            e.preventDefault();
            const formData = new FormData();
            const file = document.getElementById('audioFile').files[0];
            formData.append('file', file);

            try {
                const response = await fetch('/upload', {
                    method: 'POST',
                    body: formData
                });
                if (response.ok) {
                    alert('文件上传成功');
                    // 刷新文件列表
                    loadFileList();
                } else {
                    alert('上传失败');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('上传出错');
            }
        };

        function playFile(filename) {
            fetch(`/play?file=${encodeURIComponent(filename)}`)
                .then(response => response.text())
                .then(result => alert(result))
                .catch(error => alert('播放失败'));
        }

        async function loadFileList() {
            try {
                const response = await fetch('/list');
                const files = await response.json();
                const fileList = document.getElementById('fileList');
                fileList.innerHTML = files.map(file => `
                    <div class="file-item">
                        <span>${file}</span>
                        <button onclick="playFile('${file}')">播放</button>
                    </div>
                `).join('');
            } catch (error) {
                console.error('Error:', error);
            }
        }

        // 页面加载时获取文件列表
        loadFileList();
    </script>
</body>

</html>