技术就餐

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

音频可视化

<template>
<div>
<canvas ref="row" style="background: #000;width:100%;height: 400px;"></canvas>
<audio ref="audio" controls src="../../static/flow.mp3" @play="play"></audio>
</div>
</template>
<script>
export default{
data(){
return{
isInit:false,
dataArr:null,
analy:null
}
},
 
mounted(){
 
},
methods:{
play(e){
if(this.isInit) return
const audCtx = new (window.AudioContext || window.webkitAudioContext)();
const source = audCtx.createMediaElementSource(this.$refs.audio)
this.analy = audCtx.createAnalyser()
this.analy.fftSize = 512
this.dataArr = new Uint8Array(this.analy.frequencyBinCount)
source.connect(this.analy)
this.analy.connect(audCtx.destination)
this.isInit = true
this.draw()
},
draw(){
requestAnimationFrame(this.draw)
const canvas = this.$refs.row
let _this = this
if (!canvas) {
return
}
const { width, height } = canvas.getBoundingClientRect()
const dpi = 2
canvas.width = width * dpi
canvas.height = height * dpi
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
let { width: w, height: h } = canvas
w /= dpi
h /= dpi
const ctx = canvas.getContext('2d')
ctx.scale(dpi, dpi)
ctx.clearRect(0, 0, w, h)
this.analy.getByteFrequencyData(this.dataArr)
const len = this.dataArr.length
const barwidth = w / len
ctx.fillStyle = '#78c5f7';
for(let i =0;i < len ;i++){
const data = this.dataArr[i]
const barh = (data / 255) * h
const x = i * barwidth
const y = h - barh
ctx.fillRect(x,y,barwidth - 2,barh)
}
}
}
}
</script>
<style lang="scss" scoped>
</style>

posted on   技术就餐  阅读(10)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
点击右上角即可分享
微信分享提示