"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface AudioPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
  artist?: string;
  duration?: number;
  autoPlay?: boolean;
  showWaveform?: boolean;
}

const PlayIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M8 5v14l11-7-11-7z" />
  </svg>
);

const PauseIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <rect x="6" y="5" width="4" height="14" rx="1" />
    <rect x="14" y="5" width="4" height="14" rx="1" />
  </svg>
);

const VolumeIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M4 10v4h4l5 4V6l-5 4H4z"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M16 9a4 4 0 010 6"
      strokeWidth="1.5"
      strokeLinecap="round"
    />
    <path
      d="M18.5 7a7 7 0 010 10"
      strokeWidth="1.5"
      strokeLinecap="round"
    />
  </svg>
);

const VolumeMutedIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M4 10v4h4l5 4V6l-5 4H4z"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M16 9l4 6M20 9l-4 6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

function formatTime(time: number) {
  if (!Number.isFinite(time)) return "0:00";
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value));
}

export function AudioPlayer({
  title = "Ambient Focus",
  artist = "Studio Session",
  duration = 245,
  autoPlay = false,
  showWaveform = true,
  className,
  ...props
}: AudioPlayerProps) {
  const [isPlaying, setIsPlaying] = React.useState(autoPlay);
  const [currentTime, setCurrentTime] = React.useState(42);
  const [volume, setVolume] = React.useState(72);

  const waveformBars = React.useMemo(
    () => [0.3, 0.7, 0.4, 0.9, 0.5, 0.8, 0.45, 0.75, 0.35, 0.6, 0.4, 0.85],
    []
  );

  React.useEffect(() => {
    if (!isPlaying) return;

    const timer = window.setInterval(() => {
      setCurrentTime((prev) => {
        const next = prev + 1;
        if (next >= duration) {
          setIsPlaying(false);
          return duration;
        }
        return next;
      });
    }, 1000);

    return () => window.clearInterval(timer);
  }, [isPlaying, duration]);

  const progress = duration ? (currentTime / duration) * 100 : 0;

  const handleSeek = (event: React.MouseEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect();
    const percent = clamp((event.clientX - rect.left) / rect.width, 0, 1);
    setCurrentTime(Math.round(percent * duration));
  };

  const handleVolume = (event: React.MouseEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect();
    const percent = clamp((event.clientX - rect.left) / rect.width, 0, 1);
    setVolume(Math.round(percent * 100));
  };

  const toggleMute = () => {
    setVolume((prev) => (prev === 0 ? 72 : 0));
  };

  return (
    <div
      className={cn(
        "flex w-full flex-col gap-4 rounded-2xl border border-border bg-card p-4",
        className
      )}
      {...props}
    >
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-sm text-muted-foreground">Now playing</p>
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
          <p className="text-sm text-muted-foreground">{artist}</p>
        </div>
        <button
          type="button"
          onClick={() => setIsPlaying((prev) => !prev)}
          className="flex items-center gap-2 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition hover:bg-muted"
        >
          {isPlaying ? <PauseIcon className="h-4 w-4" /> : <PlayIcon className="h-4 w-4" />}
          {isPlaying ? "Pause" : "Play"}
        </button>
      </div>

      <div className="flex items-center justify-between text-xs text-muted-foreground">
        <span>{formatTime(currentTime)}</span>
        <span>{formatTime(duration)}</span>
      </div>

      <div className="flex flex-col gap-3">
        <div
          className="relative h-2 w-full cursor-pointer rounded-full bg-muted"
          onClick={handleSeek}
          role="slider"
          aria-label="Seek"
          aria-valuenow={currentTime}
          aria-valuemin={0}
          aria-valuemax={duration}
        >
          <div
            className="absolute inset-y-0 left-0 rounded-full bg-accent"
            style={{ width: `${progress}%` }}
          />
        </div>

        {showWaveform ? (
          <div className="flex items-end gap-1">
            {waveformBars.map((bar, index) => (
              <span
                key={`wave-${index}`}
                className={cn(
                  "w-1 rounded-full",
                  index / waveformBars.length <= progress / 100
                    ? "bg-accent"
                    : "bg-muted"
                )}
                style={{ height: `${Math.max(10, bar * 40)}px` }}
              />
            ))}
          </div>
        ) : null}

        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={toggleMute}
              className="rounded-full border border-border p-2 text-foreground transition hover:bg-muted"
              aria-label={volume === 0 ? "Unmute" : "Mute"}
            >
              {volume === 0 ? (
                <VolumeMutedIcon className="h-4 w-4" />
              ) : (
                <VolumeIcon className="h-4 w-4" />
              )}
            </button>
            <div
              className="relative h-2 w-24 cursor-pointer rounded-full bg-muted"
              onClick={handleVolume}
              role="slider"
              aria-label="Volume"
              aria-valuenow={volume}
              aria-valuemin={0}
              aria-valuemax={100}
            >
              <div
                className="absolute inset-y-0 left-0 rounded-full bg-accent"
                style={{ width: `${volume}%` }}
              />
            </div>
          </div>
          <span className="text-xs text-muted-foreground">{volume}%</span>
        </div>
      </div>
    </div>
  );
}
Audio Player

Ambient Focus

Dependencies

Files

Installation
