Audio

1"use client";
2
3import { MenuTrigger } from "@base-ui/react";
4import * as React from "react";
5
6import { Button } from "@/components/ui/button";
7import {
8  DropdownMenu,
9  DropdownMenuContent,
10  DropdownMenuItem,
11  DropdownMenuTrigger,
12} from "@/components/ui/dropdown-menu";
13import { Slider } from "@/components/ui/slider";
14import { cn } from "@/lib/utils";
15import {
16  Check,
17  Gauge,
18  Pause,
19  Play,
20  Repeat,
21  Repeat1,
22  Volume,
23  Volume1,
24  Volume2,
25  VolumeX,
26} from "lucide-react";
27
28declare global {
29  interface Window {
30    webkitAudioContext: typeof AudioContext;
31  }
32}
33
34type AudioContext = {
35  audioRef: React.RefObject<HTMLAudioElement | null>;
36  containerRef: React.RefObject<HTMLDivElement | null>;
37  analyserRef: React.RefObject<AnalyserNode | null>;
38  graphRef: React.RefObject<globalThis.AudioContext | null>;
39  paused: boolean;
40  setPaused: React.Dispatch<React.SetStateAction<boolean>>;
41  progress: number;
42  setProgress: React.Dispatch<React.SetStateAction<number>>;
43  volume: number;
44  setVolume: React.Dispatch<React.SetStateAction<number>>;
45  muted: boolean;
46  setMuted: React.Dispatch<React.SetStateAction<boolean>>;
47  loop: boolean;
48  setLoop: React.Dispatch<React.SetStateAction<boolean>>;
49  playbackRate: number;
50  setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
51  duration: number;
52  setDuration: React.Dispatch<React.SetStateAction<number>>;
53  currentTime: number;
54  setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
55};
56
57const DefaultAudioContext: AudioContext = {
58  audioRef: { current: null },
59  containerRef: { current: null },
60  analyserRef: { current: null },
61  graphRef: { current: null },
62  paused: true,
63  setPaused: () => {},
64  progress: 0,
65  setProgress: () => {},
66  volume: 1,
67  setVolume: () => {},
68  muted: false,
69  setMuted: () => {},
70  loop: false,
71  setLoop: () => {},
72  playbackRate: 1,
73  setPlaybackRate: () => {},
74  duration: 0,
75  setDuration: () => {},
76  currentTime: 0,
77  setCurrentTime: () => {},
78};
79
80if (typeof window !== "undefined") {
81  const _error = console.error.bind(console);
82  console.error = (...args) => {
83    if (typeof args[0] === "string" && args[0].includes("script")) return;
84    _error(...args);
85  };
86}
87
88const WaveformCache = new WeakMap<
89  HTMLAudioElement,
90  { ctx: globalThis.AudioContext; analyser: AnalyserNode }
91>();
92
93const Context = React.createContext<AudioContext>(DefaultAudioContext);
94
95// … truncated