Capcut d'il y a quelques années

14 0 Sites web k2007531 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

7 October 2026

Chargeur de jeu WebGL Escape Road 3 en HTML et JavaScript

30 September 2026

Chargeur de canevas de jeu WebAssembly en HTML et JavaScript

8 May 2025

Chaîne animée

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CapCut Web Editor Clone</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app-container">
    
    <header class="navbar">
      <span>CapCut Web Clone</span>
      <button id="export-btn" class="btn-primary">Export</button>
    </header>

<div class="workspace">
      
      <aside class="sidebar">
        <h3>Audio Library</h3>
        <ul id="audio-list">
          <li data-src="assets/audio1.mp3">Upbeat Vlog Beat</li>
          <li data-src="assets/audio2.mp3">Cinematic Piano</li>
        </ul>
        <div class="upload-section">
          <label for="audio-upload" class="btn-secondary">Upload Audio</label>
          <input type="file" id="audio-upload" accept="audio/*" hidden>
        </div>
      </aside>

<main class="preview-area">
        <video id="video-preview" src="assets/sample-video.mp4" controls></video>
        <audio id="audio-player"></audio>
      </main>
    </div>

<footer class="timeline">
      <div class="controls-bar">
        <button id="play-btn">Play / Pause</button>
        <input type="range" id="timeline-slider" value="0" min="0" max="100" step="0.1">
        <span id="time-display">00:00 / 00:00</span>
      </div>
      <div class="track-row">
        <span class="track-label">Audio Track</span>
        <div id="active-track-name" class="track-slot">No audio selected</div>
      </div>
    </footer>
  </div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

body {
  background-color: #121212;
  color: #fff;
  height: 100vh;
  overflow: hidden;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.navbar {
  height: 50px;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #333;
}

.workspace {
  display: flex;
  flex: 1;
  height: calc(100vh - 180px);
}

.sidebar {
  width: 250px;
  background: #1a1a1a;
  border-right: 1px solid #333;
  padding: 15px;
}

.sidebar h3 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #aaa;
}

#audio-list li {
  list-style: none;
  background: #252525;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

#audio-list li:hover {
  background: #3a3a3a;
}

.preview-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}

#video-preview {
  max-width: 100%;
  max-height: 100%;
}

.timeline {
  height: 130px;
  background: #1e1e1e;
  border-top: 1px solid #333;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  gap: 10px;
}

.controls-bar {
  display: flex;
  align-items: center;
  gap: 15px;
}

#timeline-slider {
  flex: 1;
  accent-color: #3b82f6;
}

.track-row {
  display: flex;
  align-items: center;
  background: #252525;
  height: 45px;
  border-radius: 6px;
  padding: 0 12px;
  gap: 15px;
}

.track-label {
  font-size: 12px;
  color: #bbb;
  width: 90px;
}

.track-slot {
  background: #3b82f6;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.btn-primary {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  display: inline-block;
  background: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-top: 10px;
}

const video = document.getElementById('video-preview');
const audio = document.getElementById('audio-player');
const audioListItems = document.querySelectorAll('#audio-list li');
const audioUpload = document.getElementById('audio-upload');
const activeTrackName = document.getElementById('active-track-name');
const playBtn = document.getElementById('play-btn');
const timelineSlider = document.getElementById('timeline-slider');

// Select audio from built-in list
audioListItems.forEach(item => {
  item.addEventListener('click', () => {
    const src = item.getAttribute('data-src');
    const name = item.textContent;
    loadAudio(src, name);
  });
});

// Upload custom audio file
audioUpload.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    const url = URL.createObjectURL(file);
    loadAudio(url, file.name);
  }
});

function loadAudio(src, name) {
  audio.src = src;
  activeTrackName.textContent = name;
  audio.load();
}

// Play / Pause both video and audio together
playBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    audio.play();
    playBtn.textContent = 'Pause';
  } else {
    video.pause();
    audio.pause();
    playBtn.textContent = 'Play / Pause';
  }
});

// Keep audio synced with video time
video.addEventListener('play', () => audio.play());
video.addEventListener('pause', () => audio.pause());
video.addEventListener('seeking', () => {
  audio.currentTime = video.currentTime;
});

// Update slider as video plays
video.addEventListener('timeupdate', () => {
  if (video.duration) {
    timelineSlider.value = (video.currentTime / video.duration) * 100;
  }
});

// Scrub timeline
timelineSlider.addEventListener('input', (e) => {
  if (video.duration) {
    const seekTime = (e.target.value / 100) * video.duration;
    video.currentTime = seekTime;
    audio.currentTime = seekTime;
  }
});

Comments 0

…