[V0_FILE]typescriptreact:file="components/waveform-display.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useRef } from "react" interface WaveformDisplayProps { waveformData: number[] currentTime: number duration: number } export default function WaveformDisplay({ waveformData, currentTime, duration }: WaveformDisplayProps) { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) if (waveformData.length === 0) { // Draw placeholder line if no waveform data ctx.beginPath() ctx.moveTo(0, canvas.height / 2) ctx.lineTo(canvas.width, canvas.height / 2) ctx.strokeStyle = "#4b5563" ctx.stroke() return } const barWidth = canvas.width / waveformData.length const playbackPosition = duration > 0 ? (currentTime / duration) * canvas.width : 0 // Draw waveform waveformData.forEach((amplitude, index) => { const x = index * barWidth const height = amplitude * canvas.height * 0.8 const y = (canvas.height - height) / 2 // Change color based on playback position if (x < playbackPosition) { ctx.fillStyle = "#60a5fa" // Played part } else { ctx.fillStyle = "#9ca3af" // Unplayed part } ctx.fillRect(x, y, barWidth - 1, height) }) // Draw playback position line ctx.beginPath() ctx.moveTo(playbackPosition, 0) ctx.lineTo(playbackPosition, canvas.height) ctx.strokeStyle = "#f43f5e" ctx.lineWidth = 2 ctx.stroke() }, [waveformData, currentTime, duration]) return

Deck A

Crossfader

Deck B

DJ Turntables

About

Tags

Share

About

Tags

Share

More from tommybez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from tommybez

More Templates Like This