Initial commit

components/experiments/AudioVisualization.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <canvas id="audioVisualizer" width="640" height="100" />
+  </div>
+</template>
+
+<script>
+
+function drawVisualization (analyser, canvasCtx) {
+  const bufferLength = analyser.frequencyBinCount
+  const dataArray = new Uint8Array(bufferLength)
+
+  const WIDTH = canvasCtx.canvas.width
+  const HEIGHT = canvasCtx.canvas.height
+
+  function draw () {
+    requestAnimationFrame(draw)
+
+    analyser.getByteTimeDomainData(dataArray)
+
+    canvasCtx.fillStyle = 'rgb(200, 200, 200)'
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT)
+
+    canvasCtx.lineWidth = 2
+    canvasCtx.strokeStyle = 'rgb(0, 0, 0)'
+
+    canvasCtx.beginPath()
+
+    const sliceWidth = WIDTH * 1.0 / bufferLength
+    let x = 0
+
+    for (let i = 0; i < bufferLength; i++) {
+      const v = dataArray[i] / 128.0
+      const y = v * HEIGHT / 2
+
+      if (i === 0) {
+        canvasCtx.moveTo(x, y)
+      } else {
+        canvasCtx.lineTo(x, y)
+      }
+
+      x += sliceWidth
+    }
+
+    canvasCtx.lineTo(WIDTH, HEIGHT / 2)
+    canvasCtx.stroke()
+  }
+
+  draw()
+}
+
+export default {
+  name: 'AudioVisualization',
+  props: {
+    analyser: {
+      type: Object,
+      required: true
+    }
+  },
+
+  setup (props) {
+    onMounted(() => {
+      const audioCanvas = document.getElementById('audioVisualizer').getContext('2d')
+      drawVisualization(props.analyser, audioCanvas)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('keydown', handleKeyDown.bind(this))
+    })
+
+    return {
+      audioCanvas: null
+    }
+  }
+}
+</script>
+
+  <style scoped>
+  /* Style adjustments if needed */
+    /* Styles the track */
+  input[type="range"]::-webkit-slider-runnable-track {
+    background: #e9c046; /* yellow track */
+      height: 8px;
+      border-radius: 5px;
+    }
+
+  input[type="range"]::-moz-range-track {
+      background: #e9c046; /* yellow track */
+      height: 8px;
+      border-radius: 5px;
+  }
+
+  input[type="range"]::-ms-track {
+      background: #e9c046; /* yellow track */
+      border-color: transparent;
+      color: transparent;
+      height: 8px;
+  }
+
+  </style>
+^