当前位置：首页 > news >正文

音频转base64

news 2025/4/28 8:02:10

在这里插入图片描述

<!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>