音频转base64 - 技术栈

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频转Base64</title>
    <style>
        .container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            border: 1px solid #ccc;
            border-radius: 8px;
        }

        .upload-box {
            border: 2px dashed #aaa;
            padding: 2rem;
            text-align: center;
            margin-bottom: 1rem;
            cursor: pointer;
        }

        .upload-box:hover {
            background-color: #f9f9f9;
        }

        #audio-preview {
            margin-top: 1rem;
        }

        #result {
            margin-top: 1rem;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .hidden {
            display: none;
        }

        .error {
            color: red;
            margin-top: 1rem;
        }
    </style>
	  <style>
        /* 新增按钮样式 */
        .copy-btn {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .copy-btn:hover {
            background-color: #45a049;
        }

        .copy-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        /* 提示信息样式 */
        .copy-status {
            margin-top: 0.5rem;
            font-size: 0.9rem;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .copy-success {
            color: #4CAF50;
            opacity: 1;
        }

        .copy-error {
            color: #f44336;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="upload-box" id="drop-zone">
            <p>点击选择音频文件或拖放到此处</p>
            <input type="file" id="file-input" accept="audio/*" hidden>
        </div>
        <div id="audio-preview" class="hidden"></div>
        <div id="error-message" class="error"></div>
		 <div class="container">
        <!-- ... 原有代码 ... -->
        <button id="copy-btn" class="copy-btn" >复制Base64</button>
        <div id="copy-status" class="copy-status"></div>
    </div>
        <div id="result"></div>
    </div>
  <script>
        // 新增变量
        const copyBtn = document.getElementById('copy-btn');
        const copyStatus = document.getElementById('copy-status');

        // 修改handleFile函数
        function handleFile(file) {
            // ... 原有代码 ...

            reader.onload = function(e) {
                audio.src = e.target.result;
                const base64 = e.target.result.split(',')[1];
                resultDiv.textContent = base64;
                
                // 启用复制按钮
                copyBtn.disabled = true;
                copyStatus.className = 'copy-status';  // 重置状态
            };
        }

        // 新增复制功能
        copyBtn.addEventListener('click', async () => {
            try {
                const text = resultDiv.textContent;
                if (!text) {
                    throw new Error('没有可复制的内容');
                }

                await navigator.clipboard.writeText(text);
                showCopyStatus('复制成功！', 'success');
            } catch (err) {
                showCopyStatus(`复制失败: ${err.message}`, 'error');
            }
        });

        // 新增状态显示函数
        function showCopyStatus(message, type) {
            copyStatus.textContent = message;
            copyStatus.className = `copy-status copy-${type}`;
            
            // 3秒后淡出提示
            setTimeout(() => {
                copyStatus.style.opacity = '0';
            }, 3000);
        }

        // 修改showError函数
        function showError(message) {
            // ... 原有代码 ...
            copyBtn.disabled = true;
        }
    </script>
    <script>
        const dropZone = document.getElementById('drop-zone');
        const fileInput = document.getElementById('file-input');
        const audioPreview = document.getElementById('audio-preview');
        const resultDiv = document.getElementById('result');
        const errorMessage = document.getElementById('error-message');

        // 点击上传区域触发文件选择
        dropZone.addEventListener('click', () => fileInput.click());

        // 处理文件选择
        fileInput.addEventListener('change', handleFileSelect);

        // 处理拖放功能
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.style.backgroundColor = '#f0f0f0';
        });

        dropZone.addEventListener('dragleave', () => {
            dropZone.style.backgroundColor = '';
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.style.backgroundColor = '';
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (file) {
                handleFile(file);
            }
        }

        function handleFile(file) {
            // 验证文件类型
            if (!file.type.startsWith('audio/')) {
                showError('请选择有效的音频文件');
                return;
            }

            // 重置状态
            errorMessage.textContent = '';
            resultDiv.textContent = '';

            // 显示音频预览
            const audio = document.createElement('audio');
            audio.controls = true;
            audioPreview.innerHTML = '';
            audioPreview.appendChild(audio);
            audioPreview.classList.remove('hidden');

            // 读取文件
            const reader = new FileReader();
            
            reader.onload = function(e) {
                audio.src = e.target.result;
                
                // 获取Base64编码（去掉Data URL前缀）
                const base64 = e.target.result.split(',')[1];
                resultDiv.textContent = base64;
            };

            reader.onerror = function() {
                showError('文件读取失败');
            };

            reader.readAsDataURL(file);
        }

        function showError(message) {
            errorMessage.textContent = message;
            audioPreview.classList.add('hidden');
            resultDiv.textContent = '';
        }
    </script>
</body>
</html>