vue+canvas音频可视化

1.代码 

<template><div class="subGuide"><canvas id="canvas"></canvas><br><audio id="audio" src="./audio.mp3" controls></audio></div>
</template><script>
export default {name: 'subGuide',data() {return {}},mounted() {const audioEle = document.querySelector('audio')const cvs = document.querySelector('canvas')const ctx = cvs.getContext('2d')function initCvs() {cvs.width = (window.innerWidth / 2) * devicePixelRatiocvs.height = (window.innerHeight / 3) * devicePixelRatio}initCvs()let isInit = falselet dateArray = nulllet analyser = nullaudioEle.addEventListener('play', function (e) {if (isInit) returnconst audCtx = new AudioContext()const source = audCtx.createMediaElementSource(audioEle)analyser = audCtx.createAnalyser()analyser.fftSize = 512dateArray = new Uint8Array(256)source.connect(analyser)analyser.connect(audCtx.destination)isInit = true})function draw() {requestAnimationFrame(draw)const { width, height } = cvsctx.clearRect(0, 0, width, height)if (!isInit) returnanalyser.getByteFrequencyData(dateArray)const len = dateArray.length / 2.5ctx.fillStyle = '#266fff'const barWidth = width / len / 2for (let i = 0; i < len; i++) {const data = dateArray[i]const barHeight = (data / 255) * heightconst x1 = i * barWidth + width / 2const x2 = width / 2 - (i + 1) * barWidthconst y = height - barHeightctx.fillRect(x1, y, barWidth - 2, barHeight)ctx.fillRect(x2, y, barWidth - 2, barHeight)}}draw()},methods: {}
}
</script><style lang="scss" scoped></style>

2.效果

音频可视化