My personal site hosted @ https://indexx.dev
indexx.dev
1import React from "react";
2
3const BAR_COUNT = 15;
4const BAR_ANIMATION_DELAYS = [
5 "0.3s",
6 "0.7s",
7 "0.1s",
8 "0.9s",
9 "0.4s",
10 "0.2s",
11 "0.8s",
12 "0.5s",
13 "0s",
14 "0.6s",
15 "0.3s",
16 "0.9s",
17 "0.1s",
18 "0.7s",
19 "0.4s",
20];
21
22export default function AudioVisualizer({ isSilent = false }) {
23 // Define the base animation style
24 const activeAnimation = "wave 2.5s ease-in-out infinite";
25
26 // Define the style for the silent state (dots)
27 const silentStyle = {
28 animation: "none",
29 height: "5px",
30 };
31
32 return (
33 <div className="visualizer">
34 {Array(BAR_COUNT).fill(0).map((_, index) => {
35 // Determine the specific style for each bar
36 const barStyle = isSilent
37 ? silentStyle // If silent, use the fixed dot style
38 : { // If not silent, use the full animation with its unique delay
39 animation: activeAnimation,
40 animationDelay: BAR_ANIMATION_DELAYS[index],
41 };
42
43 return (
44 <div
45 key={index}
46 className="bar"
47 style={barStyle} // Apply the determined style object
48 >
49 </div>
50 );
51 })}
52
53 <style jsx>
54 {`
55 .visualizer {
56 display: flex;
57 align-items: center;
58 gap: 1px;
59 height: 50px;
60 }
61
62 .bar {
63 width: 2px;
64 background: rgb(0, 151, 188);
65 border-radius: 1px;
66 }
67
68 @keyframes wave {
69 0%, 100% {
70 height: 5px;
71 }
72 50% {
73 height: 30px;
74 }
75 }
76 `}
77 </style>
78 </div>
79 );
80}