102 lines
2.0 KiB
Vue
102 lines
2.0 KiB
Vue
<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>
|
|
^
|