feat: modeプロパティの追加

grid表示の追加
imaimai17468 · Aug 23, 2023 · 6a285fe · 6a285fe
1 parent 2a923e7
commit 6a285fe
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/src/components/AudioVisualizer/AudioVisualizer.stories.tsx b/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
@@ -6,6 +6,13 @@ const meta: Meta<typeof AudioVisualizer> = {
   component: AudioVisualizer,
   tags: ['autodocs'],
   argTypes: {
+    mode: {
+      description: 'Mode of the visualizer',
+      options: ['bars', 'grid'],
+      control: {
+        type: 'select',
+      },
+    },
     bgColor: {
       description: 'Background color of the container',
       control: 'color',
@@ -22,21 +29,15 @@ const meta: Meta<typeof AudioVisualizer> = {
       description: 'Height of the container',
       control: 'text',
     },
-    barAlign: {
-      description: 'Align the bars to the top, center, or bottom of the container (default: bottom)',
-      defaultValue: 'bottom',
-      options: ['top', 'center', 'bottom'],
-      control: { type: 'radio' },
-    },
   },
 }
 export default meta
 type Story = StoryObj<typeof AudioVisualizer>
 
 export const Default: Story = {
   args: {
+    mode: 'bars',
     height: '100px',
     width: '100%',
-    barAlign: 'bottom',
   },
 }
diff --git a/src/components/AudioVisualizer/AudioVisualizer.tsx b/src/components/AudioVisualizer/AudioVisualizer.tsx
@@ -3,11 +3,11 @@ import styles from './AudioVisualizer.module.css'
 import { AudioVisualizerProps } from './AudioVisualizer.types'
 
 const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
+  mode = 'bars',
   bgColor = '#fff',
   barColor = '#000',
   width = '100%',
   height = '100%',
-  barAlign = 'bottom',
 }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -40,7 +40,7 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
         draw(analyser)
       })
       .catch((err) => console.log('The following error occurred: ' + err))
-  }, [bgColor, barColor, barAlign])
+  }, [mode, bgColor, barColor])
 
   const draw = (analyser: AnalyserNode) => {
     if (canvasRef.current) {
@@ -64,14 +64,20 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
           barHeight = (frequencyData[i] / 255) * height
 
           ctx.fillStyle = barColor
-          if (barAlign === 'bottom') {
+
+          if (mode === 'bars') {
             ctx.fillRect(x, height - barHeight, barWidth, barHeight)
-          } else if (barAlign === 'top') {
-            ctx.fillRect(x, 0, barWidth, barHeight)
-          } else {
-            ctx.fillRect(x, height / 2 - barHeight / 2, barWidth, barHeight)
+          } else if (mode === 'grid') {
+            const gridHeight = 10
+            for (let j = 0; j < barHeight / gridHeight; j++) {
+              ctx.fillRect(x, height - gridHeight * (j + 1), barWidth, gridHeight)
+              ctx.strokeStyle = bgColor
+              ctx.beginPath()
+              ctx.moveTo(x, height - gridHeight * (j + 1))
+              ctx.lineTo(x + barWidth, height - gridHeight * (j + 1))
+              ctx.stroke()
+            }
           }
-
           x += barWidth
         }
 

diff --git a/src/components/AudioVisualizer/AudioVisualizer.types.ts b/src/components/AudioVisualizer/AudioVisualizer.types.ts
@@ -1,7 +1,7 @@
 export type AudioVisualizerProps = {
+  mode: 'bars' | 'grid'
   bgColor?: string;
   barColor?: string;
   width?: string;
   height?: string;
-  barAlign?: 'top' | 'center' | 'bottom';
 }