feat: modeにwaveを追加

imaimai17468 · Aug 23, 2023 · 87de8ab · 87de8ab
1 parent 6a285fe
commit 87de8ab
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/components/AudioVisualizer/AudioVisualizer.stories.tsx b/src/components/AudioVisualizer/AudioVisualizer.stories.tsx
@@ -8,7 +8,7 @@ const meta: Meta<typeof AudioVisualizer> = {
   argTypes: {
     mode: {
       description: 'Mode of the visualizer',
-      options: ['bars', 'grid'],
+      options: ['bars', 'grid', 'wave'],
       control: {
         type: 'select',
       },

diff --git a/src/components/AudioVisualizer/AudioVisualizer.tsx b/src/components/AudioVisualizer/AudioVisualizer.tsx
@@ -70,7 +70,12 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
           } 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.fillRect(
+                x,
+                height - gridHeight * (j + 1),
+                barWidth,
+                gridHeight,
+              )
               ctx.strokeStyle = bgColor
               ctx.beginPath()
               ctx.moveTo(x, height - gridHeight * (j + 1))
@@ -81,6 +86,21 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
           x += barWidth
         }
 
+        if (mode === 'wave') {
+          ctx.beginPath()
+          ctx.moveTo(0, height)
+          for (let i = 0; i < frequencyData.length; i++) {
+            ctx.lineTo(
+              (i / frequencyData.length) * width,
+              height - (frequencyData[i] / 255) * height,
+            )
+          }
+          ctx.lineTo(width, height)
+          ctx.closePath()
+          ctx.fillStyle = barColor
+          ctx.fill()
+        }
+
         requestAnimationFrame(() => draw(analyser))
       }
     }

diff --git a/src/components/AudioVisualizer/AudioVisualizer.types.ts b/src/components/AudioVisualizer/AudioVisualizer.types.ts
@@ -1,5 +1,5 @@
 export type AudioVisualizerProps = {
-  mode: 'bars' | 'grid'
+  mode: 'bars' | 'grid' | 'wave'
   bgColor?: string;
   barColor?: string;
   width?: string;