מוזיקה
||<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ממיר והשמעת קובצי אודיו לקובץ HTML עצמאי</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', system-ui, sans-serif;
background: #0f172a;
color: #f8fafc;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-6">
<div class="bg-slate-800/70 backdrop-blur-md border border-slate-700/50 p-8 rounded-2xl shadow-2xl max-w-xl w-full text-center">
<h2 class="text-2xl font-bold text-sky-400 mb-2">🎵 ממיר מוזיקה לקובץ HTML עצמאי</h2>
<p class="text-slate-400 text-sm mb-6">גרור לכאן קובץ שמע (MP3, WAV) או לחץ לבחירה כדי להטמיע אותו בנגן HTML עצמאי שרץ לחלוטין אצלך במחשב.</p>
<div id="dropZone" class="border-2 border-dashed border-sky-400/40 rounded-xl p-8 cursor-pointer transition-all hover:border-sky-400 hover:bg-sky-400/5 bg-slate-900/40" onclick="document.getElementById('fileInput').click()">
<span class="text-lg text-slate-200">📂 לחץ כאן או גרור קובץ מוזיקה לכאן</span>
<input type="file" id="fileInput" accept="audio/*" class="hidden">
</div>
<div id="playerContainer" class="mt-6 hidden bg-slate-900/60 p-4 rounded-xl border border-slate-700">
<p id="fileInfo" class="text-sm font-medium text-sky-300 mb-3 truncate"></p>
<audio id="audioPreview" controls class="w-full"></audio>
</div>
<div class="mt-6">
<button id="downloadBtn" class="hidden bg-sky-500 hover:bg-sky-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transition transform active:scale-95" onclick="downloadStandaloneAudioHTML()">
📥 הורד כקובץ HTML עצמאי עם השמעי
</button>
</div>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const dropZone = document.getElementById('dropZone');
const audioPreview = document.getElementById('audioPreview');
const playerContainer = document.getElementById('playerContainer');
const fileInfo = document.getElementById('fileInfo');
const downloadBtn = document.getElementById('downloadBtn');
let currentBase64Audio = '';
let currentFileName = '';
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) processAudioFile(file);
});
['dragenter', 'dragover'].forEach(eventName => {
dropZone.addEventListener(eventName, (e) => {
e.preventDefault();
dropZone.classList.add('border-sky-400', 'bg-sky-400/10');
}, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, (e) => {
e.preventDefault();
dropZone.classList.remove('border-sky-400', 'bg-sky-400/10');
}, false);
});
dropZone.addEventListener('drop', (e) => {
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('audio/')) {
processAudioFile(file);
} else {
showMsg('אנא בחר קובץ שמע תקין (כגון MP3).');
}
});
function showMsg(msg) {
console.log(msg);
}
function processAudioFile(file) {
currentFileName = file.name;
const reader = new FileReader();
reader.onload = function(e) {
currentBase64Audio = e.target.result;
audioPreview.src = currentBase64Audio;
playerContainer.classList.remove('hidden');
fileInfo.innerHTML = `שם הקובץ: <b>${file.name}</b> | גודל: ${(file.size / (1024*1024)).toFixed(2)} MB`;
downloadBtn.classList.remove('hidden');
};
reader.readAsDataURL(file);
}
function downloadStandaloneAudioHTML() {
if (!currentBase64Audio) return;
const standaloneContent = `<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>נגן אודיו מוטמע - ${currentFileName}</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: 'Inter', system-ui, sans-serif; background: #0b0f19; color: #f8fafc; }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="bg-slate-800 p-6 rounded-2xl shadow-2xl max-w-md w-full text-center border border-slate-700">
<h1 class="text-xl font-bold text-sky-400 mb-4"> ${currentFileName}</h1>
<audio controls autoplay class="w-full mb-4">
<source src="${currentBase64Audio}" type="audio/mp3">
הדפדפן שלך אינו תומך בניגון קובצי שמע.
</audio>
<p class="text-xs text-slate-400">קובץ זה מנוגן מתוך מעטפת HTML עצמאית לחלוטין ללא חיבור לאינטרנט.</p>
</div>
</body>
</html>`;
const blob = new Blob([standaloneContent], { type: 'text/html;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `standalone_audio_${currentFileName.replace(/\.[^/.]+$/, "")}.html`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>||