seowriting

بواسطة morbah | مارس 04, 2025

دمج صوت وصور إلى فيديو

اختر ملف الصوت: اختر الصور:

لم تفهم نقطة معينة؟

اسأل المساعد الذكي وسيجيبك بناءً على محتوى هذا المقال.

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>دمج صوت وصور إلى فيديو</title> <style> body { font-family: sans-serif; } .container { max-width: 800px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; } input[type="file"], button { margin-bottom: 10px; display: block; } #preview { display: flex; flex-wrap: wrap; margin-bottom: 10px; } #preview img { max-width: 100px; max-height: 100px; margin-right: 10px; margin-bottom: 10px; border: 1px solid #ddd; } #video-output { width: 100%; } </style> </head> <body> <div class="container"> <h1>دمج صوت وصور إلى فيديو</h1> <label for="audio-input">اختر ملف الصوت:</label> <input type="file" id="audio-input" accept="audio/*"> <label for="image-input">اختر الصور:</label> <input type="file" id="image-input" accept="image/*" multiple> <div id="preview"></div> <button id="create-video-button">إنشاء الفيديو</button> <canvas id="canvas" width="640" height="360" style="display: none;"></canvas> <video id="video-output" controls></video> </div> <script> const audioInput = document.getElementById('audio-input'); const imageInput = document.getElementById('image-input'); const previewDiv = document.getElementById('preview'); const createVideoButton = document.getElementById('create-video-button'); const canvas = document.getElementById('canvas'); const videoOutput = document.getElementById('video-output'); const ctx = canvas.getContext('2d'); let audioURL = null; let imageURLs = []; let audioBuffer = null; // لتخزين الصوت كـ AudioBuffer // 1. معالجة تحميل ملف الصوت audioInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { audioURL = URL.createObjectURL(file); // تحويل الصوت إلى AudioBuffer const reader = new FileReader(); reader.onload = async (e) => { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); audioBuffer = await audioContext.decodeAudioData(e.target.result); }; reader.readAsArrayBuffer(file); } }); // 2. معالجة تحميل الصور imageInput.addEventListener('change', (event) => { const files = Array.from(event.target.files); imageURLs = []; // إعادة تعيين المصفوفة previewDiv.innerHTML = ''; // مسح المعاينة files.forEach(file => { if (file.type.startsWith('image/')) { const imageURL = URL.createObjectURL(file); imageURLs.push(imageURL); // عرض معاينة للصور const img = document.createElement('img'); img.src = imageURL; previewDiv.appendChild(img); } }); }); // دالة تحميل صورة (لتحويل الرابط إلى كائن Image) function loadImage(url) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = url; }); } // 3. إنشاء الفيديو createVideoButton.addEventListener('click', async () => { if (!audioURL || imageURLs.length === 0) { alert('الرجاء اختيار ملف صوتي وصورة واحدة على الأقل.'); return; } createVideoButton.disabled = true; createVideoButton.textContent = 'جاري الإنشاء...'; const durationPerImage = audioBuffer ? audioBuffer.duration / imageURLs.length : 5; // إذا لم يكن هناك صوت، افترض 5 ثوانٍ لكل صورة // إنشاء MediaStream من Canvas const stream = canvas.captureStream(); // إضافة مسار الصوت (إذا كان موجودًا) let audioTrack; if (audioBuffer) { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const source = audioContext.createBufferSource(); source.buffer = audioBuffer; const destination = audioContext.createMediaStreamDestination(); source.connect(destination); audioTrack = destination.stream.getAudioTracks()[0]; stream.addTrack(audioTrack); source.start(); // ابدأ تشغيل الصوت } const recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9,opus' }); const chunks = []; recorder.ondataavailable = (event) => { if (event.data.size > 0) { chunks.push(event.data); } }; recorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); const videoURL = URL.createObjectURL(blob); videoOutput.src = videoURL; videoOutput.style.display = 'block'; canvas.style.display = 'none'; createVideoButton.disabled = false; createVideoButton.textContent = 'إنشاء الفيديو'; }; recorder.start(); for (const imageUrl of imageURLs) { try{ const img = await loadImage(imageUrl); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); await new Promise(resolve => setTimeout(resolve, durationPerImage * 1000)); }catch(error){ console.error("خطأ:", error); } } recorder.stop(); if (audioBuffer && audioTrack) { // توقيف تشغيل الصوت عند انتهاء مدة الفيديو setTimeout(()=>{ audioTrack.stop(); }, audioBuffer.duration * 1000) } }); </script> </body> </html>

الكاتب : morbah

انا مهتم بمجال التقنية والربح من الانترنت واتطلع لنشر المزيد من المقالات التي تفيدكم

🎨 شكل الهيدر

seowriting

دمج صوت وصور إلى فيديو

لم تفهم نقطة معينة؟

الكاتب : morbah

تعليقات

إرسال تعليق

المساعد الذكي للمدونة

دمج صوت وصور إلى فيديو

لم تفهم نقطة معينة؟

شارك المقال مع أصدقائك

الكاتب : morbah

تعليقات

إرسال تعليق

المساعد الذكي للمدونة

شرح وتوضيح الفقرة

مشاركة في التطبيقات الأخرى