web技术分享| AudioContext 实现音频可视化
要实现音频可视化，实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext。
AudioContext接口表示由链接在一起的音频模块构建的音频处理图，每个模块由一个AudioNode表示。音频上下文控制它包含的节点的创建和音频处理或解码的执行。在做任何其他操作之前，您需要创建一个
AudioContext对象，因为所有事情都是在上下文中发生的。建议创建一个AudioContext对象并复用它，而不是每次初始化一个新的AudioContext对象，并且可以对多个不同的音频源和管道同时使用一个AudioContext对象。
准备 audio 和 canvas 标签
<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio> <canvas ref='canvas' width='300px' height='300px'></canvas> 复制代码
创建并返回一个新的AudioContext对象。
const ctx = new AudioContext(); 复制代码
创建一个新的MediaElementAudioSourceNode对象
AudioContext接口的createMediaElementSource() 方法用于创建一个新的MediaElementAudioSourceNode对象,输入某个存在的 HTMLor` 元素, 对应的音频即可被播放或者修改.
const audioSrc = ctx.createMediaElementSource(this.audioElement); 复制代码
创建AnalyserNode对象
AudioContext的createAnalyser()方法能创建一个AnalyserNode，可以用来获取音频时间和频率数据，以及实现数据可视化。
const analyser = ctx.createAnalyser(); 复制代码
设置 fftSize 属性
AnalyserNode接口的fftSize属性的值是一个无符号长整型的值, 表示（信号）样本的窗口大小。当执行快速傅里叶变换（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。fftSize属性的值必须是从32到32768范围内的2的非零幂; 其默认值为2048。
analyser.fftSize = 512; 复制代码
audioSrc 和 analyser 进行链接
AudioNode 接口的 connect() 方法使你能将一个节点的输出连接到一个指定目标，这个指定的目标可能是另一个 AudioNode（从而将音频数据引导到下一个指定节点）或一个AudioParam, 以便上一个节点的输出数据随着时间流逝能自动地对下一个参数值进行改变。
audioSrc.connect(analyser); 复制代码
analyser 和 ctx.destination 进行链接
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); }, 复制代码使用canvas绘制音频图谱
HTMLCanvasElement.getContext()方法返回canvas的上下文，如果上下文没有定义则返回null.2d建立一个CanvasRenderingContext2D二维渲染上下文。
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.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); this.canvas.lineTo(start + (index * 4), this.canvasHeight - item / 2); this.canvas.stroke(); });} 复制代码效果展示
作者：anyRTC
链接：https://juejin.cn/post/7036943016233271303
伪原创工具 SEO网站优化 https://www.237it.com/