本文为小伙伴带来的是关于AudioContext 实现音频可视化教程,感兴趣的小伙伴一起来看看吧。
要实现音频可视化,实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext:
const ctx = new AudioContext();
const audioSrc = ctx.createMediaElementSource(this.audioElement);
AudioContext的createAnalyser()方法能创建一个AnalyserNode,可以用来获取音频时间和频率数据,以及实现数据可视化。
const analyser = ctx.createAnalyser();
analyser.fftSize = 512;
AudioNode接口的connect()方法使你能将一个节点的输出连接到一个指定目标,这个指定的目标可能是另一个 AudioNode(从而将音频数据引导到下一个指定节点)或一个AudioParam, 以便上一个节点的输出数据随着时间流逝能自动地对下一个参数值进行改变。
audioSrc.connect(analyser);
AudioContext的destination属性返回一个AudioDestinationNode表示context中所有音频(节点)的最终目标节点,一般是音频渲染设备,比如扬声器。
analyser.connect(ctx.destination)
Uint8Array数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
AnalyserNode接口的getByteFrequencyData() 方法将当前频率数据复制到传入的Uint8Array(无符号字节数组)中。
如果数组的长度小于AnalyserNode.frequencyBinCount, 那么Analyser多出的元素会被删除. 如果是大于, 那么数组多余的元素会被忽略.
visualization() { const arr = new Uint8Array(this.analyser.frequencyBinCount); this.analyser.getByteFrequencyData(arr); this.draw(arr); },
this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); const start = ((document.body.clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((item, index) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.line; this.canvas.moveTo(start + (index * 4), this.canvasHeight); this.canvas.lineTo(start + (index * 4), this.canvasHeight - item / 2); this.canvas.stroke(); });}
效果展示:
以上就是关于AudioContext 实现音频可视化教程的全部内容了,感兴趣的小伙伴记得点击关注哦。