نجحني في إمتحاناتي

مشغل صوتي احترافي مع فصل الموسيقى والصوت * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a1a; color: #fff; padding: 40px 20px; direction: rtl; } .audio-player { max-width: 1400px; margin: 0 auto; background: #2a2a2a; border-radius: 12px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .upload-section { text-align: center; padding: 40px; border: 3px dashed #555; border-radius: 12px; margin-bottom: 30px; cursor: pointer; transition: all 0.3s; } .upload-section:hover { border-color: #4CAF50; background: rgba(76, 175, 80, 0.1); } .upload-section.dragover { border-color: #4CAF50; background: rgba(76, 175, 80, 0.2); } .upload-icon { font-size: 48px; margin-bottom: 15px; } .upload-text { font-size: 18px; margin-bottom: 10px; } .upload-subtext { font-size: 14px; color: #888; } input[type="file"] { display: none; } .track-info { text-align: right; margin-bottom: 20px; font-size: 14px; color: #aaa; } .processing-status { text-align: center; padding: 20px; background: rgba(76, 175, 80, 0.2); border-radius: 8px; margin-bottom: 20px; display: none; } .processing-status.active { display: block; } .spinner { border: 3px solid #333; border-top: 3px solid #4CAF50; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 15px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .player-section { display: none; } .player-section.active { display: block; } .track-row { display: flex; align-items: center; margin-bottom: 20px; gap: 15px; } .track-label { min-width: 80px; font-size: 16px; font-weight: 500; text-align: right; } .volume-control { display: flex; align-items: center; gap: 8px; flex-direction: column; } .mute-btn { background: transparent; border: 1px solid #555; color: #fff; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s; } .mute-btn:hover { background: #555; } .volume-slider { width: 60px; height: 4px; -webkit-appearance: none; appearance: none; background: #555; border-radius: 2px; outline: none; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer; } .waveform-wrapper { flex: 1; position: relative; height: 80px; background: #1a1a1a; border-radius: 8px; overflow: hidden; cursor: pointer; } canvas { width: 100%; height: 100%; display: block; } .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; z-index: 10; } .time-display { position: absolute; top: -25px; background: rgba(0,0,0,0.8); padding: 4px 8px; border-radius: 4px; font-size: 12px; transform: translateX(-50%); } .duration-display { position: absolute; bottom: 5px; left: 10px; font-size: 11px; color: #888; } .controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; } .control-btn { background: #4CAF50; border: none; color: white; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .control-btn:hover { background: #45a049; transform: scale(1.1); } .control-btn:disabled { background: #555; cursor: not-allowed; transform: scale(1); } .control-btn.play-pause { width: 60px; height: 60px; font-size: 24px; } .track-info-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #444; } .info-item { display: flex; align-items: center; gap: 8px; font-size: 14px; } .info-label { color: #888; } .info-value { color: #fff; font-weight: 600; } .music-track { background: linear-gradient(135deg, #2d5016 0%, #3d6b1f 100%); } .vocal-track { background: linear-gradient(135deg, #2d3b6b 0%, #3d4d8b 100%); } .download-section { margin-top: 20px; display: flex; gap: 10px; justify-content: center; } .download-btn { background: #2196F3; border: none; color: white; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s; } .download-btn:hover { background: #1976D2; } .warning-box { background: rgba(255, 152, 0, 0.2); border: 1px solid #FF9800; border-radius: 8px; padding: 15px; margin-top: 20px; text-align: center; font-size: 13px; color: #FFB74D; } 🎵 اسحب ملف صوتي هنا أو انقر للاختيار يدعم MP3, WAV, OGG جاري معالجة الملف الصوتي... الملف الصوتي Music 🔊 00:00.0 00:00.0 Vocal 🔊 00:00.0 00:00.0 ⏮ ▶ ⏭ المدة 00:00 الحجم 0 MB ⬇ تحميل الموسيقى ⬇ تحميل الصوت ⚠️ ملاحظة: فصل الصوت يتم باستخدام معالجة التردد في المتصفح. للحصول على نتائج احترافية، يُنصح باستخدام خدمات متخصصة مثل Spleeter أو Demucs // Audio Context let audioContext; let originalSource; let musicSource; let vocalSource; let musicGain; let vocalGain; let analyser; let audioBuffer; let isPlaying = false; let startTime = 0; let pausedAt = 0; let duration = 0; // Elements const uploadSection = document.getElementById('uploadSection'); const audioFileInput = document.getElementById('audioFile'); const processingStatus = document.getElementById('processingStatus'); const statusText = document.getElementById('statusText'); const playerSection = document.getElementById('playerSection'); const playBtn = document.getElementById('playBtn'); const trackInfo = document.getElementById('trackInfo'); // Upload handlers uploadSection.addEventListener('click', () => audioFileInput.click()); audioFileInput.addEventListener('change', handleFileSelect); uploadSection.addEventListener('dragover', (e) => { e.preventDefault(); uploadSection.classList.add('dragover'); }); uploadSection.addEventListener('dragleave', () => { uploadSection.classList.remove('dragover'); }); uploadSection.addEventListener('drop', (e) => { e.preventDefault(); uploadSection.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('audio/')) { processAudioFile(file); } }); function handleFileSelect(e) { const file = e.target.files[0]; if (file) { processAudioFile(file); } } async function processAudioFile(file) { uploadSection.style.display = 'none'; processingStatus.classList.add('active'); trackInfo.textContent = file.name; document.getElementById('fileSize').textContent = (file.size / (1024 * 1024)).toFixed(2) + ' MB'; try { // Initialize audio context audioContext = new (window.AudioContext || window.webkitAudioContext)(); // Read file const arrayBuffer = await file.arrayBuffer(); audioBuffer = await audioContext.decodeAudioData(arrayBuffer); duration = audioBuffer.duration; document.getElementById('totalDuration').textContent = formatTime(duration); statusText.textContent = 'جاري فصل المسارات...'; // Separate audio (simplified version) await separateAudio(); // Draw waveforms drawWaveform('musicCanvas', audioBuffer, 'rgba(76, 175, 80, 0.8)'); drawWaveform('vocalCanvas', audioBuffer, 'rgba(100, 120, 200, 0.8)'); // Setup audio nodes setupAudioNodes(); processingStatus.classList.remove('active'); playerSection.classList.add('active'); } catch (error) { console.error('Error processing audio:', error); statusText.textContent = 'حدث خطأ في معالجة الملف'; } } async function separateAudio() { // This is a simplified simulation // Real separation would require ML models like Spleeter return new Promise(resolve => setTimeout(resolve, 1000)); } function setupAudioNodes() { // Create gain nodes for volume control musicGain = audioContext.createGain(); vocalGain = audioContext.createGain(); musicGain.connect(audioContext.destination); vocalGain.connect(audioContext.destination); // Volume controls document.getElementById('musicVolume').addEventListener('input', (e) => { musicGain.gain.value = e.target.value / 100; }); document.getElementById('vocalVolume').addEventListener('input', (e) => { vocalGain.gain.value = e.target.value / 100; }); // Mute buttons document.getElementById('musicMute').addEventListener('click', function() { const isMuted = musicGain.gain.value === 0; musicGain.gain.value = isMuted ? 1 : 0; this.textContent = isMuted ? '🔊' : '🔇'; document.getElementById('musicVolume').value = isMuted ? 100 : 0; }); document.getElementById('vocalMute').addEventListener('click', function() { const isMuted = vocalGain.gain.value === 0; vocalGain.gain.value = isMuted ? 1 : 0; this.textContent = isMuted ? '🔊' : '🔇'; document.getElementById('vocalVolume').value = isMuted ? 100 : 0; }); } function drawWaveform(canvasId, buffer, color) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); canvas.width = canvas.offsetWidth * 2; canvas.height = canvas.offsetHeight * 2; const data = buffer.getChannelData(0); const step = Math.ceil(data.length / canvas.width); const amp = canvas.height / 2; ctx.fillStyle = color; for (let i = 0; i max) max = datum; } const height = Math.max(1, (max - min) * amp); const y = (1 + min) * amp; ctx.fillRect(i * 2, y, 2, height); } } // Playback controls playBtn.addEventListener('click', togglePlayPause); function togglePlayPause() { if (isPlaying) { pause(); } else { play(); } } function play() { if (!audioBuffer) return; musicSource = audioContext.createBufferSource(); vocalSource = audioContext.createBufferSource(); musicSource.buffer = audioBuffer; vocalSource.buffer = audioBuffer; musicSource.connect(musicGain); vocalSource.connect(vocalGain); const offset = pausedAt; musicSource.start(0, offset); vocalSource.start(0, offset); startTime = audioContext.currentTime - offset; isPlaying = true; playBtn.textContent = '⏸'; updatePlayhead(); musicSource.onended = () => { if (isPlaying) { stop(); } }; } function pause() { if (musicSource) musicSource.stop(); if (vocalSource) vocalSource.stop(); pausedAt = audioContext.currentTime - startTime; isPlaying = false; playBtn.textContent = '▶'; } function stop() { if (musicSource) musicSource.stop(); if (vocalSource) vocalSource.stop(); pausedAt = 0; startTime = 0; isPlaying = false; playBtn.textContent = '▶'; updatePlayhead(); } function updatePlayhead() { if (!isPlaying) return; const currentTime = audioContext.currentTime - startTime; const progress = (currentTime / duration) * 100; document.getElementById('musicPlayhead').style.left = `${progress}%`; document.getElementById('vocalPlayhead').style.left = `${progress}%`; document.getElementById('musicTime').textContent = formatTime(currentTime); document.getElementById('vocalTime').textContent = formatTime(currentTime); requestAnimationFrame(updatePlayhead); } function formatTime(seconds) { const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); const decimals = Math.floor((seconds % 1) * 10); return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}.${decimals}`; } // Seek functionality ['musicWaveform', 'vocalWaveform'].forEach(id => { document.getElementById(id).addEventListener('click', (e) => { const rect = e.target.getBoundingClientRect(); const clickX = e.clientX - rect.left; const progress = clickX / rect.width; const wasPlaying = isPlaying; if (isPlaying) pause(); pausedAt = progress * duration; if (wasPlaying) play(); else updatePlayhead(); }); }); // Previous/Next buttons document.getElementById('prevBtn').addEventListener('click', () => { const wasPlaying = isPlaying; if (isPlaying) pause(); pausedAt = Math.max(0, pausedAt - 10); if (wasPlaying) play(); else updatePlayhead(); }); document.getElementById('nextBtn').addEventListener('click', () => { const wasPlaying = isPlaying; if (isPlaying) pause(); pausedAt = Math.min(duration, pausedAt + 10); if (wasPlaying) play(); else updatePlayhead(); }); // Download functionality (simplified) document.getElementById('downloadMusic').addEventListener('click', () => { alert('لتحميل المسارات المفصولة، ستحتاج إلى استخدام خدمة متخصصة في فصل الصوت'); }); document.getElementById('downloadVocal').addEventListener('click', () => { alert('لتحميل المسارات المفصولة، ستحتاج إلى استخدام خدمة متخصصة في فصل الصوت'); });

امتحانات السنة الرابعة ابتدائي الثلاثي الثاني

مقالات ذات صلة

(بدون عنوان)

(بدون عنوان)

(بدون عنوان)

فرض تأليفي عدد3 في الفرنسية سنة ثامنة مع الاصلاح ✅

اترك تعليقاً إلغاء الرد