feat: 棒の位置をpropsで指定できるようにする

src/components/AudioVisualizer/AudioVisualizer.stories.tsx

@@ -1,54 +1,42 @@
-import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 import AudioVisualizer from './AudioVisualizer'
-import styles from './AudioVisualizer.module.css'
 
 const meta: Meta<typeof AudioVisualizer> = {
   title: 'common/AudioVisualizer',
   component: AudioVisualizer,
   tags: ['autodocs'],
   argTypes: {
     bgColor: {
+      description: 'Background color of the container',
       control: 'color',
     },
     barColor: {
+      description: 'Color of the bars',
       control: 'color',
     },
     width: {
+      description: 'Width of the container',
       control: 'text',
     },
     height: {
+      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: {},
-  render: () => (
-    <div className={styles['story-container-full']}>
-      <AudioVisualizer />
-    </div>
-  ),
-}
-
-export const FixedWidth: Story = {
-  args: {
-    width: '500px',
-    height: '200px',
-  },
-}
-
-export const ChangeColor: Story = {
   args: {
-    bgColor: '#eeeeee',
-    barColor: '#aaeeaa',
+    height: '100px',
+    width: '100%',
+    barAlign: 'bottom',
   },
-  render: ({ bgColor, barColor }) => (
-    <div className={styles['story-container-full']}>
-      <AudioVisualizer bgColor={bgColor} barColor={barColor} />
-    </div>
-  ),
 }

src/components/AudioVisualizer/AudioVisualizer.tsx

@@ -7,6 +7,7 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
   barColor = '#000',
   width = '100%',
   height = '100%',
+  barAlign = 'bottom',
 }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -39,7 +40,7 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
         draw(analyser)
       })
       .catch((err) => console.log('The following error occurred: ' + err))
-  }, [bgColor, barColor])
+  }, [bgColor, barColor, barAlign])
 
   const draw = (analyser: AnalyserNode) => {
     if (canvasRef.current) {
@@ -63,7 +64,13 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
           barHeight = (frequencyData[i] / 255) * height
 
           ctx.fillStyle = barColor
-          ctx.fillRect(x, height - barHeight, barWidth, barHeight)
+          if (barAlign === 'bottom') {
+            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)
+          }
 
           x += barWidth
         }

src/components/AudioVisualizer/AudioVisualizer.types.ts

@@ -3,4 +3,5 @@ export type AudioVisualizerProps = {
   barColor?: string;
   width?: string;
   height?: string;
+  barAlign?: 'top' | 'center' | 'bottom';
 }